微信小程序，关于绝对定位和动画移动的问题，希望有人可以指点一下，谢谢

[sevenQu]

• 首先在小方块在 wxml 中是绝对定位绑定了 left 和 top 的值，都是 10，用于初始化定位
• 页面结构是灰色一个 view 相对定位，包裹着内部红色 view，红色 veiw 绝对定位
• 点击红色 view，即出发下面的的移动的函数

moveXBox:function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
    })
    animation.translateX(100).step();
    animation.translateY(100).step();
    animation.left(0).top(0).step();
    this.setData({
      animationData: animation.export()
    })
  }

• 第一次点击效果图
  
• 第二次点击效果图
  

1. 我不明白为什么 translate 的坐标和 left 的坐标是怎样的，为什么会这样变化,而且两次变化动作还不一样，第一次的时候，translateX 和 tanslateY 都执行了，left(0)和 top(0)的动作很奇怪，第二次的时候，滑块竟然 x 不动，y 开始向上滑动了，此时的坐标系是什么样子的，希望有人讲解一下

2. 如果我单独执行 animation.left(0).top(0).step();此时红色块会移动到左上角

3. 我个人目前的理解，tranlateX()，是相对原始 view 定位的移动，而微信这里的 left 和 top 是绝对定位确定的坐标系，因为我试了一下，就算是红色块设为 relative，设置 left(0)，其仍会移动到到最左边

[wujichao]

动画建议直接用 css3 的动画做

[sevenQu]

@wujichao 可以说一下，我写的为什么会出现那个效果吗