如何用好动效元素?

如何用好动效元素?

 

在页面当中的动效要设计得自然,一般需要通过形变、运动时间及缓动曲线来实现。形变表现的是动效元素自身的质地,运动时间及缓动曲线则是表现动效元素周围的环境。

因此,要如何设置缓动曲线以及时间,让动效设计得顺畅而自然,不妨参考以下的建议:

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联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月25日 23:46
下一篇 2022年6月25日 23:46

相关推荐

  • 日本网页设计常常人「奔溃」 优秀网页设计案例同样不容小觑

    很多港人都很喜欢日本,这不仅仅是因为日本有很多好玩好吃的,更重要是独特日式简约设计真的非常吸睛,不管是建筑、产品、包装乃至画报,都深受不少港人的认同和喜欢。 尽管如此,日本网页设计却是另类。纵观不少日…

    2022年6月25日 建站资讯
    0232
  • 网页设计趋势:从流行趋势区分UI设计和UX设计

    企业在开发网页时,都需要面对一些视觉设计上的决策。或许有些企业老板可能会说,「反正我又不是设计师,为何要懂这些东西。」但如果你的公司是初创公司,并没有一个全职的设计师,你就需要随机应变对网页功能进行U…

    2022年6月25日 建站资讯
    0114
  • Inspirr Creation案例鉴赏:如何让网站更加有吸引力

    在如今的互联网移动时代,网站点击率的高低会直接反映网站所带来的访客数量,而提高访客数量也就意味着提高产品在网站的销售量。那麽,如何让网站更加有吸引力呢?下面,Inspirr Creation将从「kidsmebaby婴幼儿购物…

    2022年6月25日
    0116
  • 10个心理学原理来改善你的网页设计。

    与心理学的力量和原则相结合,营销的设计是最有效的。了解人们对图形的反应将有助于指导您的设计工作。如果你不考虑心理学因素,那你只是在赌博,希望你的图片能吸引人们。虽然心理学是一个复杂而充满活力的领域,…

    2023年2月15日 SEO操作
    01
  • 大厂交互设计标准!交互设计文档范例模板。

    交互设计文档,也叫 DRD,是交互设计师将抽象的产品需求,转化为具体的界面方案、展示页面细节的说明文档。一个好的 DRD 不仅能帮助团队了解需求背景、设计方案等,还能极大提升交互或产品经理的专业性。所以老和这…

    2023年3月1日 SEO操作
    012
  • 网站建设如何提高用户体验。

    在如今的互联网营销背景下,企业快速建站的根本目的就是想尽快做网络宣传与推广,提升网站流量与营销目标的达成。网站要想获得更多的流量,良好的用户体验十分重要,而网站内容就是核心点。那么怎么样才能给客户一…

    2023年2月21日
    03
  • 数字插图改善你的网站和移动用户体验。

    一幅画胜过千言万语,我们是视觉生物,如果信息与一些图片或照片相伴,我们就能更好地感知信息。最复杂的思想可以用一个图像来表达,这就是说明图的主要力量。明智的UI设计师知道,巧妙地使用插图可以使应用程序或…

    2023年2月18日 SEO操作
    02
  • 网站设计最常见的失败案例

    创建一个赏心悦目和高转换网站设计并不是一件容易的事。设计人员经常发现自己出现一些很简单的错误,但并没有理会它们。殊不知这些错误都对网站的效率产生巨大的影响。这里有8个最常见最“持久”的设计失败案例,希望…

    2019年10月23日
    0714

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息