加速曲线，又被称为“缓入曲线”(ease in)。可以参照减速曲线理解，和减速曲线正好相反，适用于元素离开屏幕的情况，不做过多解释，加速曲线运动效果如图4所示。

图4.加速曲线示意图

急速曲线（sharp curve），sharp我在这里翻译成了“急速”，意思是速度较快。从示意图上来看，急速曲线可以理解为“带有运动边界且变化速率较快的标准曲线”。适用于元素可以随时返回屏幕的情况，例如一些应用的右滑菜单。加速曲线运动效果如图5所示。

图5.急速曲线示意图

在对曲线有了一些了解后，开奖，就可以将动效需要标注的内容和对应曲线进行组合了。我的做法是结合一些优秀的app动效，通过不断尝试调整参数，找到最接近或者最看起来最舒服的效果。这么做中规中矩但难以出彩，不过综合考虑开发成本和时间节点，差强人意吧。

下面图6是我当时输出的部分文档，举个例子供大家参考。不算高大上但是很实用，给到开发之后也没有发生问来问去的情况。后期校验的时候发现有个动效和演示效果不太一样，究其原因是没有写清楚曲线对应的标注内容，导致有些标注内容采用的是线性曲线，改正过来之后就和演示效果一样了。虽然曲线的演示动画是物体的运动状态，但并不只局限于运动轨迹，标注的每个内容比如大小、透明度等都应该有对应的曲线，这一点要特别注意。

图6.输出文档示例

动效文档部分到此算是告一段落。

二、效果演示

提到动效肯定首先想到的是AE，一开始也是用的AE尝试，但是做到后面有一种杀鸡用牛刀的感觉，路子不对赶紧转向。最终选定的是principle。当然还有其他的软件也可以实现类似的效果，如flinto和keynote。转场动效这种自由度较小的就这几款软件就差不多啦。

正文就是以上这些了。转场动效从无从下手到最后落地，成就感还是蛮大的。

最后说一下的感想：

思考问题的能力很重要，再一次体会到“磨刀不误砍柴工”这句真理。

站在巨人的肩膀上很重要，一定要避免重复造车轮，很多问题网上多找找都会有答案。

沟通交流很重要。和开发兄弟多沟通受益匪浅。

总结很重要。所以才有了这篇文章：）

下面附上一些链接供大家参考。我总结的不好的地方还请大家多多阅读“原版”。

material design 官方文档动效部分：https://material.io/guidelines/motion/duration-easing.html

热心网友翻译版：?winzoom=1

知乎某达人专栏文章：https://zhuanlan.zhihu.com/p/26898642

principle官方文档：

作者：陈木鱼，交互设计师。

本文由 @陈木鱼 原创发布于人人都是产品经理。未经许可，禁止转载。