微信小程序 动画 animation

微信小程序 动画 animation

Page({
  data: {
    animationData: {}
  },

  onLoad: function() {
   // 旋转动画
    var animation = wx.createAnimation({
      transformOrigin: "33% 50% 0",
      duration: 300,
      timingFunction: 'linear'
    })

    this.animation = animation;

    this.setData({
      animationData: animation.export()
    });

    var n = 0;
    // 连续动画需要添加定时器,所传参数每次+1。
    setInterval(function () {
      n = n + 1;
      console.log(n);
      
      this.animation.rotate(60 * (n)).step()
      this.setData({
        animationData: this.animation.export()
      })
    }.bind(this), 300);
  },
<view>
  <canvas canvas-id="miCanvas" animation="{{animationData}}"></canvas>
</view>

 

发表回复

您的电子邮箱地址不会被公开。