- 首先在小方块在 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()
})
}


- 我不明白为什么 translate 的坐标和 left 的坐标是怎样的,为什么会这样变化,而且两次变化动作还不一样,第一次的时候,translateX 和 tanslateY 都执行了,left(0)和 top(0)的动作很奇怪,第二次的时候,滑块竟然 x 不动,y 开始向上滑动了,此时的坐标系是什么样子的,希望有人讲解一下
- 如果我单独执行 animation.left(0).top(0).step();此时红色块会移动到左上角
- 我个人目前的理解,tranlateX(),是相对原始 view 定位的移动,而微信这里的 left 和 top 是绝对定位确定的坐标系,因为我试了一下,就算是红色块设为 relative,设置 left(0),其仍会移动到到最左边