走路的效果

来源:3-5 路径动画的处理

慕先生2824294

2017-03-09 20:28

为什么那个x 0.5 y0.5 显示出来之后小男孩走路的y轴  会往下偏

写回答 关注

3回答

  • 想转IT的机械狗
    2018-09-04 13:14:52

    因为walkrun定义的就是两个方向运动  如果你不想让Y轴运动  可以在 walkrun参数中不传入Y  也就是只传入前两个参数就好了

  • 神一樣的男人3392911
    2017-04-27 12:48:42

    我也是,你解决了吗

  • 慕粉1831085033
    2017-03-13 14:59:05

    首先看的Qixi.js里函数实现的方法。就是先获得当前视图的大小(窗口大小因为是自适应)。

    // 计算移动距离

    function calculateDist(direction, proportion) {

        return (direction == "x" ?

            visualWidth : visualHeight) * proportion;

    }

    这个函数是计算当前视图(宽,高)的一半,stratRun这个函数是设置小男孩的top值和left值。根据walkRun函数来通过后来设置好的top和left值是实现移动的动画效果。

    你说的小男孩往下走是因为本来小男孩的top是小于后来的设置好的top值的。所以会往下走。

    原的top值是

    //获取小男孩这个节点。

    var $boy = $("#boy");

    var boyHeight = $boy.height();

        $('#boy').css({

          'top': pathY- boyHeight+25,

           });

    现在的top是当前视图的一般

    现在的top值是略微大于原小男孩的top值的 所以Y轴往下移动

    可以看上传的图片 黑色的线是原top值 红色的是后来要移动到的top值 根据公式比较的话应该现有的top要大一些

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例,由浅入深案例拆分讲解

211523 学习 · 540 问题

查看课程

相似问题