发布时间：2020-4-14 分类： 行业资讯
审查的最后部分如下所示：《最全的动效落地方法(上篇)：在界面设计中，好动效是什么样的?》接下来，下一个主题是：从Web前端的角度来看，实现这些效果的方便方法是什么？
在当前的行业中，整个动态设计系统尚未成熟;从最终的渲染效果来看，动态效果可能会影响页面性能，加载速度等。因此，在动机方面，许多学生可能会有冲突。
当我们遇到问题时，我们首先要解除困难。在我看来，动态效应过程中面临的困难可以分为以下三种类型：
对接困难：对接困难实际上是沟通困难，这是本文的重点。由于界面动态是一种新兴的设计模式，因此开发和设计之间没有成熟的对接标准。
设计难点：界面的动态实质上是静态界面在时间和交互维度上的扩展。最常用的界面设计工具不是为时间轴而设计的，传统的动态设计工具（如AE）缺乏交互性。难以设计界面的高精度尺寸。
实施困难：界面增加了时间维度。研发不仅需要布局，还要控制时间流上每个元素的性能。在某些情况下，如果使用序列帧或Gif，则需要严格控制资源大小。发展成本。
鉴于以上几点，我在日常工作过程中总结了一些更有效的解决方案。虽然这些解决方案并不完美，但它们通常可以涵盖工程环境中的大多数情况。
对接
与设计师的发展和沟通困难。这是因为精确的参数不用于描述效果。要解决这个问题，我们需要创建一个有效的运动标注系统。这个系统必须做以下两件事：让设计师轻松描述动态效果，使开发能够准确地恢复动态效果。构建该“标签”的方法在以下两节中描述：
定量效率
实际上，界面动力学中涉及的设计参数非常简单，只有三个。无论动态效果有多复杂，这三个参数都被组合和组合：
（1）改变
更改可以分为四类（如动画中所示）。这四种类型的变化基本上涵盖了界面元素的整个运动。只要我们准确描述动态效果前后元素的变化，我们就可以准确地完成“变化”。这个参数的对接。
例如，下图中抛出的绿色恐龙包含上述四个变化。
AE之前和之后变化的参数如下：
那么我们此时需要记录的状态（这里只涉及变化）应该是这样的：
初始状态：
位移：X轴0
旋转：0度
大小：1
透明度：0.2
结束状态：
位移：X轴200px
旋转：+180度
大小：1.5
透明度：1
用这种方式会更清楚。作为一个友好的设计师，不要只是做一个演示并说，“只是遵循相同的效果。”在这种情况下，估计大多数发展只会看起来像一张脸。
（2）持续时间
第二个关键参数是持续时间。这是动画的名称。无论变化是或多或少，简单或复杂，我们都需要确定每次变化的时间，时间短而清晰，时间长而温和。
标记时，不要忘记标记清晰运动的开始时间和结束时间。
（3）曲线
曲线描述了物体移动时的速度变化。如果变化和持续时间是运动的本体论，那么曲线就是运动的灵魂。
对于移动物体，同一个变化，同一时间，给定不同的速度曲线，将使其动态效果产生丰富的变化。因此，在动态设计中，曲线也是设计师最关心的部分。
最基本的速度曲线是线性的（即整个过程是均匀的），慢进，慢进和慢进慢速运行：
虽然我们通常使用上述曲线或多或少地描述动画过程，但我们并不一定真正了解曲线的具体用法。下面我将给出四个例子来说明上述曲线。用法。
在上面的示例中，小圆圈以相同的长度移动，它们水平移动并一起到达末端，但速度曲线不同。
第一轮：轻松缓解，有一定的速度，慢慢刹车。适用于元素进入页面的情况。
第二轮：轻松进入轻松状态，没有速度，速度越来越快，相当于从零开始加速的东西。适用于元素离开页面时。
第三轮：轻松进出轻松：开始和结束都没有速度，先加速然后慢下来。它是我们日常生活中最常见的身体运动。适用于从A页到B点的元素。
第四轮：线性均匀运动，看起来很僵硬，不推荐。
那么动画曲线在设计工具中出现在哪里？
在AE中，可以通过值图表调整动画的曲线，可以通过转换（转换方法）获得可用于开发的三次贝塞尔曲线参数，或者通过插头直接通过cubice-bezier曲线获得 - 如Flow。
在新的设计工具（Framer）中，工具本身可以使用cubic-bezier曲线直接定义动画。
在前端开发中，您可以直接使用设计给出的cubic-bezier曲线参数来描述动画。示例如下：
现在有许多工具可以让设计人员轻松调整曲线，实时预览曲线，并以他们需要的格式显示曲线。在这里推荐两个：
Cubic-bezier.com
http://www.css3beziercurve.net/
曲线部分已经完成，让我提一下，虽然这里我以位移速度曲线为例，但事实上，旋转，大小，透明度等也都有速度曲线。将速度曲线添加到这些更改中。让动力更自然，更贴近现实。前端也是可以实现的。
通过上面的动力学参数量化，我认为合格的标签应该是这样的：
上图中的交互来自Amazon Prime Music，界面中有两个元素（加上图标和刻度图标）的动画，虽然它看起来非常简单，但包含了各种各样的变化。
除了动画的三个元素，以及触发条件和动画对象之外，最好使用一个表，以便可以清楚地列出每个元素：
如图所示，请注意曲线应使用英文名称标记，以便可以使用前端。
我还将这个带注释的模板上传到云盘〜链接：运动标签
希望可以帮助你：）
如果你在这里看到很多问题，建议阅读MartinRGB编写的MartinRGB/MTGuideline，从交互式动画的样式定义，到动态设计 - 注释 - 开发过程的介绍〜
设计方法和工具
动态设计工具最传统的通用应用是After Effects，因为许多设计师可能已经使用过以前的经验，但它也有不能满足当前需求的缺点：不具有交互性，输出无法量化，难以共享。并且有很多新兴设计–输出解决方案，我将在下面做一些简单的介绍。
自动导出类
目前，有像Lottie和Keyframes这样的开源库。通过AE插件，AE中设计的动画会自动导出为可用的动画文件。前端只需要在项目中打开相应的开源库，这样就可以避免它。对接通信困难。
虽然它看起来非常简单和美观，但该解决方案的应用场景是有限的：它仅适用于纯动态的应用程序（如动态ICON），不能用于UI的界面元素。对AE效果的支持是有限的，您可以在没有库的情况下做任何您想做的事情。
但总的来说，自动输出类方案可以在纯动态元素的场景下大大提高工作效率和产品性能。与Gif或帧序列相比，导出的json文件具有较小的容量和最终的高质量显示。
可互换的课程
除了依赖AE传统工具的解决方案外，还有更多设计工具可直接在炉子上工作。目前广泛使用的包括Principle，Flinto，Framer，Origami等。与传统工具相比，这些新工具毫无例外地添加了交互功能，允许我们设计和模拟交互式产品流。与以往相比，我们可以在设计阶段感受到产品的“感觉”，让动态设计的准确性达到一个新的水平。
在我们最喜欢的新工具中，我最喜欢的是Framer ~~它具有其他工具所没有的独特属性——用代码构建，基于Web。
图中是用Framer
编写的代码示例可能许多设计人员将代码视为敌人，但事实上，由于代码构造，设计人员可以非常清楚地设计具有复杂逻辑的动态界面。同时，动画部分的代码内容可以直接用于开发参考。此外，由于基于Web的功能，所有Web支持效果，Framer都可以完成，自由度极高，并且设计输出可以通过URL快速共享，因此整个产品线上的人都可以体验您的低成本。动态设计。
此外，今天，随着“全栈”概念越来越受到关注，设计人员能够通过相对低成本的方式来访问代码来理解前端知识，这是一个非常有效的改进渠道。
Framer的入门建议Melodie的已知答案：Melodie：Framer（framerjs.com）如何开始？这是Framer易于理解的条目。
发展
常用的动画实现如下：
1. CSS动画
关于w3school CSS3动画的学习资料推荐文档
值得注意的是，虽然设计师无法理解技术，但他们必须善于利用现有案例来表达他们的设计意图。可以在Animate.css中找到CSS可以实现的动画示例，Animate.css是一个跨浏览器的CSS3动画库。如果您的示例中有动画，则委托可以在CSS中实现，除了一些简单的矢量规则效果也可以通过CSS实现。
2，开源库
应用设计方面提到的Lottie和Keyframe类开源库，并直接在项目中使用AE导出的动画资源。
上一篇文章中提到的San home的悬停动画是用Lottie实现的：
最终成绩
3.序列框架
序列帧可以理解为选取框。具体实现是提供一个动画帧序列拼图，由CSS和JS控制逐帧播放。与交互式效果不同，序列帧动画通常用于操作页面上的动画。例如，在之前的春节中，我曾经做过一个序列帧动画。如下图所示：
它实际上是一个与一块烟花拼凑在一起的精灵：
使用序列帧以确保动态效果的最佳用户体验还有许多要求
加载时间：必须加载在最小网络速度环境中加载至少2秒。装载时间不超过5秒;
移动流量消耗：在移动终端的非wifi网络下，动画资源限制的总大小不超过2M。
通常，用户感知60fps的平滑帧速率，并且为了确保最终效果，最小回放帧速率通常为20fps。 （1S播放30帧）
当然，为了减少不必要的通信损失，在提供序列帧拼图时要注意以下传送格式
提供每个框架的宽度和高度
每帧播放时间，总帧数
动态效果，gif，MP4等格式不受限制
触发动画时，例如单击按钮时，单击按钮时
添加一个工具来制作序列帧gka
总结
在本文中，我们将讨论在实现动态效果时遇到的困难并提供相应的解决方案：
1.对接困难——量化动力
在对接过程中，提供量化动态效果的标准，使设计人员能够更准确地描述这种动态效果，使开发可以100％恢复这种动态效果。
标记时，元素的三个元素的动态效果——变化，持续时间和曲线分别标记。如下图所示：
以下是注释模板的下载地址：动画标签模板下载链接pan.baidu.com
2，设计难点— —设计工具
自动导出类：开源库，如Lottie和Keyframes。通过AE插件，AE中设计的动画会自动导出到可用的动画文件中。前端只需要在项目中打开相应的开源库。对接通信困难。
Interactable class：Framer入门：Melodie：Framer（framerjs.com）如何开始？
3，发展困难— —开源库
Animate.cssdaneden.github.io
制作的Airbnb/lottie-webgithub.com
感谢阅读:)写的是匆忙。如果您还有任何需要了解的信息，可以在邮件中告诉我。我希望我能给作者一个恭维〜
作者：Green Lvgreen，设计师混合了前圈，曾在百度Echarts团队工作过。了解专栏：UX元素
资料来源：https://zhuanlan.zhihu.com/p/34501702
本文是在@绿绿绿的授权下发布的，未经作者许可，不得复制。
该地图来自Pexels，基于CC0协议
