小程序animation

实现微信小程序之animation底部弹窗动画（两种方法）:

参考https://juejin.im/post/5bd7ce15e51d4531b36efd5c

实现动画循环跳动，点击按钮停止跳动回到动画原始状态

index.wxml:

<view class='pro-attention' bindtap='toAttention' animation='{{attentionAnim}}'>
  <text>bounce跳动</text>
</view>
<button bindtap="stopAnimation">点击</button>

index.js:

Page({
  data: {
    attentionAnim: '',
    setInter: '',
    //....其他配置
  },
  stopAnimation: function(){
    clearInterval(this.data.setInter);
    var attentionAnim = wx.createAnimation({
      duration: 150,
      timingFunction: 'ease',
      delay: 0
    })
  
    this.attentionAnim = attentionAnim;
    this.attentionAnim.rotate(0).step();
    this.setData({
      attentionAnim: attentionAnim.export()
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    var attentionAnim = wx.createAnimation({
      duration: 150,
      timingFunction: 'ease',
      delay: 0
    })
    //设置循环动画
    this.attentionAnim = attentionAnim
    var next = true;
    this.data.setInter = setInterval(function () {
      if (next) {
        //根据需求实现相应的动画
        this.attentionAnim.rotate(3).step()
        next = !next;
      } else {
        this.attentionAnim.rotate(-3).step()
        next = !next;
      }
      this.setData({
        //导出动画到指定控件animation属性
        attentionAnim: attentionAnim.export()
      })
    }.bind(this), 150)
  
  },
})

若有错误麻烦指出，或者有更简洁的方法，麻烦告知哦！！谢谢