小程序动画

动画

　　wx.createAnimation()创建一个动画实例。参数duration动画持续的时间默认400，timingFunction定义动画效果默认‘linear’，delay动画延迟时间默认0，transformOrigin设置transform-origin。

　　　　timingFunction的有效值linear从头到尾速度相同，ease低速开始然后加快在结束前变慢，ease-in动画以低速开始，ease-in-out动画以低速开始和结束，ease-out动画以低速结束，step-start动画第一帧跳至结束状态直到结束，step-stop动画一直保持开始状态最后一帧跳到结束状态

　　　　animation

　　　　　　样式方法opacity透明度，backgroundColor背景色，width宽度值，height高度值，top上边值，right右边值，bottom下边值，left左边值

　　　　　　旋转方法rotate旋转-180~180，rotateX在X轴旋转的角度-180~180，rotateY在Y轴旋转的角度-180~180，rotateZ在Z轴旋转的角度-180~180，rotate3d三个方向的旋转

　　　　　　缩放方法scale表示XY轴的缩放倍数，scaleX表示X轴的缩放倍数，scaleY表示Y轴的缩放倍数，scaleZ表示Z轴的缩放倍数，scale3d三个方向的缩放倍数

　　　　　　偏移translate表示XY轴的平移距离，translateX表示X轴的偏移距离，translateY表示Y轴的偏移距离，translateZ表示Z轴的偏移距离，translate3d表示三个方向的偏移距离

　　　　　　倾斜skew表示XY轴的倾斜度数-180~180，skewX表示X轴的倾斜度数-180~180，skewY表示Y轴的倾斜距离-180~180

　　　　　　矩阵变形matrix组合动画，matrik3d组合3d动画

　　　　animation.step()来表示一组动画。参数ducation动画持续的时间

　　　　animation.export()输出动画。　　　

 //创建animation对象
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    this.animation = animation;
    //定义一个XY缩放2倍的动画
    animation.scale(2,2).step({duration: 1000});
    //定义一个XY平移100的动画
    animation.translate(100,100).step({duration: 1000});
    //定义了一个透明度为0.2宽度为300的动画
    animation.width(300).opacity(0.2).step({ duration: 3000, timingFunction: 'ease-in'});
    //页面加载完2s后执行动画
    setTimeout(function(){
      that.setData({
        animationData: animation.export()
      })
    },2000)