动效设计是一个很有趣的东西，自己对它非常感兴趣，能够将一些交互想法、动态效果实现出来，是一件非常有趣的事情。我们一般看到的动效较多的是呈现在PC端产品界面，或者移动端产品界面，但其实现在动效设计的地方不只这些，不知什么时候开始logo的动效、字体的动效变得流行起来，将原来一些平面的东西变成动态形式，好像给他赋予了心新的生命一样。
今天给大家带来一个简单有趣的的字体动效设计，希望一些经验和技巧能够对初学动效设计的小伙伴们有一定的帮助。按惯例先来一个最终效果图：
靠前步，在AI/PS里设计好你想要的文字效果
（对于字体的设计就不做过多的赘述，直奔主题到动效上，如果对字体设计感兴趣的小伙伴今后我们可以一起去探讨学习）
第二步，整理设计稿，这是关键性的一步
这里我就以AI为例来进行说明，在做其他的动效之前整理设计稿是必须的，AI的设计稿相对比较好整理。将每个笔画或对象都剪切粘贴的新的图层并命好名字。可以使用Ctrl+x，Ctrl+f（剪切—原位粘贴）这两个命来完成。
第三步，导入设计文件到AE中
导入方法双击项目面板空白区域，导入时注意选择导入种类为合成，否则没办法单独做笔画的动画。
第四步，统一给文字每一笔笔画添加进场动画。（A:有句话说得好，人要学会偷懒！B:谁说的，我怎么不知道？）
1.找到时间轴上每个笔画的图层选中，将时间线位置移动到适当偏后的地方按P键打开位置属性点击时间变换秒表添加关键帧。
2.再把时间轴移动到起始位置，在舞台上调整笔画进来时的位置，（以开心的横笔画为例，其他笔画操作相同，让它们从不同的方向进来）同时在这个帧上打开不透明度属性shift+t,打上不透明度关键帧，靠前真0%，第二针100%。做好之后框选这两个关键帧，复制它（Ctrl+c）然后一次一次的选中其他图层粘贴帧（Ctrl+v）。
3. 做好之后按u键打开所有关键帧属性根据笔画出场的先后顺序调整好时间线关键帧出现的位置以及运动的速度，两关键帧之间的距离越短速度越快，越长越慢。
第五步，给笔画运动效果加上DuangDuang的弹性效果。
这里给大家分享一个弹性表达式，有个它之后简直DuangDuang到飞起来。
附上表达式：
amp= .2;
freq=2.0;
decay=3.0;
n= 0;
if(numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n--;}
}
if(n == 0){ t = 0;}
else{t= time - key(n).time;}
if(n > 0){
v = velocityAtTime(key(n).time -thisComp.frameDuration/10);
value +v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}
else{value}
在笔画运动停止的地方加上轻微的缩放动画。复制表达式，住alt键点击缩放属性码表将表达式粘贴到时间轴下方。
第六步，增加眼睛运动和眨眼效果。
1.这一步比较简单，进场的的操作方法和笔画进场一样，将时间线移动到相应的位置先k好起始状态和结束状态，然后在位置属性上加上弹性效果。
2.按S打开眼睛的缩放属性，打好关键帧。靠前帧正常，第二帧上下压扁，第三帧正常，这样就能轻松制作出简单的眨眼睛效果。
第七步，制作装饰元素动画增添丰富层度
1.选中星星素材，用中心点工具调整星星中心点到底角位置
2.按s和shift+r打开图层缩放属性和旋转属性。时间轴往后移动一定的距离，将两个属性都打上关键帧，然后将时间轴往前移动一定的距离将星星的缩放属性值调小，再旋转一定的角度。这时时间轴往后播放一下就有由小变大的缩放动画了。另一只星星和花朵的动画制作方法相似
第八步，制作叶子的飞舞路径动画
1. 在不选中任何图层的情况下用钢笔工具勾勒出叶子的形状，这时图层里多了一个新图层。
2.选中叶子图层按P打开位置属性，用中心点工具将中心点调到花瓣身上，将叶子放倒花瓣重合位置打上关键帧，移动时间线将叶子移动到飘落的地方，这时它会自动添加关键帧。
3.调整曲柄将直线修改为平滑的曲线。回到叶子动画的靠前帧按t打开不透明度属性，添加关键帧值为0，时间抽王后移动一帧，将不透明度值调为100
第九步，制作装饰英文动画，使用到不透明度、位置两个属性
英文的不透明度动画与之前的相似。就不再说明了，缩放的动画需要k三帧达到弹性的效果，同样按s键调出缩放数值，靠前帧缩小，第二帧放大，第三帧回到正常大小。
第十步，整体速度和节奏调整、渲染
再次调整每个对象的进场顺序，动画速度等然后就可以直接渲染出avi视频格式（ctrl+m）。如果想要gif图的话可以自己用格式工厂等转换软件转换下，或者导入ps中另存为GIF图。
这次的简单的小案例，几乎只用到图层的五大属性，算是比较好制作的一些小动画效果，希望能对初学动效的小伙伴有一定的帮助。纯属个人的一些经验手法，如有不当之处请大神轻喷。
版权声明 | 文章配图仅供学习参考，引用图片版权归属原作所有
如有问题，请及时与我们联系，我们将靠前时间做出处理