设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

Web页面设计中的动画运用技巧

2014-9-1 16:20| 发布者: joejoe0332| 查看: 3499| 评论: 0|原作者: techug.com|来自: techug.com

摘要: 随着软硬件技术的发展,界面动画在我们的日常生活中随处可见。桌面软件、移动应用、云服务此刻回顾四周我相信你一定能发现他们。


阻尼动画

  提到阻尼,需要介绍三个概念:临界阻尼、过阻尼、欠阻尼。


临界阻尼

  生活中一些高档的门或橱柜。他们在开合的过程中为了不造成太大的声响,他们的机械结构阻尼会尽量设计接近临界阻尼。这个过程最容易让人接受,不会感觉有外界干扰。过阻尼和欠阻尼,通常能让你感觉到有一只隐形的手,阻碍或促进运动。


过阻尼

  从字面上会容易理解,就是阻尼很大,阻碍运动的发展。有些自动门或电梯门在闭合的过程中,在最后段里往往需要更长的时间。另外,记忆枕的恢复的过程也是过阻尼。


欠阻尼

  阻尼不够,继而形成了振荡的特征。生活中的一些弹簧门,在关闭的过程中,会多次摆动,最终趋于闭合。


  做一个比较细腻的界面动画时候,如果追求理性一些,可以把动画的成果拆解成三个阶段。启动、运行、收尾。设计师需要花更多的时间去考虑启动与收尾过程。



  • 启动阶段:体现力质量、环境,可以表现材质的轻盈与厚重。
  • 收尾阶段:体现质量速度环境。阻尼通常在这个阶段体现。


  举个例子

  请大家关注启动与收尾阶段。



  动画曲线仅作示意感受,可能与实际动画有所出入。


呼吸动画

  呼吸动画,常用于界面元素的提醒。


  对于这个动画,设计师最直观的印象就是闪烁。在实施的过程中,对于闪烁一词会被赋予不同的理解。


  • 设计师眼中的闪烁:“渐显 -> 渐隐 -> 渐显 -> 渐隐”;
  • 工程师眼中的闪烁:“显示 -> 隐藏 -> 显示 -> 隐藏”;


  如何把动画做得更细腻,就在于如何将渐显与渐隐的过程如何描述得更加仔细。


  对于最早的渐显、渐隐动画,我首先想到了三角函数。



  仔细观察这个函数,可以发现他的特点是在一个周期里是启动渐增、收尾减缓的过程。适合开发利用简单代码实现的动画效果。


  有兴趣的同学可以用原型感受一下。做闪烁动画,用到三角函数其实就可以满足大部分场景。


  我在尝试的动画的时候,把他作为呼吸函数来看,总觉得哪里还是不太自然。看起来“呼吸比较急促”。



酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部