作为一个之前没有写过网页,也没有做过微信小程序的小白,这几天被小程序动画逼疯了,现记录要点如下:
先上基本的动画实现逻辑:
js:
Page({
data: {
...
animation:"",
animationdata:""
}
...
onLoad: function () {
this.data.animation = wx.createAnimation({
duration: 1400,
timingFunction: 'ease',
delay: 0,
transformOrigin: '50% 50% 0'
})
},
xxxx:function(){// 调用动画的函数
this.data.animation.scale(0.9).rotate(360).step({
duration: 100,
delay: 0,
timingFunction: "ease"
});
this.data.animation.scale(1).rotate(0).step({
duration: 500,
delay: 0,
timingFunction: "ease"
});
this.setData({
rotate: this.data.animation.export()
});
}
})
wxml:
<xxx ... animation="{{animationdata}}"></xxx>
现在来进行分析:
上官方API图:
我把最重要的三个函数已经表明出来了:
wx.createAnimation:创建动画实例;
step:创建单步动画;
export:导出动画;
其中wx.createAnimation和step的参数是一样的,这里就像是WXML里子样式和父样式的区别一样;wx.createAnimation里的参数指定一套动画参数,step导出单步的时候还可以改变。
再对这两个函数里比较重要的两个参数作一个解释:
duration 动画持续时间,单位 ms
delay 动画延迟时间,单位ms
在实际的制作动画的时候就这几步:
1、wx.createAnimation创建实例;
2、使用scale,rotate这样的函数嵌套指定动画动作
3、step生成单步动画
4、如果需要做连续多步动画重复2,3步
5、export函数导出动画
6、重复2~5制作下一个动画
强调点:
1、wx.createAnimation生成的动画实例和export导出的动画不是一个东西,所以在上面的代码里用了animation和animationdata来区分,在WXML标签里的animation属性应用的动画也是export导出的animationdata。
2、第二步里设置的动画动作是同步执行的,执行参数(时长,延时等)由step和wx.createAnimation的参数共同决定,这里的参数不是叠加,而是指定目标值,比如我先设定scale(0.5)然后step,export,执行会得到一个正确动画,但是如果我马上又生成一个这样的动画,就不会执行,这个的原因就是scale指定的是目标值,将要变化到0.5scale而不是再加上0.5scale。这一点需要重点理解。
3、两个连续的step然后再export导出的是两步连续动画。比如我的例子生成的动画就是先变化到scale(0.9).rotate(360)时长100ms延时0变化样式ease,执行完以后再变化到.scale(1).rotate(0)时长500ms延时0变化样式ease。总的动画时长0+100+0+500=600ms。
好了,最后再打个总结,虽然微信小程序各方面还不完善,但是我们还是要尽量相信官方,比如我之前不清楚这个流程的时候还想到用定时器setTimeOut来做两步动画,结果用两步step可以轻松实现。当然这个个人原因占有很大一部分。筚路蓝缕以启山林,菜鸟历险进行中。