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

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一开始的那一次不会产生效果,评论有什么好方法嘛?
效果在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/syiting/article/details/115118183