我们都知道人类是由视觉驱动的生物，我们的眼睛本能地会注意到移动的物体，设计中动效的运用则更能吸引人的眼球，好的动效设计能够使一个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:下拉刷新后释放的瞬间动画
网友评论