小程序动画加载只执行一次的问题

问题

最近, 想做个小程序的圆盘抽奖出来, 想要实现的效果是点击一次就旋转一次. 不过每次只有第一次点击有效, 再次点击就没有任何动画效果. 代码如下

rotate: function() {// 创建一个动画实例var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})// 动画效果为旋转 360 度animation.rotate(360).step()// 将动画实例数据传给组件的animation属性this.setData({animationData: animation.export()})
}

产生原因

通过断点调试, 发现这个函数是正常执行的. 后来查阅了资料, 发现小程序判断是否要有动画效果是看当前状态和要执行的实例数据间是否有差值.

打个比方: 小明站在起跑线上(初始状态), 第一次让体育老师( 动画实例 ) 让他走到离起跑线十米远( 实例数据 ) 的地方. 第二次体育老师又让小米走到离起跑线十米远的地方, 小明看了看脚下, 发现自己现在就在十米远的地方, 于是他决定不走了.

我之前的代码就是这种情况, 从第二次点击开始, 前后数据没有改变, 所以就不会有动画效果. 既然问题找到了, 接下来就是思考怎么解决了.

解决方法

我一开始想到了两种方法, 一种是让小明重新回到起跑线上, 另外一种是让小明在第一次的基础上, 再走多十米. 因为我要做的是抽奖, 第一种方式会更方便我计算. 所以我改进了一下代码. 代码如下

rotate:function() {// 创建动画实例var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})// 动画效果为旋转 360 度 animation.rotate(360).step()// 将动画实例数据传给组件的animation属性this.setData({animationData: animation.export()})// 回到初始状态setTimeout(function() {// 逆时针旋转至0度animation.rotate(0 ).step()this.setData({animationData: animation.export()})}.bind(this), 1300);}

效果图

现在的效果每次顺时针旋转360度, 然后再逆时针旋转360度回到初始状态

改进

在后面的具体实现中, 我觉得每次回到初始状态的时间太久, 我想将这个时间缩短, 思考一会, 决定添加多一个动画实例

rotate:function() {// 顺时针旋转实例var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})// 逆时针旋转实例var animation1 = wx.createAnimation({duration: 10,timingFunction: 'ease'})animation.rotate(450 ).step()this.setData({animationData: animation.export()})setTimeout(function() {animation1.rotate(0 ).step()this.setData({animationData: animation1.export()})}.bind(this), 1300);}

楼主也是菜鸡前端一个, 如果文章中有错误的地方, 欢迎各位大佬指出 .