章节
问答
课签
笔记
评论
占位
占位

运动的轨迹处理

第三幅页面中,小男孩需要走到桥上与小女孩汇合,那么小男孩走路的这个运动轨迹是由上桥与桥上直行的两个动作组成,如果是在知道距离比的情况下,我们当然可以用一条keyframes处理掉,但是由于人物采用background-position的关系,所以最终只能采用JS精确处理了,为了让效果看起来更自然,在实现上会写3个translate的动画

动作可以分解:走到桥边,上桥,桥上直行三个动作构成,会涉及到3translate的距离算法了

三段路的计算都是以小女孩为参考点,小男孩的最终坐标计算就是

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);
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?