看这里复习第一部分《最全的动效落地方法（上篇）：在界面设计中，好动效是什么样的？》接下来，进入下一部分。主题是：从Web前端的角度来看，有哪些便捷的方式可以实现这些动态效果？
目前行业内动态效果设计的整个体系还不成熟；从最终的渲染效果来看，动态效果可能会影响页面性能、加载速度等。所以说到动态效果，很多同学可能会有抵触情绪。
在遇到问题的时候，我们先把难点进行拆解，在我看来，我们在动态效果落地的过程中所面临的难点可以分为以下三种：
对接困难：对接困难其实就是沟通困难，这是本文的重点。由于界面动态效果是一种新的设计模式，开发和设计之间还没有成熟的对接标准。设计难点：界面的动态效果本质上是静态界面在时间和交互维度上的延伸。最常用的界面设计工具还不能设计时间轴，而AE等传统的动态设计工具缺乏交互性，很难高精度地设计界面的交互维度。实现难度：界面增加了时间维度，研发不仅需要布局，还需要每个元素在时间流中的表现。如果在个别情况下使用顺序帧或gif，需要严格控制资源大小，增加了各方面的开发成本。针对以上几点，我在日常工作中总结了一些比较有效的解决方法。尽管这些解决方案并不完美，但它们通常可以覆盖工程环境中的大多数情况。
开发者很难和设计师沟通。因为没有准确的参数来描述动态效果。要解决这个问题，我们需要创建一个有效的动态效果标注系统，必须做到以下两点：让设计师轻松描述动态效果，让开发准确还原动态效果。构造“注释”的方法分为以下两部分：
其实界面的动态效果背后只有三种设计参数。无论动态效果有多复杂，这三个参数都是组合拼接在一起的：
(1)改变
变更可以分为四类(如动态图所示)。这四类变化基本涵盖了界面元素的所有运动方式。只要准确描述动态效果前后元素的变化，就能准确完成参数“变化”的对接。
比如下面动画中抛出的小绿恐龙，就同时包含了以上四个变化。
其在AE中来回变化的参数如下：
那么我们此时需要记录的状态(这里只涉及变化)应该是这样的：
初始状态：
位移：X轴0旋转：0度大小：1透明度：0.2结束状态：
位移：X轴200px旋转：180度大小：1.5透明度：1这样就清楚多了。作为一个友好的设计师，不要只是拿着一个演示说：“就这样做，以达到类似的效果。”那样的话，估计大部分开发只会显得很蠢。
(2)持续时间
第二个关键参数是时长，顾名思义就是动画播放的时长。无论变化有多小、多简单或多复杂，我们都需要确定每次变化的时间。时间短而整齐，时间长而温柔。
标注的时候，别忘了标注清楚动态效果的开始时间和结束时间。
(3)曲线
曲线描述了物体运动时的速度变化。如果说变化和持续是动态效果的本体，那么曲线就是动态效果的灵魂。
对于一个运动的物体，同样的变化，同样的时间，不同的速度曲线，都会使其动态效果产生丰富的变化。所以在动态效果设计中，曲线也是设计师最关心的部分。
有四种基本速度曲线：线性(即始终匀速)、慢进、慢出、慢进和慢出：
虽然我们或多或少用了上面的曲线来描述动画的制作过程，但是我们并不一定真正了解曲线的具体用法。这里，我举四个例子来说明上述曲线的用法。
在上面的例子中，小圆圈同时移动。它们水平移动，一起到达终点，但速度曲线不一样。
圈一：缓出缓出，有一定速度，慢慢刹车。适合在元素进入页面时使用。第二圈：减速到淡入，本来没有速度，越来越快，相当于什么东西从零开始加速。适合在元素离开页面时使用。第三圈：慢进慢出Easy-in-out:开始和结束都没有速度，先加速再减速。这是我们日常生活中最常见的身体运动。适用于页面上从A点到B点的元素。圈四：做匀速直线运动，看起来很死板，不推荐。那么，动画曲线出现在设计工具的什么位置呢？
在AE中，动画的曲线可以通过数值图进行调整，可以通过转换(转换法)得到三次-贝塞尔曲线的参数，也可以通过Flow之类的插件直接用三次-贝塞尔曲线进行设计。
在新兴的设计工具(Framer)中，工具本身可以直接使用三次贝塞尔曲线来定义动画。
在前端开发中，设计给出的三次贝塞尔曲线参数可以直接用来描述动画。例子如下：
现在有很多工具可以方便设计师调整曲线，实时预览效果，并以前端要求的格式显示出来。这里推荐两个：
曲线部分到此结束。顺带一提，虽然我这里以位移的速度曲线为例，但其实在旋转、大小、透明度等的变化中也有速度曲线。~在这些变化中加入速度曲线，可以使动态效果更加自然，更加贴近现实。前端也可以实现。
通过上面动态效果参数的量化，我觉得一个合格的标签应该是这样的：
上图中的交互效果来自亚马逊Prime Music的动画，界面中出现了两个元素(加号图标和复选图标)。虽然看起来很简单，但是包含了极其丰富的变化。
除了动态效果这三个要素，在标注的时候还要说明触发条件和动画对象，所以最好用表格，这样就可以把它们的每一个变化都列的清清楚楚：
如图，注意曲线的英文名称，以便前端可以使用。
我也把这个标注的模板上传到云盘了~链接在这里：动态效果标注。
希望能帮到你：)
如果看到这里，你还有很多疑问。推荐阅读马丁RGB写的《马丁RGB/MT指南》,里面介绍了交互动画的风格定义，动态设计-标注-开发流程~
方法和工具最传统、应用最广泛的动态效果设计工具是After Effects，因为之前可能很多设计师都有使用的经验，但是它也有一些不符合当前需求的缺点：不能交互，输出难以量化和共享。目前有很多新兴的设计输出方案，下面我简单介绍一下。
自动导出类目前有洛蒂、关键帧等开源库。通过AE插件，将AE中设计的动态效果自动导出到前端可用的动态效果文件中。前端只需要进入项目中对应的开源库，可以避免对接和通信的苦恼。
虽然看起来非常简洁美观，但是这种方案的应用场景是有限的：只适用于纯动态元素(比如动态图标)，不适用于UI界面元素。对AE的效果支持也是有限的，不能对库为所欲为。
但总的来说，在纯动态元素的场景下，自动导出类方案可以大大提高工作效率和产品性能。与Gif或帧序列相比，导出的json文件容量小，最终显示质量高。
除了AE传统工具的解决方案，交互类还有更多直接另起炉灶的设计工具。目前应用比较广泛的有Principle、Flinto、Framer、Origami等。与传统工具相比，这些新工具都增加了交互功能，使我们可以设计和模拟产品的交互流程。与以前相比，我们可以在设计阶段就感受到产品的“手感”，从而使动态设计的精度达到一个新的水平。
在这些如雨后春笋般涌现的新工具中，我最喜欢的是Framer~~它有着其他工具所没有的独特属性。——是用代码构建的，基于Web。
图中显示了用Framer编写的代码示例。
很多设计师看到代码可能会紧张，但其实因为代码的构造，设计师可以非常有序清晰的设计出逻辑复杂的动态界面。同时动画部分的代码内容可以直接参考开发。另外，由于Web的特性，Framer可以实现Web支持的所有效果，自由度极高。而且设计输出可以通过一个网站快速分享，让整个产品线的人都能低成本体验到你的动态设计。
况且，在“全栈”这个概念越来越被重视的今天，通过一个相对低成本的方式，让设计师接触代码，了解前端知识，是一个非常高效的渠道。
框架人的动手资料推荐Melodie的知乎来回答：Melodie:framerjs.com是怎么入门的？是目前比较容易理解的入门框架者文章。
动画开发的实现和常用如下：
1.CSS动画学习资料推荐w3school上的文档CSS3动画。
值得注意的是，设计师虽然可能不懂技术，但一定要善于利用已有的案例来表达自己的设计意图。可通过CSS实现的动画案例，请参考跨浏览器CSS3动画库Animate.css。如果它的例子有你想要的动态效果，代表可以用CSS实现。此外，CSS还可以实现一些简单的矢量规则动态效果。
2.开源库应用设计端提到的Lottie、Keyframe等开源库，将AE导出的动画资源直接应用到项目中。
前文提到的San主页的悬停动画是洛蒂实现的：
最终实现结果
3.序列帧序列帧可以理解为一个跑马灯。具体实现方式是提供一个动画的帧序列拼图，通过CSS和JS控制其逐帧播放。与交互效果不同，操作页面的动画一般采用序列帧动画。比如之前的春节活动，我曾经做过一个序列帧动画。如下图所示：
其实是用烟火图拼接的精灵图：
为了确保最佳的用户体验，使用连续帧有许多要求。
加载时间：如果在最低网速下耗时超过2s，则必须添加加载。装载的装载时间不得超过5s；移动流量消耗：在移动非wifi网络下，动漫资源总规模仅限于2M。一般用户感知的流畅帧率是60fps，为了保证最终效果，一般采用20fps作为最低播放帧率。(1S播放30帧)
当然，为了减少交流中不必要的损失，在提供串行帧拼图时，需要注意以下交付格式。
提供每一帧的宽度和高度，每一帧的播放时间，总帧数，如动画Demo，gif，MP4等。格式不限于动画的触发时间。比如在页面加载结束时点击一个按钮，就增加了一个制作序列帧的工具gka。
在本总结中，我们主要讨论在动态效果的落地中我们将面临的困难，并提供相应的解决方案：
1.对接难度——量化对接过程中的动态效果，提供一个量化动态效果的标准，让设计师可以更准确的描述这种动态效果，开发可以100%还原这种动态效果。
标记时，分别标记元素的三个动态元素3354的变化、持续时间和曲线。如下图：
以下是批注模板的下载地址：动态批注模板下载链接pan.baidu.com
2.设计难点——设计工具自动导出类：洛蒂、关键帧等开源库。通过AE插件，将AE中设计的动态效果自动导出到前端可用的动态效果文件中。前端只需要进入项目中对应的开源库，可以避免对接和通信的苦恼。
3.开发困难——开源库。感谢阅读：)写的比较仓促。如果你还有什么想知道的，请留言告诉我。希望大家给作者点个赞~
暂无讨论，说说你的看法吧
