小程序动画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一开始的那一次不会产生效果，评论有什么好方法嘛？
效果