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)

  },

js

Page({
  data: {
    animation:{}
  },

在这里插入图片描述
设置两遍translate,不然呢setInterval一开始的那一次不会产生效果,评论有什么好方法嘛?
效果在这里插入图片描述

Logo

分享最新的 NVIDIA AI Software 资源以及活动/会议信息,精选收录AI相关技术内容,欢迎大家加入社区并参与讨论。

更多推荐