MG点线动画临摹《THE EDITOR》－03（破碎切割效果）

预览：

临摹点：

1. 切割破碎；
2. 运动修饰。

1、切割线

继续使用之前的45度方形。删除多余关键帧，预合成。

钢笔绘制线条，找到形状层下stroke 1 里的 Dashes，将其变为虚线，命名为“切割线”，key动画，旋转和下落。然后复制方形，将其移动到虚线“切割线”上面，选择“Luma Matte 方形2 ”。也就是将这个方形的亮度作为虚线条的蒙板。

2、切割及落地

将方块预合成，将其命名为“切割”，利用蒙板遮住被切割部分制造切割效果。

给合成“切割”key帧，首先给位置key帧，key一个下落的动画，落点在之前方形最下方角所在的位置。

给rotation添加关键帧，和下落的动画同步，在开始下落前的一帧打关键帧，数值不变，往后一帧关键帧旋转15度。注意这里要配合切割的受力方向。

在落地的关键帧前面三帧左右，给rotation添加关键帧，将值改为0 。这里不和落地同步而是稍微往前一点的地方打关键帧，是因为我们将要给rotation添加弹性表达式，以模仿受力后的摇晃，我们希望这个方形的摇晃能够在落后前就结束。

给rotation添加弹性表达式overshot并修改表达式中的值，调试：

freq = 5;
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

给position也添加弹性表达式Bounce，制造一个落地反弹的效果，修改表达式中的值进行调试，这里用的表达式如下：

e = .8;
g = 3000;
nMax = 9;

n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time) n--;
}
if (n > 0){
t = time - key(n).time;
v = -velocityAtTime(key(n).time - .001)*e;
vl = length(v);
if (value instanceof Array){
vu = (vl > 0) ? normalize(v) : [0,0,0];
}else{
vu = (v < 0) ? -1 : 1;
}
tCur = 0;
segDur = 2*vl/g;
tNext = segDur;
nb = 1; // number of bounces
while (tNext < t && nb <= nMax){
vl *= e;
segDur *= e;
tCur = tNext;
tNext += segDur;
nb++
}
if(nb <= nMax){
delta = t - tCur;
value + vu*delta*(vl - g*delta/2);
}else{
value
}
}else
value

最后得到效果如下：

三、碎块落下

1、新建形状层，add添加Polustar，将Points改为3，添加fill，颜色改为“F0F0F0”；

2、给形状层key动画，注意调整曲线；

3、右键单机Polystar Path ， 选择Convert To Bezier Path，将形状层转换为贝赛尔路径，然后将三角形随意变成一个不规则图形，模拟一块碎片；

4、command／ctrl ＋ D，复制碎片，更改其动画路径，更改其不规则的形状，制作其他碎片。注意大小碎片的位置，飞溅出去的方向；

5、给rotation添加随机旋转：

value + noise(time)*80

6、装饰线条，这种线条有很多种方法制作，我这里就是画了一个椭圆，调整Position和Rotation，添加Trim Paths，key动画。

四、其他碎块

1、将方块所在的comp合成复制一层，改变锚点位置，给Rotation打关键帧，同样添加overshot弹性表达式，调整freq和decay的值：

freq = 5;
decay = 3;

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

2、同样方式添加碎块掉落,rotation给了两种表达式，大一点的碎块在凋落过程有轻微的旋转：

time*100

这里旋转给的很少，可以根据情况调整；

小一点的碎块，很难看清旋转的动画，可以不给，为了制作的方便，不需要每个重新绘制路径，只需要给点随机的旋转：

seedRandom(index,true)
value + random(360)

这个表达式让每次command ＋ D复制出来的层，都有一个随机旋转，使没层看上去的视觉效果不同，增加了丰富性。

3、装饰性线条，这里用的是钢笔绘制路径，添加Trim Paths制作动画。

五、变六角形

45度放置的正方形，上下切割并不能变成正六边形，这里要给此形状key一个路径动画，让其在最后一次切割的时候，变成正六边形。

为了让这个变形更隐蔽，可以选择key帧key在图形旋转到最大角度的时间点。