一个很简单的动画，就是将背景图片从一端移动到另外一端，使用帧动画的写法，在真机调试上发现无法移动？请问这是为什么？

wxml:

<view class = "container" style="background-color:rgb(80, 80, 80);" >
  <image id = "bgimg" class = "bg"  src="图片地址" ></image>
</view>
<button bindtap = "movebg">MOVE</button>

js:

var windowWidth = wx.getSystemInfoSync().windowWidth
var windowHeight = wx.getSystemInfoSync().windowHeight


Page({
  
  movebg:function(){
    if (windowHeight>=800){
      setTimeout(()=>{
      this.animate("#bgimg",[{
      translateX:-1500*windowWidth/750,translateY:-2750*windowWidth/750},
      {translateX:-1650*windowWidth/750, translateY:-1560*windowWidth/750}],2400,)},2100)
    }


    if (windowHeight>=700 && windowHeight<800){
      setTimeout(()=>{
      this.animate("#bgimg",[{
        translateX:-1475*windowWidth/750,translateY:-2710*windowWidth/750},
        {translateX:-1585*windowWidth/750, translateY:-1540*windowWidth/750}],2400,)},2100)
    }


    if (windowHeight>=600 && windowHeight<700){
      setTimeout(()=>{
      this.animate("#bgimg",[{
        translateX:-1180*windowWidth/750,translateY:-2250*windowWidth/750},
        {translateX:-1280*windowWidth/750, translateY:-1290*windowWidth/750}],2400,)},2100)
    }


    if (windowHeight<600){
      setTimeout(()=>{
      this.animate("#bgimg",[
        {translateX:-1150*windowWidth/750,translateY:-2210*windowWidth/750},
        {translateX:-1250*windowWidth/750, translateY:-1260*windowWidth/750}],2400,)},2100)
    }


  }
})