如何用好动效元素?

如何用好动效元素?

 

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

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

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月10日
    0126
  • 我来教你网页设计怎么切片,ps怎么做网页设计。

    网页设计是一个复杂的过程,涉及到许多不同的技能和工具,切片和Photoshop是网页设计中非常重要的两个环节,切片可以帮助我们更好地组织和管理网页的布局,而Photoshop则是一个非常强大的图像处理工具,可以用来创…

    2024年6月29日
    04
  • 快速提升 UI 设计效果的 6 个小技巧 (UI 设计集-3)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧,是系列文章的第三篇,原文最早发布于 marcand…

    2023年3月1日 SEO操作
    010
  • 长滚动页面的最佳实践——导航可见

      让导航选项始终可见是提升长滚动页面设计形式的重要要求,因为长滚动页面设计形式对於使用者来说最大的障碍在於:使用者很容易在页面的流览过程当中迷失。而缺失导航应该是比较主要的原因,除此之外还有混乱…

    2022年6月25日
    0119
  • 我来分享天津网页设计:营销型网站的核心要素。

         营销型网站是随着互联网的发展而出现的,它顺应了时代的潮流,也符合了人们的生活和工作需要,为人们节省了大量的时间、给他们带来了实质性的方便快捷。那么,营销型天津网页设计的核心要素是什么呢?     一、…

    2023年6月16日
    016
  • 无边框网站设计突出的三点优势

    掌控用户的注意力 无边框网站设计形式就像是透明的卡片化,与网站背景形成对比,而尺寸上有没有很强烈的界限,因此更能够吸引用户的注意力。很明显,若果网站设计上摆放了较多的色彩鲜艳、试图以此吸引用户注意力的…

    2022年6月25日
    0182
  • 操作弹窗类型的设计原则

    操作弹窗多出现在较多用户容易操作失误的页面当中,以此给予提示和引导。但弹窗无论怎样,都很容易造成用户的反感,因为会打断用户目前的操作流程,给用户造成体验上的不愉悦。 频率上的注意;虽然是弹出为了引导与…

    2022年6月25日
    0131
  • 这些网页并不适合使用下拉刷新  

      屏幕小插件:这些小插件最好是使用自动更新的交互形式。 地图应用:这种网页设计时更不适合下拉刷新的交互形式,因为地图上的内容并不会以时序进行排列,也没有明确的方向与内容来源。需要用户的操作才能够…

    2022年6月25日
    0222

联系我们

QQ:951076433

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