微信小程序图片左右摆动效果详解
更新时间：2019年07月13日 14:43:49 作者：祈澈菇凉
这篇文章主要介绍了微信小程序图片左右摆动效果详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
先看效果，实现一个图片左右摇动，在一般的H5宣传页，商家活动页面我们会看到这样的动画，小程序的动画效果不同于css3动画效果，是通过js来完成的，其实步骤很简单，首先创建动画实例，再调用实例来描述动画，最后导出即可。
先看效果如下：
简单的参考代码：
wxml:
<image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image>
css：
.img {
width: 120rpx;
height: 120rpx;
margin:300rpx;
}
js
Page({
data: {
animation: {},
},
onLoad: function () {
},
onShow: function () {
// 1: 创建动画实例animation:
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation = animation
var next = true;
//连续动画关键步骤
setInterval(function () {
//2: 调用动画实例方法来描述动画
if (next) {
animation.translateX(4).step();
animation.rotate(19).step()
next = !next;
} else {
animation.translateX(-4).step();
animation.rotate(-19).step()
next = !next;
}
//3: 将动画export导出，把动画数据传递组件animation的属性
this.setData({
animation: animation.export()
})
}.bind(this), 300)
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了JavaScript中的五种事件处理程序方式，具有一定的参考价值，有需要的可以了解一下。2016-12-12
IE与现代浏览器在DOM中最大的差异是什么无疑就是event了。各个浏览器接口的差异以及够头疼了，而IE甚至Firefox早期版本由于内存管理机制不完善，很容易在事件处理中导致内存泄漏2011-10-10
JS获取URL中参数值（QueryString）的4种方法分享
今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了几个很又简单实用的方法，mark下。2014-04-04
跟我学习javascript的函数和构造函数调用，主要包括三方面内容函数调用、方法调用以及构造函数调用，想要了解这些内容的朋友千万不要错过下面的内容。2015-11-11
这篇文章主要为大家详细介绍了js实现html滑动图片拼图验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了微信小程序request请求封装，验签代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
本文主要介绍了element el-input 删除边框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了JavaScript对象之深度克隆介绍,本文详细的讲解了什么是对象深度克隆,并给出了示例代码,需要的朋友可以参考下2014-12-12
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
现在流行面向对象,JavaScript当然要迎头赶上. 有说法JavaScript就是彻头彻尾的OO语言,但我觉得JavaScript实现面向对象的程序还是有诸多不便的.2009-05-05
CheckBox多选取值及判断CheckBox选中是否为空的实例
下面小编就为大家带来一篇CheckBox多选取值及判断CheckBox选中是否为空的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论