线段自动动画引导页动效制作

教程内容:

绘制线段,通过制作自动动画和放大缩小的效果呈现一个引导页的效果

跟着下面的步骤一步一步制作吧!


1.整体预览


这个案例总共需要制作8个画板,前3个画板主要制作开屏的线段动画

2C08D259-3309-4EBE-B04E-FE8D82527D9F.png


2.制作线段开屏动画


绘制3条线段,在不同画板中调整线段的路径,添加一下时间为0的自动动画

3ECD631A-F1B0-406F-AFAB-815B301562FD.png

B1B580E4-02F6-4863-B046-B21C868DCE38.png


3.制作人物组素材


人物组素材需要3个人物素材水平排列好绘制一个圆制作蒙版剪贴组

9A5FA73C-0DBF-4706-9E0C-9EF1A50916E4.png

如果这个画板以其中一个人物为中心,那另外两个人物需缩小尺寸,这样在发生自动动画时会有逐渐放大的效果

9CA77DC1-F2D4-4870-B7AF-29C5D38D9A04.png


4.线段自动动画


最后一个画板需要延长之前绘制的线段,设置一个5秒长的自动动画,让线段在这5秒内发生自动的坐标移动和路径修改

B838E8F3-9759-431E-94DE-BC30EABE6700.png

717662E6-3911-4E73-B84F-622F6232E0F4.png

6BF2B99A-15CC-4EC4-82FA-E40827DEA3C2.png

制作完成

点击前往查看→查看视频教程获取源文件

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作