如何向工程师描述你的动效

来源：互联网 2023-03-20 14:05:58 版权归原作者所有，如有侵权，请联系我们

日常工作中，交互设计师不仅需要处理复杂的业务逻辑、排放各种层次的信息，还经常需要制作各类动效。除了用于可用性测试、方案汇报与演示之外，动效还承担着丰富页面效果、情感化表达等提升用户体验的作用。

方法/步骤

属性变化的起点和终点——Begain&End Value

具体来说，可能是x坐标从0px到200px，或者透明度 Opacity 从0%变到100%。记住，代码实现时也必须明确这些值的变化，这定义了整个效果的起终点状态。

有了起点值和终点值，还需要关注的第二个关键点是：

如何向工程师描述你的动效？

属性变化的过程——时间和曲线

严格来说，曲线是归一化后的时间与属性值的对应关系。说人话就是，这个属性从起点到终点，总共花费了一个单位的时间（可能是一秒、或十秒），那么每一个瞬间这个属性值是多少，都应该被定义清楚。

最简单的线性曲线，即属性值变化与时间成正比；最常用的 Ease Both 曲线，即属性变化先加速后减速，保持起点和终点附近变化比较平缓；比较复杂的 Spring 曲线，模拟了弹簧的震动和阻尼效果。

如何向工程师描述你的动效？

在开发过程中，几类曲线都有对应的动画函数可以调用：以 iOS 为例，如果使用的是默认 Core Animation 引擎，会有 EaseOutEaseIn 函数——其本质为贝塞尔函数曲线，因此通过调整函数下的四个参数，可以得到我们想要的曲线形状。而如果需要 Spring 等相对复杂的效果，则可以使用 Pop Animation 等第三方动画引擎，它们对默认动画有更好的封装。

记得告诉开发同学你所使用的动画曲线是哪一种（确定参数和总体动画时间）。这里推荐一个网站：http://cubic-bezier.com，可以快速调整好曲线参数并查看效果。

如何向工程师描述你的动效？

描述不同属性变化的组合形式——先后顺序和相互关系

以 Principle（一个比较简单易用的动效软件）的动效产出为例：

如何向工程师描述你的动效？

很简单，你要说明的就是，什么组件（如 pic 是一张图片），什么属性（xy 坐标、Scale），在什么时间（0－300ms），以什么过程（Default 曲线）做了什么变化（起点和终点值）。然后，如图所示，列举清楚整个动画过程中，各个组件属性变化的先后关系。

差点忘了，我们还必须要告诉开发同学，是什么事件开启了整个动画过程，也就是最后第四个关键点：

最后再复习一下四个动效交付关键点：

第一、属性变化的起点和终点——Begain Value 和 End Value；

第二、属性变化的过程——时间和曲线；

第三、描述不同属性变化的组合形式——先后顺序和相互关系；

第四、描述触发动效的手势操作——Tap、Long Press、Swipe and so on.

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：职业教育

上一篇：规避临床执业医师考试复习误区下一篇：信息技术如何助力语文教学

如何向工程师描述你的动效

方法/步骤

热门文章

标签列表