5步打造语音麦克风变形动画

Hicy

2018-08-22

原创文章

18986

70

583

经验分类:教程/原创文章

前言

上次分享了一个AI形象动效的教程,得到了很多赞和好评,在此先谢谢大家的支持和鼓励!另外,我也发现写教程最难的地方在于如何把握技术点讲解的深度,毕竟可以写得深入浅出,也可以直击要害、点到为止。要做到能面向高阶玩家也能照顾入门新手还真是挺难的,一方面是个人能力问题,一方面是时间精力问题。

故开篇之前,我先做以下声明:

1、本教程适合有AE基础的同学参考。评论区如果有诸如ai文件怎么保存,怎么导入到AE这类问题,恕不作答

2、本教程以五个提问的方式概括全文要点,关键帧、参数细节敬请参考源文件

3、如有错谬或者更优解,欢迎讨论、欢迎分享


Image title

先来看看效果。语音麦克风通常有3个主要状态:未唤醒/待唤醒、倾听、加载,结合这3个状态变化以及麦克风“蛋形主体+半圆支架”的造型将教程拆为以下5个提问:


Q1:如何获得半圆?

Q2:如何把半圆掰成钢铁直男?

Q3:如何让直线妖娆地浪起来?

Q4:如何让半圆翻滚起来?

Q5:如何给线条加个蛋?



正文


Q1:

如何获得半圆?


1.在 AI 中画一个半圆,线条粗细为 16pt,保存为 half circle.ai 

(还有一种方法画半圆是在AE里创建形状图层,画圈,选择该路径转换成贝塞尔路径,然后添加“修剪路径”,调节起点或终点到50%,得到一个半圆。因为我懒,这个操作我就不贴图了)

Image title


2.在 AE 中新建一个 400x400 的合成,帧率为 48 帧/秒

(帧率高一点给动画加细节更方便,也更容易看到效果。序列帧输出给开发实现的话50帧/秒其实更优,低的话25帧/秒,每张图片持续时间可以是整数,方便计算。48只是我的幸(lao)运(xi)数(guan),所以建议以后还是用50帧/秒吧,这里还多谢肉桑君提醒)

Image title


3. 将 half circle.ai 导入到 AE 项目并拖入 mic 合成中

4. 右键单击 half circle.ai ,选择“创建——从矢量图层创建形状”,这一步是将ai格式的图层转换成AE的形状图层

Image title


Q2:

如何把半圆掰成钢铁直男?

1. 展开转换后的形状图层,从上往下依次是“内容——组 1——路径 1——路径”Image title


2. 选中路径,将时间指示器拖到24帧的位置

3. 并在此时点击“路径”左侧的小时钟,打下关键帧

Image title


4. 将时间指示器往后拖至30帧位置,在选中“路径”的状态,按“Command+T” ( Windows系统Command 用Ctrl键替换),没错,就是ps里面控制变形的快捷键。所以你可以看到熟悉的变形操控框


Image title


5. 把鼠标放在操控变形框底部中间的操控点上,同时按住“Command+Shift” 往上拉(这里的操作细节有点诡异,我说详细一点: 先鼠标左键按住操控点,往上拉,这时你会发现半圆是上端固定,下端往上压缩。此时,同时按住“Command+Shift”,你就发现这个半圆是上下同时往中间收拢了),可以看见半圆在你的武力之下直起来了,同时时间轴上已自动打上了一个关键帧

Image title


6. 可以预览一下这个半圆被你掰直的过程,你会发现直线两端并不平整,没事,给描边选个“圆头端点”就好了

Image title


Q3:

如何让直线妖娆地浪起来?

1.  要浪,首先想到的当然是“效果——扭曲——波形变形”的特效

Image title


2. 在30帧的位置,设置波形高度为0,波形宽度为75(这里的具体值还要以你画的半圆大小为依据),打上关键帧…


Image title


3. 后面浪啊浪的几个关键帧具体参看源文件,我这说不清,说了你也不会看

4. 浪够了就得弯回来,接下来还要他做翻滚运动


Q4:

如何让半圆翻滚起来?

1.  复制让半圆变直的关键帧(选中其中一个关键帧,Command+C),粘贴到后面你要停下来的时间点(Command+V),“从弯到直”的两个关键帧的位置互换一下就是“从直到弯”

Image title


2. 接下来就是翻滚

3. 滚他两圈

Image title


4. 怎么滚就不用我说了吧(还是说吧,就是选中图层按一下“R”出来的那个属性) 

5. 靠近旋转终点之前可以再打一个关键帧,调节运动曲线,让旋转有个回弹效果 

Image title


Q5:

如何给线条加个蛋?

1.  上面滚得很漂亮,所以晚饭给他加个蛋


2. 新建一个形状层,画一个矩形,展开图层,“内容——矩形 1——矩形路径 1——圆度”,调整“圆度值”,得到麦克风的主体 

Image title


3. 把蛋放置在合适的位置上,跟半圆的支架组成一个麦克风图标

4. 接下来就是设计他消失的动画,我这里的方案是弹走,半圆绷直成直线的一瞬间把蛋弹飞了 (效果还不够完美,你们可以尝试一下其他方案,比如蛋炸了之类的)


5. 蛋蛋飞出飞入加了一些小细节,主要是位移动画,另外是旋转动画,缩放动画

6. 这里要注意调节运动曲线,实现更自然的加速度和弹性效果


Image title


最后

源文件已附上,欢迎大家下载!如果有帮到你,请记得点赞哦~



下集预告:


5分钟打造3d螺旋曲线动效

揭秘 YunOS 车载语音助手动效实现原理


先看效果:


Image titleImage title

Image title


有兴趣的可以关注一波啦,敬请期待哦~





全部评论:70

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消