微信小程序 animation动画-心跳

Animation动画 wx.createAnimation 。创建一个动画实例。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

 

wxml：

<view style="width: 50rpx; text-algin: center; color: #d70101;">
  <view animation="{{animation}}">❤</view>
</view>

js：

onReady: function () {
  var count = 0;
  this.animation = wx.createAnimation({
    duration: 1000, // 动画持续时间，单位 ms
    timingFunction: 'linear', // 动画的效果
    delay: 100, // 动画延迟时间，单位 ms
    transformOrigin: '50% 50%' // 动画的中心点
  });
  
  setInterval(function() {
    if (count % 2 == 0) {
      this.animation.scale(1.5).step();
    } else {
      this.animation.scale(1.0).step();
    }
    
    this.setData({
      animation: this.animation.export()
    });
    
    count++;
    if (count == 1000) {
      count = 0;
    }
  }.bind(this), 1000);
},

其中，timingFunction的合法值有：

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