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

  • 首先在小方块在 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),其仍会移动到到最左边
阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题