最近出差比较多，但工作之余还是跟工作室的小伙伴们一起做了几个定制，这几天抽空就把最近做的几个效果跟大家分享下，因为是定制的原因，所以有的关键信息是需要删掉的，不过文章后面会分享素材的下载链接的。
分享动画效果之余，顺便聊聊一些动画的基本原理，也算是跟大家一个参考了！先看效果喽
01动画效果
先分析下动画效果，类似聚光灯的效果，圆圈从左往右划过，文字出现，从右往左划过的时候，文字改变，之后圆圈放大，出现最后的LOGO，文末有素材的分享链接，小伙伴们如果用到类似的效果，可以直接下载，改改文字就可以用了，言归正传！
第一步，原理分析 。
乍一看应该是一个圆做路径运动，但如果真的是这样，文字肯定会被挡住，所以这里用到了动画的一个原理----遮罩原理
简单介绍下遮罩原理，比如下图的动画效果，奔跑的人是从左边跑出来的
原效果
但如果我想让他从下图图示位置出现呢？当然我可以直接加一个出现的动画效果，但是效果会很突兀，就像凭空出现了一样，比较诡异，但是我们可以在奔跑者前面加个同背景一样的色块，对原图就行遮挡，这样看起来就好像是从方框中出现的一样了，这就是遮罩原理！
奔跑者出现位置
03
现在是不是看起来就不一样了？我们甚至可以把效果做的更逼真一点，比如下图
动画效果
如果还不是很清楚的小伙伴，我把遮罩的颜色换下，看下下图估计就明白了！
遮罩原理
第二步，现在再来看第一个动画效果，现在估计很多小伙伴就已经有思路了，是的，遮罩就是一个黑色的矩形，中间扣掉一个圆就可以了，只不过这个遮罩有点大，比实际的演示界面要大的多！
遮罩
分析到这里，有些基础的小伙伴，就知道后面的动画怎么做了，是的，只要给这个遮罩加上路径动画就可以了，底下的文字跟时间轴同步出现！
两次来回移动之后，最后的扩大效果就是强调动画里面的放大/缩小效果，只不过我这次放到了1000%而已，具体的设置和操作希望小伙伴们能实际操作一下，还是不明白的可以下载源文件看下，毕竟纸上学来终觉浅！
其实关于遮罩的应用和效果还有很多，比如我之前做过的一个效果，就是用到了遮罩原理
遮罩案例
后来改良下做了个逗逼版的效果!
逗逼版效果
再比如下图的波浪文字,如果大家感兴趣，下次分享下这个波浪字的效果制作教程！
遮罩应用
好了，最后放上链接（http://pan.baidu.com/s/1jInZ8NW 密码：g9ij），祝大家学习愉快！
网友评论