- 首先在小方块在 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),其仍会移动到到最左边
