长期以往的项目实践中，能感受得到大家在日常工作中是会接触到或者是会去制作动效的，今天主要的分享核心也是跟大家去通过我一些工作上，或者是一些过往动效交付的经历，给到大家一些参考，或者是如何让这个流程更加的便捷快速一些。

整个的分享其实内容还是比较偏硬核一点的，所以可能有的同学在后期阅读上会觉得有点吃力，不过没关系，这整个的分享其实分了 4 趴，可能前面的部分大部分同学还是可以去慢慢接受的，后面部分的话是有一点难度，最后边这几趴，有一些依托于乐理知识，或者是对于一些物理空间上的一些了解，才能更好地输出。

常见的动效制作软件

其实大家制作的习惯是应该都不太是一样的，比如说像我个人的话比较偏向于 AE 和principle，因为 AE 的话它可以更好地输出一些样式上的效果。像 principle 的话，做一些界面的交付其实是非常快捷的。当然也有同学喜欢使用 Figma 去制作，因为 Figma 直接画草图出来，然后去做动效交互会更快一点，当然了这个是因人而异的。

我们今天主要的核心去讲解的是一种交付的理念，当然不是去局限大家的一种交付的思路，只是说我们怎么样去了解这个动效，去制作动效以及交付动效这样的一个过程。软件终究还是辅助，而不要过于依赖软件本身，局限了输出思路和实现方式。

动效设计常规流程

在整个的讲解之前，其实还是想跟大家去聊一下整个动效的制作流程，分了核心的三大趴：

1. 首先设计阶段的话，其实我们是需要了解业务的需求，这个业务它是不是需要动效的输入以及动效的呈现是怎么样的？这个时候我们找到核心的诉求，才会更好地去找到一些参考竞品，以及我们怎么样去制作落地。

2. 中间这一大趴的话就是。交付的过程，也就是我们今天核心要讲的内容，里边会包含一部分怎么样去制作，参数以及文件怎么样去交付给研发。然后接下来就是怎么样去更好地让研发还原我们的动效设计。

3. 最后的阶段基于前面两大部分去验收了，这个当然也是根据大家的喜好或者是协作上的不同，有一些小小的区别。

动效交付类型

核心的分享主要是分为四大类：

第一大类——素材交付类，像我们常见的 Lottie Webp 或者是 APNG 序列帧这一类的，只需要我们交付给研发同学一些文件就可以比较好地实现了。

第二大类——基础参数类，我们不仅仅要把 demo 制作出来，同时还要把一些可肉眼可见的参数交付给研发同学，比如说透明度的变化、位移的变化、界面的变化。我相信大部分人其实他都是可以去进行制作，但难点在于怎么样去把这个透明度的参数给到研发，应该是这样一个问题，所以下面应该是有相对应的解决方法。

第三大类——它跟第二大类比较大的区别是，第二大类它是一个相对来说比较线性平面，比较简洁的一种动画。第三大类它是一种非直线性的，比如说是一些曲线或者是空间，或者三维的一些空间上的参数的动效，这类的是需要我们对于不仅仅局限于平面的一个呈现了，而是要打破平面去了解三维的一个空间的呈现。

第四大类——相对于前三大类它是更难一点的，这类内容是我们相对来说肉眼不可见的，那我们怎么样把肉眼不可见的东西转换为肉眼可见，并让研发同学实现出来？其实这需要我们把一些数据上的东西转换为物理上的东西来去呈现出来。

整个分享是一个循序渐进、由浅及深的。

前两大部分其实大家可以很好地去理解，可以快速地吸收它。后两部分的话其实大家不要抱于过多的这个压力，就是当成一个知识去了解它就可以了。

素材交付类

还是先跟大家去讲解一下第一大类——素材交付类。

其实横向地拉齐一下去对比的时候，可以明显地感知到这三大类它们的优缺点，以及它们的使用场景应该是怎么样的。

第一种——Lottie

它是一个矢量图形去使用比较多的一个类型。优点也比较明显，因为我们交付给研发同学用 Lottie 的时候，它就是一段代码，它不是一个图形，那研发同学就会很好地把它加入到它的代码里面去使用它，而且它体积相对来说也比较小，但是它的缺点也非常明显，本身需要的是一个矢量的图形路径，而不是一个非常复杂且非常花哨的一个图形。同时如果说我们在交付这个 Lottie 的时候需要一些前后的关联性，也需要给它一些关键的时间节点，给到研发同学去调用。

第二种——Webp 或 APNG

严格意义上来说它也是算一种序列帧的形式，但是它的底层逻辑其实还是不太一样。首先它是它的适用场景，相对于 Lottie 来说，是包含了一些颜色非常丰富或者是图形比较复杂的一个样式。那它的呈现形式也是以图片为主了，首先它的体积来说，相对于序列帧要小了很多，但是比 Lottie 来说还是要稍微大了一点。依赖于系统，比如说 Webp 的话它是适用于安卓的， APNG 的话它是适用于 iOS 的，是有一个平台的差别的，有个小小的了解。

第三种——序列帧

顾名思义它是一个图片的序列。适用大量的图片序列去呈现的一个效果。当然这一类的文件其实相对来说它的体积是最大的，但是它的应用场景也是非常多的，比如说像我们经常使用的一些影集特效，就可以使用这样的一个效果去交付给研发。接下来就会结合几个真实的案例去让大家再次深度地了解一下。

素材交付类案例

这是 3 个比较常规且比较简洁的案例，第一个是常见的点赞动效，它本身的图形大家也可以看得到，就是非常的简洁，而且是一个矢量的图形，我们交付给研发的时候，是一个 Lottie 的文件。像前面提到的，我们要行使这样一个文件的判断逻辑，它的点赞前和点赞后是有一个时间节点的，我们需要交付给研发，比如说这个时间是 100 毫秒，那 0- 50 是点赞前，50- 100 是点赞后，需要这样一个时间节点给到研发同学。第二个是一个头像挂件，这一类的话其实相当于第一种，大家可以感受到它的样式是稍微的复杂一些，会有点噪波的效果，同时颜色上、图形上都比第一种要复杂一些，所以我们使用的是 Webp 或者是 APNG 进行的交付。

第三个是一个影集特效效果，这个制作效果是比较早的了，但是逻辑其实是通用的。比如说拍摄这个抖音的时候，可以看到有一些影集模板，它会有一些特效在里边，其实就是会有一些图片序列帧加一些特效。再跟大家分享一下影集特效的一个简短的制作是怎么样的。

Lottie 制作小知识

在这个之前跟大家去讲解一下，在做 Lottie 的时候有一些小小的知识点，比如在做一个小小的 icon 也好，或者是其它的动效也好，还是基于生活中的见到这样类似的东西，它是怎么样去运动的。

有一个小小的案例，派对模式的一个入口，它的模型是一个派对灯球，当时在做的时候，只是想让它动起来就可以了。就没有想到它是一个球形的，或者是有一个空间感的，所以只是一个旋转加一个灯光闪烁的效果。逻辑上来说他只是在动，但是它没有一个真实的效果感，所以后来有一些专业人士就经常出这种场合的，给了我一些建议。它应该是一个球体，所以它应该是一个旋转的，所以我们就做了右侧这样的一个真实灵动的效果。

这时加到界面里面它就会非常的真实，所以我们在做动效的时候，一个小点，还是要基于日常生活中所见的移植到界面中，它才会更加的真实。

影集制作流程

其实影集的制作本身是很复杂的，但是整体的制作流程主要还是核心分为 4 个步骤：

第一步——首先我们要拿到一首歌的节拍节点。要知道一首歌的节拍节点基本上都是 1234、 2234 这样打四个节拍，一个循环的样式，我们找到这每一个节拍的节点的时间，就可以知道这个鼓点在哪里。

第二步——需要把这个节点转化为整数，因为首先这个节点它本身是个小数，都是 0 点几、 1 点几，后边小数位很多。但是我们要去制作的时候，肯定要把它转换为一个 AE 中的序列帧，那 AE 中的序列帧一般是我的习惯是使用25，当然也有 30 或者是更多的。我们把这个参数乘以 25，就得到一个整数帧。

第三步——得到一个整数帧之后在 AE 里面去进行一个节点的制作。前面也讲到了整个的节点，其实它是以四个节拍为一个小节点，然后特别是像有一些歌的副歌部分，它是每一个大的节点会进行一个循环，我们只需要找到循环的大的节点就可以进行一个制作了。

第四步——把这个循环的制作进行一个输出给到研发同学就可以了。

当然这里边有很多的小的细节，就不在这里进行一一展开了，大家只需要知道就是需要这样的 4 个制作步骤就可以了。下面是一些当时制作的一些影集案例，可以跟大家去感受一下。

这些案例当时都有做出来了，只不过项目本身没有最终上线，不过严格来说我们的团队是拥有这个能力的。图片序列帧加上一个蒙层的效果，同时把这个声音转换为一个频谱，然后再加一些颜色的底链的效果去进行呈现。比如说用到我们的歌曲分享里，还蛮有趣的。像之前我们分享歌曲的时候，还是期望加入一些我们自身回忆的片段，或者是个人的形象在里边，就可以勾起大家的回忆，再加上歌词，是不是有那种感觉了？

基础参数类

接下来第二大类基础参数类

我们经常用到的几个参数，透明度、位移、缩放和形变，当然这几类的话我们在真实的界面场景里边都有所用到，接下来也会结合真实场景去跟大家进行讲解。

让参数动效变丝滑的小技巧

在制作这一类的动效的时候，有一些小小的技巧，或者是说有一些小小的概念。

比如说叠变的透明度转场的时候，怎么样让这个转场不会看上去暗了一下，像第一种左边的第一个制作效果，可以明显地感知到它是一个在转场过程中有一个黑帧的效果。核心原因是什么呢？因为它的转场的时候有一个极限的参数的交叉，我们把参数拉到了 100 到 0 和 0 到 100 的这样一个变换，那 0 的时候它就是一个黑场的效果。所以针对于这种场景有个解决方法，就是不需要把它的参数拉到一个极限，只需要拉到一个10%，或者是你肉眼感知到它是舒适的空间就可以了。

其实经常去做位移的时候，可以感知到的是没有一个合理的运动曲线参数，效果就是非常平白直叙的，没有一个非常好的效果呈现。但是我们结合生活中所要见到的一些真实的物理运动，就平面运动的时候，其实它是有减速的过程的，我们只需要把这个曲线转换为减速曲线，就可以感受到这个物理的运动就非常的有趣而且生动了。这个就是一个我们在真实制作这个参数的时候，一些有趣的点。那下面结合几个案例去跟大家再深入地讲解一下。

基础参数类案例

第一个案例：听歌识曲效果，在背景上去制作了颜色的叠加效果，让用户在等待的过程中可以感受得到这个场景，它不是死板的，而且同时在我们在前面的圆圈上做一个收音的效果，也就是形状缩放的一个效果。

第二个案例：评论外显的效果，这个效果本身来说是非常简洁。但是回过头来说，我们为什么要做这样一个效果，其实还要归结于我们的核心目标，我们的业务目标是怎么样的：是需要让用户感知到这个品类外显的存在，而不是说让他感知到动效的存在。用户的感受是在于这个内容本身，而不是在于动效本身，动效只是辅助呈现这个内容，所以动效不需要过多的复杂，过多的花哨，而是说他要把这个内容尽量地放大呈现给用户。

第三个案例：直播倒计时进入直播间的一个效果，其实它就是一个透明度的叠加，用户在自然而然且不太感知到的情况下就已经进入直播间了，这是我们的核心诉求。

这一类动效，我们怎么样去交付给研发同学？这个时候就需要我们把动效书写成动效文档交付给研发同学了。当然了，由于大家的写作习惯不同，有同学习惯说我可以用一些简短的话术口述，或者是用一些描述性的文案给到研发同学去让他还原。我个人来说，其实是希望把这种参数写得更详细一些，给到研发同学，让研发同学比较好地去接受我们想要传达的一个内容。所以我们尽量地把这个动效文档写得详细一点，同时减少了沟通和描述成本。同时当我们在跟踪还原的时候，也可以更好地给到研发同学描述在哪里需要更好的一些更改。这个时候就是我们做这样一件事情的目的。这个核心目的舒服了他人的同时，也要方便了自己。

动效文档

我们在写这个动效文档的时候，需要了解的是我们要准备哪些内容？

首先还是要知道我们要描述的动态的模块是要有哪些：

第一列：名称，我们需要把这个名称写详细一点。

第二列：它的在界面上的样式应该是怎么样的。

第三列：它本身的动作，比如是透明度/位移/缩放等等，一系列动作应该是怎么样的。

第四列：它发生的一个变量是怎么样的？比如说基于透明度的话，透明度的变化是百分百到零还是百分百到多少？以此类推的这样一个参数的关系。

第五列：它本身发生了一个时长，还是基于我们前面来讲的，我们以 25 帧为例的话，它需要转换为毫秒级的参数。因为研发同学他只知道毫秒，他不知道帧的概念，所以我们需要把帧再转换为毫秒。

第六列：把我们刚才所运用到的一些曲线加入到这里边，因为。不同的曲线它呈现了出来的效果会有非常大的区别，所以好的曲线会让这个动效非常的加分。

第七列：我们也可以在这里描述一些比较复杂的场景，比如说它是有一些曲线，或者是它在界面上是有一些非常复杂的交互，都可以在这里进行再次赘述。

下面也结合一个真实的案例，去跟大家讲解一下这个表格的一些小小的细节。

这个是在做 Resso（TikTok Music）音乐心情表达的动效文档。第一列，也就是我们要做的模块内容，第二列就是它本身的一个样式。我的习惯是去跟研发同学描述某一块的时候，我会把这一块的样式内容干干净净地给摘出来，然后其他部分全部给它去掉。这样的话他才知道我要传达是哪一个区域，而不是我要给他指定一个点，这样的话他要再找，这样就发生了一个 battle 的过程。

这里有一个小小技巧，我们在写发生时长的时候，其实可以写一些参考的东西。比如说我写一个物体的发生事件的发生时长，我不可能从 0 开始计算，我要写的是参考物的发生的时长。比如说我站在地球上未动，那地球也没动，就是这样一个逻辑。我们需要找到是一个参考物，然后以一个参考物来推演出下边一系列发生的时长，这样的话研发同学才知道你所写的这个时长怎么样加入到所发生的事件里面去。最后一列的备注说明，就是前面所讲到的，有一些非常复杂的描述的时候，你不能很好地以参数的形式去讲解的时候，还是需要把这个东西换化成一些设计图或者是一些节点的内容，给到研发同学，深入地了解。

我相信大家都可以基于这样的一个讲解之后，能够说有一些输出，或者是能够说做一些东西。

空间参数类

曲线的位移——它应该是怎么样跟研发同学讲清楚，以及我们怎么样去制作的。

空间错层——平面上一个东西怎么样去用一个空间错层的感觉呈现出来。

重力感觉——它需要去调用软件或者是硬件本身的一些物理的参数的东西，怎么样去呈现出来的。

在这之前其实还是要有一些概念让大家了解。曲线去呈现，就是需要进行一个空间上的平面的转化，将无形的一个路径转化为有形的路径，去进行一个参考。

空间就是三维的转化。方便自己制作，或者方便更多同学去了解空间上的相对来说它的是怎么样一个关系。

讲一个动效不是很清楚的时候，我们可以找一些参考或者是市面上比较成功的案例给到自己去做，或者是给到研发同学去进行还原，这样的话就少了很多沟通上打磨的过程。那还是结合一个 Resso 音乐心情表达的一个动向文档来去讲解这个曲线参数的实践。

空间参数类案例-1

还是结合一个 Resso（TikTok Music）音乐心情表达的一个动向文档来去讲解这个曲线参数的实践。

我们期望的是用户在长按 emoji 的时候，会出来一系列，用户去选择对应的你的心情，然后松手，这个 emoji 就会有一个掉落的过程。这个曲线的物理逻辑从空间上来说，举个例子：比如说我们抛沙球，抛一个石子，我们用的力越大，我们抛得越远越远。相当于反过来说，我们站得越远，同时我们想要抛回同一个落点的时候，我们用到的力气就越大，但同时我们要抛的弧度就越小，也就是我们右侧的依次来说它的幅度就会越来越大。

换算出来我们的界面上来说，就是右侧这样一系列的过程。我们怎么样交付给研发这样一系列的参数？首先我们需要找到起点和落点这两个角点，同时在 AE 上去制作的时候，它本身是有两个手柄的，我们需要把这两个手柄的坐标位移，坐标点也需要标注出来，标注这四个坐标点的时候就会得出这样一个函数的曲线，这就抛物线对函数的曲线，二次方函数 x 轴， y 轴。

这个是需要二次加工的，需要在 AE 里边先做出来，然后把它再转移到界面上 375 的界面做出来。比如说这里的288，它就是一个真实的 375 上的位移。研发再去以 375 的屏幕去制作 288 的空间。当界面小于 375 或者大于 375 的时候，研发才知道它的比例关系是怎么样，而不是瞎写的一个参数。

空间参数类案例-2

下面这个案例是我们去年做的《抖音年度报告》的项目，里边抽出来几个小点来去讲一下。

当时我们想要呈现的这个词条是像左边这样，肉眼可见的它非常大的一个空间上错层的感觉，或者是它受重力感应是非常强的。但由于这个项目本身的时间节点是非常紧的，而且考虑到这个研发同学的精力和他的能力界点，以及兼容多机型，所以把这个项目本身的动效做了很多的降级处理。

回到动效本身，我们想要制作这个动效其实是很容易的，但是我们想要让这个动效比较完整地落地，其实中间还是有很多很大的落差，所以我们要学会去做一些减法，怎么样让理想和现实能够更好地结合起来，这样我们才会去把这个动效更好地去实现，以及我们要知道这个动效核心的卖点在哪里。最后动效呈现出来，保留了它本身的错层效果。同时让它从那个 360 度的一个滑动变成了一个左右横向的滑动。

但项目本身来说，其实也给了我们很多的启发，在制作的过程中也是尝试了一下去怎么样还原，当然有 apple watch 的同学可以去感受一下自己， 去点开屏幕上的滑动点时，可以感受到它在屏幕上 360 度都可以去进行一个缩放，这个就是我们当时想要去还原 apple watch 的一个效果去做的一个动效参数。以中间为一个 360 度的旋转的核心，去做一个外周围的扩散。它就可以去还原这样一个缩放的过程了。

需要一个内圆和外圆，为什么要需要一个内圆和外圆呢？这就是物理空间上的，内圆是一个发生的核心，外圆就是它的一个边界，临界点发生外到外圆之后，我们就不需要让这个事件发生，就是它的边界点。

我们想呈现这个 3 层错层的感觉是怎么样呈现的？首先要设计样式分三层，比如说像左上角，我们把这个设计样式最大的做最上层，中间的稍微的小了一点的视为第二层。第三层的就再弱一点，从视觉上来说，越亮的越大的，越明显的就在最上层，越弱的越不想让用户感知到的。就在最底层，这就是视觉上的感受，回归到动效上来说，把每一层作为一个组。用手去触碰偏移量的一个参数的差别。比如说我们在第一层的时候，它可以是 15 PX，那第二层就相当于第一层来说会更大一点，那它转化出来的样式就会偏移的量会更大一些，这就是实现它三层错层的一个效果。

视觉空间上其实是。叠在一起的，但我同时触碰的时候就是他们其实同时动的，只是通过偏移量来区分他们的视觉效果。

从设计和动效的角度是需要把这些内容去进行分层的，因为只有做了分层我们才能知道每一层应该是怎么样动，以及它的位移量应该是怎么样的。只有产生了相对的位移，它的偏差才会出来。

空间参数类

接下来就来到了第四大类，韵律参数类，当然这一类应该是相对来说最复杂了，当然这一类的话可能大多数的同学应该是没有接触过的，不过有一些乐理知识或者是喜欢做动效的同学应该是会感兴趣或者是有做过的。相对于这一类来说，我们不仅仅是局限于视觉本身，还要去让用户感知到是一个触觉上的变化和听觉上的变化。

派对模式功能

首先我们还是来感受一下一个真实的案例吧。 Resso（TikTok Music）派对模式的一个功能效果。

这个功能就是要把这个声音去转化成闪光、震动和闪屏这几样东西，我们不仅仅是要让用户听到声音，同时还要让他去从触觉上感受到它，视觉上看得到它。

在制作这个内容之前，需要把这些参数去进行数字上的转化，其实大家看上去有点难，但是没关系，只需要知道我们想要得到什么就可以了。音乐的节拍其实主要分为两大类，一个是大的节拍和另外一类就是小的节拍，只有大小才能形成对比，形成对比了之后用户的感受上才会有区别。我们不需要把区别做得太多，只需要有两个，只要动效动起来，用户能感受得到，这个感官就出来了。

当然我们知道要什么的时候，可以进行一个反推，假设这个节拍的长度的小值为 α ，一个节拍和另外一个节拍中间，它是有停顿的时间，这个间隙就为 β ， α 加 β 就得到一个 a 的值。大节拍，我们假设为 α2，加上间隙就得到 b， a 加 b 数值除以 2 就得到我们想要的一个大节拍。怎么样得到一个小节拍的值？需要乘以一个系列数，这个系列数是需要首先我们有个概念，先假设为 0.5，但是等研发同学实现之后觉得 0.5 是还是不够的，我们可以往下降，这就需要不断地往下调参数。得到一个数据，最后我们判定的是 0.2，就得到这两个数字。

0.2 是我们测试下来相对来说比较稳定，我们自己需要去在测试机上去感受它。还是要得到这个大节拍的数字，然后虚拟一个小节拍的数字。这个虚拟小节拍的数字是基于大节拍乘以一个倍率，然后得到这个小节拍。

拿到这个节拍之后，还是需要了解音乐本身乐谱的衰减线，在一些软件制作的时候，将音谱放在软件里，就可以感受到这个频幅，它是有一个高峰和降落的过程。就像 k 线是一样的，买基金的时候都可以感受到它一般升到最高处都会往下降。那音乐也是一样的，达到最高处的时候它也是慢慢地往下降的，这就是一个声频的衰减，因为只有衰减下个鼓点才会发生。

拿到声音的节拍节点之后。就可以把刚才的大节拍、小节拍划到里边去，这里需要我们了解的是，要把节点做一个物理上的控点，需要让用户感知到的是它是有一个固定的不变的过程和衰减的过程，左下角放大的这个部分。比如说震动本身，它是有一个固定的时长和一个衰减的过程，不可能戛然而止的，对吧？戛然而止就会觉得这个震动本身是非常僵硬的，它是需要一个固定的震动时长加一个衰减的。时长这个时候就需要结合节拍本身来去控制这个小控件。

当然这个小控件的话也可以控制闪屏本身，它的一个闪屏逻辑就是这样的，找到这个乐谱本身的一个发声的起拍节点，把它命令为闪屏的一个亮点，这样就会发生一个闪-黑-闪-黑这样效果。

节拍本身的感知在触感上其实是依托于马达本身的，马达本身它的强度是有强弱之分的，当然也有锐度之分。

锐度是什么呢？马达会有直接的震动和衰减的震动，拿我们使用的 iPhone 手机来说，它会很好地让用户感知到不同的震动强度。但是大部分的安卓机型它的震动不是那么的好，就是它本身的震动是非常僵硬的。我们让用户感在这个触感上感知到非常好的震动，就需要调锐度的参数。

把它换化到空间上来说，我们需要一个横向和纵向的一个数据关系，纵向是强度和锐度，横向是发生的时长。

这样就可以把大节拍和小节拍去进行一个定义，大节拍的话，它的锐度的时长和强度是怎么样？小节拍的时锐度的时长和小节和他的震动的幅度是怎么样的？就可以最后给到研发同学了。

到目前来说，可能慢慢地都已经非常深入了，也非常的有挑战和有难度了，所以大家对于接下来的内容不要有太多负担，这一趴的内容比上面的内容稍微更难了一点点喔。

音频可视化

先让大家去感受一下线上的真实案例。

进行音频可视化，还是需要从设计角度去拆解要实现的效果图层。要把音乐本身去加在哪一层？刚才大家也有看到上面的视频了，加在了就是第4张的环形光上的效果，但是在前面和后边都加了很多的静态帧。

比如说：在最上层的话，加入了银河坠落的效果，这个是用序列帧去进行还原的，中间加了频谱的效果，同时也让它做了一些点阵的效果，让它的一个环形光做了循环的转动，这样它的环形光不是一成不变的。在最下层做了一个地平线效果，有了一个参考才会觉得它是一个倾斜角度的感觉。

从正面上来看，好像是一个椭圆形，但是从侧面来说其实它还是一个圆形，只不过从侧面来看它是把这个圆形的角度进行了一个倾斜了 30°，这样从正面来看它就是一个椭圆形，这就是需要跟研发同学去进行讲解的一个点，我们不是去做一个椭圆形，而是一个圆形，只不过说我们加了一个倾斜进行还原，同时需要让这个环形光的颜色进行旋转，也需要把上面的参数给到研发同学。这个就是在做这一系列的动画以及交付给研发同学需要准备的工作。

总结

最后来个大总结，大家看了特别多了，在制作动效，前期还是需要去合理地使用一些软件和收集参考，合理地去交付给研发同学。我们看过前面的之后应该是有一些了解的，同时我们也需要通过不同的视角去激发不同的灵感。不是一成不变地去用某一种方式让研发同学去实现，或者是自己去实现，而是说多角度地去思考才能得到更多的灵感。就是我今天的分享，读到这里实属不易，谢谢您的耐心阅览。

文末分享好用工具

webp / apng 制作：https://isparta.github.io/

Lottie预览：https://app.lottiefiles.com/preview

动效贝塞尔曲线：

https://cubic-bezier.com/#.27,.1,.46,1.21

https://www.xuanfengge.com/easeing/easeing/#