多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 一只挖空心思的行礼箱 **1.制作元件动画** 如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面 ![](https://box.kancloud.cn/788d8b268df2101479bb3294cee35ae3_900x476.png) 如图,在元件第20帧插入帧,插入关键帧动画。 选中变形工具,按住Ctrl键将中间的控制原点移至舞台右侧中间位置 ![](https://box.kancloud.cn/019602346060f31cf1ee7c0cb083af2e_900x475.png) 分别选中第一帧、最后一帧,改变其“Y轴旋转”为“-90”“90” ![](https://box.kancloud.cn/2c7030316e8c32754f8a9099ee4159d7_900x472.png) ![](https://box.kancloud.cn/242a614527c1f20bc26a0af3a8eeac02_900x473.png) 可点击“预览”观察元件动画的效果 同时我们在帧数的中间位置(图片正居舞台)插入关键帧,调整“透视度”为“50” ![](https://box.kancloud.cn/304c8e64ee0db5b01cc2af99ce06b29a_900x479.png) 如下图,我们新建多个图层,复制图层0上的所有帧,分别粘贴进每一个图层内 ![](https://box.kancloud.cn/d42b9057f0611295d321ee52e7e82374_900x485.png) 如下图,在图层8上,删除除第一帧之外的前半部分帧数,同时修改第一帧的“Y轴旋转”为“0” ![](https://box.kancloud.cn/9c4be5e54c0a47a5bd454cfb6d54fb16_900x482.png) ![](https://box.kancloud.cn/c1fa6889067355797906e6ce29753368_900x480.png) 同理,分别删除图层7、6、5、4前半部分的一些帧如下图,分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72” ![](https://box.kancloud.cn/df49a31bee82cf0f7c1108ab04293f10_900x474.png) 移动图层2、1、0上的关键帧如下图位置,即在前面分别插入2、4、6帧 ![](https://box.kancloud.cn/e9ae3132b7d70097e6d15b269d5c6679_900x473.png) 新建图层9,在与图层0第一帧相同帧数上插入一个矩形,调整颜色如下图,制作一个光韵矩形。 ![](https://box.kancloud.cn/5804a96c5050c0c667159db730f37276_900x482.png) 如下图为光韵矩形也设置相同的翻页动画,调整其第一帧关键帧的“Y轴旋转”为“-90”,调整其最后一帧关键帧的“Y轴旋转”为“0”,同时在最后插入一个空白帧。 ![](https://box.kancloud.cn/b25c42a7f4e5cfe4f79a660507f81875_900x476.png) 如下图,隔图层复制光韵图层及帧。 ![](https://box.kancloud.cn/e6e0aa712e8714689e2b1b3b6818959d_900x479.png) 之后,可双击元件每个图层的物体,分别进入各自的组,添加相对应的素材。 即做好一个元件动画。 ![](https://box.kancloud.cn/0ce5a3f9fbd57ae7481ebb9da295f33c_900x468.png) **2.制作“左右滑动预览”动画** 回到舞台,新建一个图层,添加“左右滑动预览”指示图标、一个文本框、两个定时器 分别为文本框、两个定时器命名为“关联数值”“加”“减” ![](https://box.kancloud.cn/bb5f3c092bd45786c7cbab7233905766_900x472.png) 改变文本框数值为“10”。点击其“添加/编辑行为”按钮,添加两个行为: 1. 属性控制→设置定时器 →触发条件:出现 →设置“参数”: 定时器名称:加 设置状态:暂停记时器 ![](https://box.kancloud.cn/2e53e0a141870ec59c9627e4d64664ca_900x471.png) ![](https://box.kancloud.cn/d3419e1358020a9e73203d98808dd572_900x472.png) 2. 属性控制→设置定时器 →触发条件:出现 →设置“参数”: 定时器名称:减 设置状态:暂停记时器 ![](https://box.kancloud.cn/e6cfd1a33c66ed01e9311ba6d0d4a249_900x469.png) 为“加”定时器添加行为 属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”: 元素名称:关联数值 元素属性:文本取值 赋值方式:在现有值基础上增加 取值:0.01 ![](https://box.kancloud.cn/72a7c7304f81ad886d99342a678d92eb_900x466.png) ![](https://box.kancloud.cn/b2bb67c861a68f54daf3a186e94932c5_900x479.png) 同理,为“减”定时器添加行为 属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”: 元素名称:关联数值 元素属性:文本取值 赋值方式:在现有值基础上增加 取值:-0.01 ![](https://box.kancloud.cn/9a8e4d9d48343c83e8570b3d1270c544_900x471.png) 设置元件的动画关联如下图: 关联对象:关联取值 关联属性:文本取值 开始值:10 结束值:0 播放模式:同步 ![](https://box.kancloud.cn/0240291829ef8e7f0e29f29f47d07982_900x463.png) 为元件添加六个行为,分别为 “向左滑动‘加’定时器继续计时” “向左滑动‘减’定时器暂停计时” “向右滑动‘减’定时器继续计时” “向右滑动‘加’定时器暂停计时” “点击暂停‘加’定时器” “点击暂停‘减’定时器” ![](https://box.kancloud.cn/fe4bc05947f4732c55e832e9051692e1_900x482.png) 为文本框添加两个控制定时器的行为: 1. 属性控制→设置定时器→触发条件:属性改变→设置“参数” 定时器名称:减 设置状态:暂停记时器 执行条件:检查元素状态 元素名称:关联数值 参考属性:文本取值 逻辑条件:小于等于 参考值:0 ![](https://box.kancloud.cn/36c23a5f0e4501932a0af525746f266b_900x472.png) ![](https://box.kancloud.cn/85861bdf791eae924877d236fec8afb9_900x459.png) 2. 属性控制→设置定时器→触发条件:属性改变→设置“参数” 定时器名称:加 设置状态:暂停记时器 执行条件:检查元素状态 元素名称:关联数值 参考属性:文本取值 逻辑条件:大于 参考值:10 ![](https://box.kancloud.cn/03ec9778adb1d7fd328d38cd45466059_900x459.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.1/4.1.8.mp4