第三幅页面中，小男孩需要走到桥上与小女孩汇合，那么小男孩走路的这个运动轨迹是由上桥与桥上直行的两个动作组成，如果是在知道距离比的情况下，我们当然可以用一条keyframes处理掉，但是由于人物采用background-position的关系，所以最终只能采用JS精确处理了，为了让效果看起来更自然，在实现上会写3个translate的动画
动作可以分解：走到桥边，上桥，桥上直行三个动作构成，会涉及到3个translate的距离算法了
三段路的计算都是以小女孩为参考点，小男孩的最终坐标计算就是
top = girl.getPosition().top
left = girl.getPosition().left - boy.getWidth()
把这个最终的值分成三部分去处理了，也就是到桥边，上桥，桥上直行的坐标了
调用walkTo的接口，通过传递不同的时间、left、top的值来形成人物走路的动画
第一段路：2秒钟走到页面left=15%的位置 第二段路：1.5秒走到页面left=25%的位置,top就是小女孩的top位置 第三段路: 1.5秒走到小女孩的的面前
注意了，walkTo接口接受的是一个页面宽的比例值，所以就算算出了实际宽度，也需要转化成比例，这个接口是这样处理的。
在代码编辑器index.html文件中第137行填写相应代码，使小男孩走完第三段路
return boy.walkTo(1500, proportionX);
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
