已阅读5页,还剩3页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。迪士尼经过基础工作练习的长时间累积,在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。在本文中,我会逐个介绍这十二个原则,并讨论它们怎样运用在网页中。你能在 Codepen 找到它们全部的开源 HTML 和 CSS 代码 。挤压和拉伸 (Squash and stretch)Squash and stretch这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时,碰击到地面会变扁,恢复的时间会越来越短。创建对象的时候最有用的方法是参照实物,比如人、时钟和弹性球。当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关,它会按需要在屏幕上缩放。例如,一个按钮会变大并变成一个信息框,或者错误信息会出现和消失。尽管如此,挤压和伸缩效果可以为一个对象增加实物的感觉。甚至一些形状上的小变化就可以创造出细微但抢眼的效果。Codepen 上的源代码预备动作 (Anticipation)Anticipation运动不倾向于突然发生。在现实生活中,无论是一个球在掉到桌子前就开始滚动,或是一个人屈膝准备起跳,运动通常有着某种事先的累积。我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹,帮人们理解什么对象将在屏幕中发生变化并留下痕迹。例如,悬停在一个元件上时可以在它变大前稍微缩小,在初始列表中添加额外的条目来介绍其它条目的移除方法。Codepen 上的源代码演出布局 (Staging)Staging演出布局是确保对象在场景中得以聚焦,让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置,要么模糊其它元件来让用户专注于看他们需要看的东西。在网页方面,一种方法是用 model 覆盖在某些内容上。在现有页面添加一个遮罩并把那些主要关注的内容前置展示。另一种方法是用动作。当很多对象在运动,你很难知道哪些值得关注。如果其它所有的动作停止,只留一个在运动,即使动得很微弱,这都可以让对象更容易被察觉。还有一种方法是做一个晃动和闪烁的按钮来简单地建议用户比如他们可能要保存文档。屏幕保持静态,所以再细微的动作也会突显出来。Codepen 上的源代码连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)Straight-Ahead Action and Pose-to-Pose连续运动是绘制动画的每一帧,姿态对应是通常由一个 assistant 在定义一系列关键帧后填充间隔。大多数网页动画用的是姿态对应:关键帧之间的过渡可以通过浏览器在每个关键帧之间的插入尽可能多的帧使动画流畅。有一个例外是定时功能step。通过这个功能,浏览器 steps 可以把尽可能多的无序帧串清晰。你可以用这种方式绘制一系列图片并让浏览器按顺序显示出来,这开创了一种逐帧动画的风格。Codepen 上的源代码跟随和重叠动作 (Follow Through and Overlapping Action)Follow Through and Overlapping Action事情并不总在同一时间发生。当一辆车从急刹到停下,车子会向前倾、有烟从轮胎冒出来、车里的司机继续向前冲。这些细节是跟随和重叠动作的例子。它们在网页中能被用作帮助强调什么东西被停止,并不会被遗忘。例如一个条目可能在滑动时稍滑微远了些,但它自己会纠正到正确位置。要创造一个重叠动作的感觉,我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗 (View) 过渡中被运用得很好的方法。一些按钮和元件以不同速率运动,整体效果会比全部东西以相同速率运动要更逼真,并留出时间让访客去适当理解变化。在网页方面,这可能意味着让过渡或动画的效果以不同速度来运行。Codepen 上的源代码缓入缓出 (Slow In and Slow Out)Slow In and Slow Out对象很少从静止状态一下子加速到最大速度,它们往往是逐步加速并在停止前变慢。没有加速和减速,动画感觉就像机器人。在 CSS 方面,缓入缓出很容易被理解,在一个动画过程中计时功能是一种描述变化速率的方式。使用计时功能,动画可以
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年文化教育职业技能考试-职业指导师笔试参考题库含答案
- 2024年建设工程质量检测人员-建设工程质量检测人员(钢结构)笔试参考题库含答案
- 2024年广西住院医师-广西住院医师康复医学科笔试参考题库含答案
- 2024年岗位知识竞赛-医师道德准则与行为规范知识竞赛笔试参考题库含答案
- 2024年宁夏住院医师-宁夏住院医师放射科笔试参考题库含答案
- 2024年大学试题(财经商贸)-房地产开发与经营管理笔试参考题库含答案
- 2024年大学试题(计算机科学)-计算机辅助设计笔试参考题库含答案
- 2024年大学试题(计算机科学)-多媒体应用基础笔试参考题库含答案
- 初级银行从业资格之初级个人理财提升训练试卷A卷附答案
- 2024年大学试题(艺术学)-展示设计笔试参考题库含答案
- 生产计划自动排程
- 2023北京一七一中初一(下)期中数学试卷含答案
- 天然气巡检记录表
- 《人世间》读书分享
- 高中英语怎样写英语倡议书市公开课一等奖课件省赛课获奖课件
- 大学生在校表现自我鉴定800字(4篇)
- 小学劳动教育三上第三单元2《制作风车》教学设计
- 北京联合大学教师招聘考试题库真题2023
- 法院执行庭开展社会主义法治理念教育自查报告及整改措施
- 国际贸易实务-实训电子课件
- 食品雕刻项目教程高职PPT完整全套教学课件
评论
0/150
提交评论