微信小程序之八：动画

---wxml文件---

<view class='lunbo' animation="{{animationItem}}"
</view>

---JS文件---

  var that = this;
    //动画样式
    that.animationItem = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear',
      transformOrigin: '90% 70%',
      success: function(res) {}
    });
    
    // 定时器，2S 循环一次
    that.data.newLunbo_interval = setInterval(function() {
      //开始动画-缩小
      that.animationItem.scale3d(0.98, 0.98, 0.1).step();
      that.setData({
        animationItem: that.animationItem.export()
      });
      //延迟恢复到原来大小
      setTimeout(function() {
        that.animationItem.scale3d(1.0, 1.0, 1.0).step();
        that.setData({
          animationItem: that.animationItem.export(),
        });
      }, 500)
    }.bind(that), 2000);

清理定时器

    clearInterval(this.data.newLunbo_interval);

创建wx.createAnimation参数含义

duration            动画持续时间，单位 ms 
timingFunction      'linear' 动画的效果  
delay               动画延迟时间，单位 ms 
transformOrigin     '50% 50% 0'

timingFunction 的合法值

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

transformOrigin 的合法值

transform-origin: x-axis y-axis z-axis;

x-axis  定义视图被置于 X 轴的何处。可能的值：
    left
    center
    right
    length
    %
    
y-axis  定义视图被置于 Y 轴的何处。可能的值：
    top
    center
    bottom
    length
    %

z-axis  定义视图被置于 Z 轴的何处。可能的值：
    length

全部文章地址：www.freefook.com