微信小程序提供了动画相关的api,简单的做一下笔记。
一、创建动画实例
通过wx.createAnimation(Object object)创建一个动画实例animation,然后通过调用实例的方法来描述动画。
相关参数:
transformOrigin指定了变化的原点,其中的三个参数值分别代表的是这个点相对于动画对象的xyz轴的位置。具体如下图所示:
二、接下来的步骤
1、将动画对象保存到全局对象中
在页面创建或者组件创建时通过this.animation = wx.createAnimation(Object object)传入动画对象。
2、设置动画的变化方式
如通过this.animation.left('40rpx')将左边距设置为40rpx,当然我们也可以同时执行多个动画,如this.animation.left('40rpx').opacity(0.3)将会在左边距设置为40rpx同时设置透明度为0.3
3、通过step(Object object)结束一组动画
this.animation.left('40rpx').step()表示左边距设置为40rpx这一组动画完成,我们可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
step()中的参数和createAnimation(Object object)一致。
4、通过export方法导出动画数据
结束了动画后我们还有最后一步,就是通过export()导出动画数据传递给组件的animation属性,即通过this.setData({})将this.animation.left('40rpx').step().export()返回的动画队列传递给需要进行动画的组件。