我們都知道人類是由視覺驅(qū)動的生物，我們的眼睛本能地會注意到移動的物體，設(shè)計(jì)中動效的運(yùn)用則更能吸引人的眼球，好的動效設(shè)計(jì)能夠使一個app從其他競品中脫引而出，同時，動效也是提高用戶體驗(yàn)的一個重要元素，給用戶帶來舒適感與愉悅感。
"Good design is obvious and? great design is invisible."
本文總結(jié)了AE能夠?qū)崿F(xiàn)的最基本的6種動效，希望能夠?qū)Υ蠹业墓ぷ饔袔椭?/p>
1、基礎(chǔ)動畫
通過控制元素的基本屬性來實(shí)現(xiàn)動效，位置（P）、縮放（S）、旋轉(zhuǎn)（R）、透明度（T）
例：列表元素由左向右滑動出現(xiàn)的動效
2、路徑動畫
路徑動畫就是物體或者某個元素按照設(shè)定好的路徑進(jìn)行運(yùn)動
例1: 紙飛機(jī)的運(yùn)動
例2: 針和線的運(yùn)動
例3: 水泡泡的運(yùn)動
例4: 卡片的滑動
3、修剪路徑動畫
通過在圖層上添加路徑，控制開始和結(jié)束的百分比來實(shí)現(xiàn)動畫
例1：加載完成
例2、速度儀表盤進(jìn)度條的動畫
例3、倒計(jì)時數(shù)字色條的轉(zhuǎn)動
4、融合動畫
兩個物體靠近時有粘連效果
5、跟隨動畫
例1、兒子找父親，兒子跟著父親動
6、彈性動畫——表達(dá)式的運(yùn)用
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、彈性表達(dá)式，如拉橡皮筋
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：彈出的圓形選項(xiàng)動畫
例2:下拉刷新后釋放的瞬間動畫
