小程序+wepy实现 图片 的抖动旋转效果

小程序+wepy实现 图片 的抖动旋转效果

直接上代码

<image class="hongbao" mode="scaleToFill" src="../images/hongbao.png" animation="{{animation}}" />

样式

.hongbao{
    width:90rpx;
    height:90rpx;
}

data中的变量

data = {
	animation: {},
    next:true,
};

在onshow中写

async onShow() {
	// 1: 创建动画实例animation:
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    this.animation = animation
    //连续动画关键步骤
    setInterval(()=>{
      console.log('1111');
      //2: 调用动画实例方法来描述动画
      if (this.next) {
        // animation.translateX(4).step(); //左右偏移
        animation.rotate(19).step()
        this.next = !this.next;
      } else {
        // animation.translateX(-4).step(); //左右偏移
        animation.rotate(-19).step()
        this.next = !this.next;
      }
      //3: 将动画export导出，把动画数据传递组件animation的属性 
      this.animation=animation.export() 
      this.$apply();// 调用此方法刷新 animation数据
    }, 300)
}

欢迎大神指教!!!