财新设计店首篇合作文章

联合设计师：北瓜

“石北瓜牙”这个名字大家可能比较陌生，没错，​​因为这个名字就是今天取的，哈哈，为啥叫北瓜呢？因为“冬南西”有瓜，北方没有，为了做出独一无二的瓜，就取名为北瓜啦！

最近和北瓜交流的时候发现他不仅思维敏捷，执行力也很强，是ZCOOL推荐的一位设计师：

这篇文章北瓜就来跟大家聊聊动效的一些知识sketch教程动图，包括一些常用的表情，插件，知识点等，文章最后还有插件和表情的获取方式，希望能够对大家有些帮助。

概要如下：

1.设计师工作中常用的动画软件

2.使用AEUX插件将文件完美导入AE

3.动画永远逃不掉的四个基本元素

4. AE插件及常用表达式提高效率

5. 如何提高你的动效设计技能

1.设计师工作中常用的动画软件

1.1 设计趋势瞬息万变，随着5G时代的到来，UI动效设计在APP中的应用越来越广泛，市面上的动效软件也多种多样，为了完美满足需求，我们需要选择合适的UI动效设计工具。

UI设计师常用的三个动效设计制作工具：Ae、

简单介绍一下软件的特点和适用性

AE：支持Macos/Winds，功能强大，特效无敌，配合PS、AI等自带软件使用更是得心应手，很多高手都用它来制作UI动画、礼物特效、概念作品等。

：支持MacOS，使用非常方便，主要是两个页面之间的特殊过渡效果、元素切换、细节动效的工具，重点是可以实现人机交互，快速制作demo

：支持Macos/Winds，更加轻量，可以调用系统的陀螺仪，麦克风，指南针，智能传感器等，关键是使用时不需要写代码，直接对接开发

1.一般是需要交互效果，演示或者比较理想的团队使用。相比我们工作中的大部分项目：TAB效果，弹窗展示，体验互动，礼物特效等，AE相对没啥用处。它可以更好的制作这些动画效果来完成项目。

AE的功能和布局相对复杂，操作和记忆比较困难sketch教程动图，但可以快速上手，用来制作动画，这也是设计师的核心竞争力之一。本文着重讲解AE在工作中的文件导入，以及插件的使用，提高动画设计效率。

2.使用AEUX插件将文件完美导入AE

2.1 PS、AI文件导入AE的教程就不多说了，先说一下AEUX插件的背景：AEUX是团队推出的一套针对AE使用的高效插件，可以一键将图层、整个画板导入AE，解决了AE中图形分组、分层的问题，减少了导出图片或者转存处理带来的不必要的重复动作。

（下期会讲）动画完成后使用输出的优点：

1.支持iOS平台

2.导出文件体积小，方便开发使用

3.效果好，可支持渐变等效果

2.2 导入 AEUX 教程

1、插件安装完成后打开，选择插件 > AEUX，打开插件面板。选中需要导入AE的画板，点击紫色区域“到Ae”，如果界面中包含位图，会弹出窗口，在桌面选择或者新建文件夹保存位图即可。

2、我们切换到AE，在窗口>扩展中找到AEUX并打开。你会发现AE中插件面板里的画板已经出现了，并且显示了图层数量。导入的时候有两种情况：

（1）如果此时还没有创建合成，选择添加到合成“NEW”，即可自动生成与画板大小相同的合成，并导入图层。

（2）如果已经创建了合成，选择“添加到合成”会将图层直接导入到当前合成中。

3.动画永远逃不掉的四个基本元素

3.1 旋转、位移、缩放、透明度五个基本元素基本贯穿了整个动画效果，我们来简单了解一下它们的动画属性。

旋转

位移

飞涨

透明度

融合

3.2 高手们，前四个动画你不用动脑子就能想出基本属性，但如果你把第五个动画拿给你的朋友看，让他告诉你用到了哪些基本属性，相信他会思考片刻再回答出来的。

俗话说：千里之行，始于足下；小溪不积跬步，无以至千里。

无论动画有多漂亮、多棒、多负责任，它们都是由许多小元素组成的。

只要掌握这些基础的小东西和动画运动的原理，我们就可以制作出非常高品质的动画了~

4. AE插件及常用表达式提高效率

4.1 做动画前每次都要手动调整图层的轴心，十多个图层就浪费很多时间，v2插件可以完美解决这个问题。

v2：除了轴心一键居中功能外，还包含很多小功能，比如最常见的缓动、惯性反弹、BURST爆炸效果、CLONE复制关键帧、NAME实现批量修改图层名称等功能。

另外推荐几款高效好用的插件：Flow v1.3（慢动作神器）、（一键引导GIf）、（特效粒子）、（故障信号）

ETC。

4.2 表达式在动画中很常见，一行小代码比动画中几十个关键帧更有用，下面是一个最常用的弹性表达式：

频率=3；

衰减=5；

n＝0；

如果（> 0）{

n = (时间).索引；

如果 (key(n).time > time) n--;

如果（n> 0）{

t = 时间 - 键（n）.时间；

amp =（键（n）.时间-.001）；

w = 频率*Math.PI*2;

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

}别的

价值

表达 - 反弹

表达循环

表达循环旋转

表达式随机循环

除了弹力表情，还有更多酷炫的操作表情：随机循环、反弹、数字增长、三维坐标转换为二维坐标等等，都可以在文章末尾获取！

5. 如何提高你的动效设计技能

掌握AE的基本属性和一些特效之后，提高AE动画主要抓好这三点：多看、多想、多练

在文章的最后，附上了北瓜的一幅非常受欢迎的TAB动画作品。

观看更多：访问 、 和 等平台观看高质量的动画、运动效果和交互式视频。

多思考：基于优秀的动画案例，你应该深入思考：它们一开始是怎么运动的？中间是怎么运动的？最后是怎么运动的？用到了哪些基本属性（位移、遮罩、路径、贝塞尔曲线）？

多练习：多看多想之后，就要多去实践，只有多练习，才能更熟练地掌握和控制动作效果。

下一期北瓜君将和大家聊聊：如何助力动画效果落地

文章内所有插件和表情，点击即可阅读，后台回复：表情

立即获取！

最后，如果你想认识北瓜这位优秀的设计师，并且跟他交流学习，可以添加他的个人微信（如果添加好友提示过于频繁，可以过一段时间再加他）：

扫描二维码添加微信

亮点：

如有侵权请联系删除！