微信小程序左右运动动画

js

data: {
    animationData: {},
    timer: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.loop = wx.createAnimation({
      delay: 0,
      timingFunction: 'ease'
    })
    let flag = true
    this.data.timer = setInterval(() => {
      if (flag) {
        this.loop.right(20).step()
      } else {
        this.loop.right(0).step()
      }
      flag = !flag
      this.setData({
        animationData: this.loop.export()
      })
    }, 500);
  },
  onUnload() {
    clearInterval(this.data.timer)
  },

wxml

 <view class="new-video" animation="{{animationData}}">新剧抢先看</view>

wxss

.new-video {
  background-color: yellow;
  border-radius: 5px;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: 0;
}
posted @ 2022-10-11 15:33  Samsara315  阅读(206)  评论(0编辑  收藏  举报