多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 科幻风格H5制作 **1. 制作科技感走线动画(进度动画)** 如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性 ![](https://box.kancloud.cn/ec40a1aeb71fd177f449a1473ba60ee6_900x534.png) 然后在时间轴上右键→插入帧→右键→插入进度动画 即可制作出一个自动绘制折线的炫酷动画 ![](https://box.kancloud.cn/f95742904adad36ac7a03f5d4059e0d2_900x527.png) 我们新建5个图层,分别在每个图层上绘制一条直线 ![](https://box.kancloud.cn/4cc9913859217872ead8707af8578abf_900x534.png) 为第一条直线的某个时间段插入进度动画:右键→插入进度动画→(在特定帧数上)右键→插入关键帧 ![](https://box.kancloud.cn/dc206c109e46af589fdbd8e5efd7ac42_900x534.png) 同理分别为其他几条线插入进度动画,制作出直线一条条绘制出来的炫酷效果 ![](https://box.kancloud.cn/2fd32f29b765c34f380ee5f2a363b9d4_900x530.png) 也可新建图层,在合适的位置添加相关图片素材等 ![](https://box.kancloud.cn/cb1b8b30077a0aa50accb28a735b2a74_900x531.png) **2. 制作酷炫logo动画(进度动画)** 同理,我们也可以用进度动画制作相关logo的绘制效果。 如下图,我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形 ![](https://box.kancloud.cn/d67e9778fe160d2cefe767ffabc2427e_900x529.png) 为其添加进度动画 ![](https://box.kancloud.cn/011d7edfaf2311a9a647abecc854ce4d_900x522.png) **3. 制作酷炫酒瓶走光动画(遮罩动画)** 我们先用曲线工具绘制一个酒瓶形状,同时新建图层2,将酒瓶复制粘贴进图层2 ![](https://box.kancloud.cn/c8fb2b612b5c4fa8a3536b07951fab08_900x530.png) 选中图层2,将其物体的填充色去掉,只剩下边框 ![](https://box.kancloud.cn/93a7c6926b74970d9354570d7b40085e_900x529.png) 在图层2下面新建图层3,添加一个矩形,在其属性栏的填充颜色内选择“线性”,制作白色光亮效果 ![](https://box.kancloud.cn/8d6aae1c5a8d907cfb1acb39523541b7_900x540.png) 为所有图层添加帧,为图层3的光亮物体制作一个从上往下移动的动画效果 ![](https://box.kancloud.cn/399c20b3b1afbfe79597fd82390ec499_900x535.png) 选中图层2,将其转换为“遮罩层” ![](https://box.kancloud.cn/67649cef14f39afcc2bca3c80896baee_900x532.png) 我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。 最后可点击预览效果。 ![](https://box.kancloud.cn/819811453c77c0891a9c8dee4573816b_900x526.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.1/4.1.9.mp4