小程序动画animation左右移动效果

最新推荐文章于 2025-06-19 17:53:53 发布

原创最新推荐文章于 2025-06-19 17:53:53 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

微信专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何在微信小程序中实现一个视图动画，利用`wxml`和`wx.createAnimation` API创建平移效果。通过设置两个连续的translate动画来确保在`setInterval`初始执行时能正确显示动画。同时，文章提到了小程序边框限制和解决方法，以及动画性能的考虑。

wxml

    <view animation="{{animation}}" style="position: absolute">
        <image src="/images/background.png" alt="" class="background"></image>
    </view>

因为小程序边框所限，所以最外层的view应该设置宽度大一点，我设置的是2000px

js

  onLoad() {
    //动画
    this.animation = wx.createAnimation({
      duration: 7000,
      timingFunction: 'linear',
      delay: 0
    })
    this.animation.translate(-680, -1).step()
    this.animation.translate(0, -1).step()
    this.setData({
      animation: this.animation.export()   //输出动画  
    })
    setInterval(function () {
    this.animation.translate(-680, -1).step()
    this.animation.translate(0, -1).step()
    this.setData({
      animation: this.animation.export()   //输出动画  
    })
  }.bind(this),14000)

  },