如何用AE来实现6种最基本的动效

我们都知道人类是由视觉驱动的生物，我们的眼睛本能地会注意到移动的物体，设计中动效的运用则更能吸引人的眼球，好的动效设计能够使一个app从其他竞品中脱引而出，同时，动效也是提高用户体验的一个重要元素，给用户带来舒适感与愉悦感。

"Good design is obvious and  great design is invisible."

本文总结了AE能够实现的最基本的6种动效，希望能够对大家的工作有帮助～

1、基础动画

通过控制元素的基本属性来实现动效，位置（P）、缩放（S）、旋转（R）、透明度（T）

例：列表元素由左向右滑动出现的动效

2、路径动画

路径动画就是物体或者某个元素按照设定好的路径进行运动

例1: 纸飞机的运动

例2: 针和线的运动

例3: 水泡泡的运动

例4: 卡片的滑动

3、修剪路径动画

通过在图层上添加路径，控制开始和结束的百分比来实现动画

例1：加载完成

例2、速度仪表盘进度条的动画

例3、倒计时数字色条的转动

4、融合动画

两个物体靠近时有粘连效果

5、跟随动画

例1、儿子找父亲，儿子跟着父亲动

6、弹性动画——表达式的运用

A、Overshoot（过冲、夸张的）理解为“抖动”，如 果冻抖动的效果

freq = 3;

decay = 5;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time) n--;

}

if (n > 0){

t = time - key(n).time;

amp = velocityAtTime(key(n).time - .001);

w = freq*Math.PI*2;

value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

}else

value

B、Bounce 理解为“反弹”，如 皮球落地反弹的效果

elev = degreesToRadians(75);

v = 1900;

e = .7;

f = .5;

g = 5000;

nMax = 9;

tLaunch = 1;

vy = v*Math.sin(elev);

vx = v*Math.cos(elev);

if (time >= tLaunch){

t = time - tLaunch;

tCur = 0;

segDur = 2*vy/g;

tNext = segDur;

d = 0; // x distance traveled

nb = 0; // number of bounces

while (tNext < t && nb <= nMax){

d += vx*segDur;

vy *= e;

vx *= f;

segDur *= e;

tCur = tNext;

tNext += segDur;

nb++

}

if(nb <= nMax){

delta = t - tCur;

x = d + delta*vx;

y = delta*(vy - g*delta/2);

}else{

x = d;

y = 0;

}

value + [x,-y]

}else

value

C、弹性表达式，如拉橡皮筋

amp = .1;

freq = 2.0;

decay = 2.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}

例1：弹出的圆形选项动画

例2:下拉刷新后释放的瞬间动画