如何用好动效元素?
在页面当中的动效要设计得自然,一般需要通过形变、运动时间及缓动曲线来实现。形变表现的是动效元素自身的质地,运动时间及缓动曲线则是表现动效元素周围的环境。
因此,要如何设置缓动曲线以及时间,让动效设计得顺畅而自然,不妨参考以下的建议:
1.linear曲线(匀速运动)除了一些特殊场景如载入、星空背景外,其实很少被使用。
2.easeIn(先缓後快)页面中的场景适用也不多,主要适用於掉落、toWhere的场景当中使用。
3.easeInOut(头尾缓、中间快)通常在需要轮转切换的场景中使用,这类动效元素的触发物件与运动物件并不是同一个元素。
4.easeOut(先快後缓)最常见的效果,其触发物件与运动物件往往是同一个。主要用在展开、收起、出现、移动等动画中。因此,当不知道要用哪个缓动曲线时,就适用这个吧。
5.曲度主要表现动效元素运动过程的力的大小,曲度越大,启示力或阻力越大。
6.回弹则表现的是动效元素运动的剧烈程度及质地。
7.动效元素运动时间一般需要控制在0.3s-0.8s之间,过长的时间会让用户感觉拖遝,不自然。
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/44468.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除