火星网校
没有原则的动效，不是优秀的动效
作者：生动用诺言
发布时间： 2023-03-30 09:14:23
浏览量：341次
我们在APP中感受到真实的触感，多亏了多样的动效。但是要知道，动效要用得恰到好处，才能提高用户的使用感。所以我们常说，没有原则的动效，不是优秀的动效！
动效在APP内可谓是无处不在了，看了这么多动效设计的分析和案例，你是否想更深入了解这些动效，到底是遵循了怎样的原则，才能做出如此逼真且优秀的体验呢？
动效运动的规则和原则，多少取决于我们对于物理世界的认知，即动效的运动规律要符合物理规律，因感受到如同现实世界般的亲切自然。
本文将着重诠释"缓动"这个概念，在动效中加入缓动的效果能够让运动显得更加自然，这是运动的最重要的基本原则。这里我们就用图表的方式来表达运动：横轴表示时间，纵轴表示在一个方向上的位移。
1 △ 匀速直线运动的座标图
均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。
2 △ 加速曲线
当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。
3△ 减速曲线
减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。
4 △ 对称和非对称运动的差异
根据 Material Design 的规范，最好使用不那么对称的增速和减速的过程，让动效看起来更加真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程最好进行适当的强调，换句话说就是减速过程持续的时长最好超过开始加速的时长，用户将会更加清楚地观察到运动的最终结果，从而更好地明白运动的终止状态。
卡片元素从屏幕上运动的时候，不对称的缓动曲线
抽屉式导航随着缓动曲线从屏幕上隐藏
导航菜单的出现和消失
贝赛尔曲线函数 cubic-bezier（）就是用来描述运动曲线的，不同类型的 cubic-bezier（）的曲线和参数如上图所示。
动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在上面的图例当中，每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。
通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。
是的，虚拟世界多少取决于现实世界，或是对现实世界一些动态做了夸大扭曲等艺术处理，以模拟现实世界的动态感受在虚拟的数据界面上体现。当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。熟练掌握某款动效的软件也能对艺术创作产生事半功倍的效果。
优秀作品赏析
作 者：李思庭
所学课程：2101期学员李思庭作品
作 者：林雪茹
所学课程：2104期学员林雪茹作品
作 者：赵凌
所学课程：2107期学员赵凌作品
作 者：赵燃
所学课程：2107期学员赵燃作品
