V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sevenQu
V2EX  ›  微信

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

  •  
  •   sevenQu · 2018-05-20 10:35:12 +08:00 · 3983 次点击
    这是一个创建于 2372 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 首先在小方块在 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 条回复    2018-05-20 11:37:21 +08:00
    CDuXZMAPgHp1q9ew
        1
    CDuXZMAPgHp1q9ew  
       2018-05-20 10:56:12 +08:00
    动画建议直接用 css3 的动画做
    sevenQu
        2
    sevenQu  
    OP
       2018-05-20 11:37:21 +08:00
    @wujichao 可以说一下,我写的为什么会出现那个效果吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   362 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:56 · PVG 05:56 · LAX 13:56 · JFK 16:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.