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