图片无限旋转

index.wxss

view{
    text-align: center;
}
image{
    //设置圆角
    border-radius: 200rpx;
    width: 400rpx;
    height: 400rpx;
}

index.wxml

<view>
    <!-- animation:设置动画事件 -->
    <image src="/static/rv_img1.jpg" mode="aspectFit" animation="{{animator}}"></image>
    <button type="primary" bindtap="motion">开始动画</button>
</view>

index.js

const app = getApp()
Page({
  //动画事件
  animation: '',
  durTime:0,
  data: {
    //动画对象
    animator: ''
  },

  motion() {
    //旋转360°
    // this.animation.rotate(360).step()
    //放大1.5倍
    // this.animation.scale(1.5).step()
    //偏移
    // this.animation.translate(360).step()
    //倾斜
    // this.animation.skew(360).step()
    //同时执行多个效果
    // this.animation.skew(360).translate(100).rotate(360).scale(1.5).step()
    this.durTime += 360
    this.animation.rotate(this.durTime).step()
    this.setData({
      //赋值
      animator: this.animation.export()
    })
    //利用差值达到无限循环效果
    var that = this
    setInterval(function () {
      that.durTime += 360
      that.animation.rotate(that.durTime).step()
      that.setData({
        animator: that.animation.export()
      })
    }, 3000); 
  },
  onLoad() {
    this.animation = wx.createAnimation({
      //延迟多久开始
      delay: 0,
      //动画持续时间
      duration: 3000,
      //类似于"插值器"
      timingFunction: 'ease',
      transformOrigin: "50% 50%"
    })
  }
})

效果图