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

路径动画的处理

路径动画就是你想某个东西按照你预想的路径来运动。比如说一片树叶从树上落下来,具体要怎样落下来,你就可以画一条线作为路径,让树叶沿着线落下来,这就是路径动画。

在这个七夕的主题效果中,小男孩除了沿着一条直线行走外,还会在不同的时间段有不同的速率,除此之外在进出商店与上桥也是非直线的变化,因此需要为人物的路径变化做一个统一的处理方式

我们把小男孩子所有的动作分解一下

  • 走路到页面的2/3的时候,主题页面开始滑动
  • 走路到1/2的时候,到了商店门口
  • 进出商店
  • 走路到1/4到了桥边
  • 走路到1/2到了桥上
注意:小男孩走路范围其实只有一个页面区域,因为父容器是content元素

小男孩不管是往X还是Y轴变化,我们可以做一个比例算出来,按照百分比的比例去换算实际的距离

例如:走到1/2的位置 ,具体的坐标值的计算就是 : 实际X轴位置 = 0.5 * 页面宽度 ,同样Y轴的计算也是如此

那么我们可以把人物走路的接口封装下,传递一个想要的距离比,这样就可以很方便的指定走到某一个位置了

为什么这么麻烦? 因为是自适应布局,分辨率是变化的,所以用百分比的比值比较好定位位置

具体我们可以看右边代码的实现:

我们把代码封装后,只需要设置一个时间,X与Y的一个比例,就可以让目标移动到指定的位置了

var distX = calculateDist('x', 0.5)
var distY = calculateDist('y', 0.5)
walkRun(10000, distX, distY)

这里要注意坐标位是以小孩男的左上角0,0开始的,所以人物的实际位置看起来可能不是在正中间。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?