小鱼儿论坛916886 主页 > 小鱼儿论坛916886 >  

993998白姐图库平面设计课堂:什么是动效设计?

更新时间: 2019-11-18

  【摘要】大家周一好呀!作为设计师,我们经常接到这样的需求:XX app中的动效好酷啊,我们也做一个吧。这时,一些习惯了把设计输出 = PSD的同学往往无从下手。那什么是动效设计?这里,我们先了解动效设计中如何用运动曲线表达动效以及缓动设计。

  显然,这样的技术在现实生活中是不存在的(也许有一天能实现),所以看起来会很不自然。这就需要有一个运动的过程,动效设计就是在设计这个过程。

  但这样的动效该如何表达呢?做过开发的同学都知道,可以用公式,绝大部分的动效用牛顿运动方程都是可以表达的。当然运动方程也可以做成图表,这里我们就用图表的方式来表达运动,这就是运动曲线。最常用的曲线是“位移 时间”曲线:横轴表示时间,纵轴表示在一个方向上的位移。

  它的运动曲线其实就是条直线,线的斜率(目标位置 / 运动时间)就是它的运动速度。

  不过这样的动效设计例子并不多,物体很少会自己突然获得速度,993998白姐图库,运动一段距离后又突然停止。在静止和运动两种状态之间,物体的速度往往会发生变化。这就是缓动(Easing)。

  缓动-减速运动(Ease out)在缓动过程中,物体的运动速度会由于外力而发生变化。常见的缓动有三种:减速运动、加速运动、先加速后减速。

  我们发现,物体有一个初始速度,随着时间的推移,它的速度,也就是曲线。什么样的物体会这样运动呢?

  在动效设计中,减速和加速动效往往是成对使用的。通常元素飞入时用减速运动,飞出时用加速运动。

  缓动-先加速后减速(Ease In and Out)可能大部分物体是这样运动的。

  从曲线中,我们看到,物体的速度(曲线开始增加,在中点达到最大值,然后又减小到0,我们可以看成这个物体在依靠自己的动力运动。

  很多起点和终点都在界面内的运动都使用这种缓动形式,比如iOS天气App的城市切换动画。

  它运动曲线分为两段,物体先向反方向运动,再在正向以很高的速度开始减速运动。

  采用不同的缓动形式不仅能帮助用户建立方向感,还能表现出物体的材质和“性格”。这体现出锁屏界面本身是一种弹性材质,而下方的相机是坚硬的材质。它会让用户感觉到锁屏很“轻盈”、易使用。

  好啦,今天的平面设计课堂:什么是动效设计?如何用运动曲线表达动效以及缓动设计,就到这里讲完啦。希望大家能在今天的文章中有所收获,今天的内容对于小白来说确实有点难懂,但是掌握了动效设计的知识点对于大家还是很有益处的。环球网校持续为你更新,我们下期再见。