学习笔记:微信小程序之动画

1,075 阅读1分钟

微信小程序提供了动画相关的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()返回的动画队列传递给需要进行动画的组件。