设为首页收藏本站

LUPA开源社区

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

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

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

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

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



  在产品中动画未必越多越好,也未必越炫越好。不同的产品类型对动画的要求也不同。常见的动画主要承担向用户解释界面与界面之间的关系,元素与元素间的关系以及特定元素的强化。


  如果你关注过界面动画,你可能见过以下这些动画曲线。摘自 http://easings.net/



  他们表述了动画变化的程度与时间的关系。通过合理利用这些动画曲线背后的原理,可以让动画看起来更加真实。


  这里说到我们要让界面动画更自然。如何做到自然?只要遵循客观物理规律以及人得视觉经验,动画就会看上去真实自然。


  为什么要讲动画函数?相信很多设计师看到下面的文章会的觉得太枯燥。


  那我们回到产品研发过程,在产品里,常见的动画实现有这么几种:


  1. 设计师逐帧绘制;开发同学实现循序/循环播放逻辑。
  2. 设计师提供动画资源文件如(视频、flash、gif);开发同学将资源嵌入产品。
  3. 设计师提供动画形式、参数与元素;开发同学完成动画实现,如:html5/CSS动画。


  文本想针对第三种形式,帮助设计师了解动画背后的科学知识,可以有具体的参数与开发同学沟通。


  如果你熟悉物理课本里的运动公式,请跳过第一部分。


运动动画

  我们先从最简单的运动动画说起。我们客观物理规律还是得从牛顿第二定律说起。F=ma,如果大家不明白这个公式,没关系。


  请允许我不那么讲究术语的严谨性。通俗点来说,就是运动动画响应变化情况与执行动画的物体本身有关。如果你想表现的物体是一个沉甸甸的,那么他们的起始动画响应/参数的变化会比较慢。反之,物体是轻巧的,那么其起始动画响应/参数的变化会比较快。



  从图上可以看到如果是相同的操作且移动相同的距离,轻巧的所花的时间越短。



酷毙

雷人

鲜花

鸡蛋

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

最新评论

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

返回顶部