微信小程序动画其实很简单

在小程序中，通常可以使用CSS渐变和CSS动画来创建简易的界面动画。同时，还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。

这里我们主要介绍一下使用微信wx.createAnimation 接口来创建动画效果。

1.创建动画实例

//js文件
this.animation = wx.createAnimation({
      duration:3000,
      timingFunction:'ease',
      delay:1000,
      transformOrigin: '50% 50% 0'
    })

官方参数说明：

timmingFunction取值：

2.调用创建好的动画实例的方法来描述动画

这里以旋转为例，调用动画实例的旋转的方法，step方法表示一组动画的完成。因为动画实例的方法的返回值是当前的动画对象，动画实例方法可以进行链式调用下去。想要了解更多动画实例的方法，点击这里

//js文件
this.animation.rotate(Math.random() * 720 - 360).step();

 

3.通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

//js文件
this.setData({animation: this.animation.export()});

//wxml文件

这里的实例用的是官方实例，详细代码内容请看这里

效果：