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

小男孩动作分解

场景B中涉及的动作比较多,然后动作之间都是有交叉的,所以在流程上需要有一定的控制。所以会针对所有动作进行单独的分解,这个单独拆分出小男孩动作做讲解

参考右边代码pageB.js的实现,代码需要结合pageB.js与pageB.css一起看,整体的代码都封装了单列对象boyAction上,走路的实现同样是transition+精灵图的组合,针对这样的异步流程代码,继续采用了Deferred对流程封装

动作分4部分:

  1. 小男孩从右边走出来的动作
  2. 小男孩解开包裹拿出礼物的动作
  3. 在3d旋转中脱衣的动作
  4. 转身拥抱的动作

小男孩取至一张15帧的精灵图,为了保持自适应缩放会在x轴上放大15倍,通过百分比切换x轴的坐标达到走路切换的效果。

针对四个动作的实现分解:

走路的实现已经是老套路了,boyAction.walk方法中通过transition控制元素的right值的变化,这样让元素产生动的效果,结合css中定义的boy-walk类的精灵动作切换

解开包裹拿出礼物同样是2张图片组合切换,通过动态增加boy-unwrapp样式处理,样式中注意一个问题,动画的停留状态,需要设置forwards让动作保持在最后一张图上,解开包裹的动作通过css3动画处理的,那么这就是异步,如果后续的动作要连接上,需要就监听这个动作,通过one给元素绑定animationEnd监听事件(one只绑定一次)

在3d旋转动脱衣的动作,是有3个图的切换,在strip方法中,动态的传递一个变量,来添加对应的样式文件

人物拥抱处理中,处理用了帧动画的,还有注意图层的重叠问题,所以单独用一个节点做了头部。在拥抱结束后显示这个头部元素

任务

在pageB.js文件代码中19行填写任务代码

任务

小男孩从右边走出来,走到right=4.5rem的位置,耗时4000毫秒

注意:

1. 通过$.Deferred编写异步代码,能够让后续的动作then方法衔接得上

2.可以通transition让元素运用

3.注意动画回调的监听

?不会了怎么办

            var dfd = $.Deferred();
            $boy.transition({
                "right": "4.5rem"
            }, 4000, "linear", function() {
                dfd.resolve()
            });
            return dfd;

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?