资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

转载新闻 网页动画的十二原则

2015-06-08 15:01 by 副主编 mengyidan1988 评论(4) 有6193人浏览
前端开发 Web
原文地址：Animation Principles for the Web
本文转自简书
作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。

动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。

在本文中，我会逐个介绍这十二个原则，并讨论它们怎样运用在网页中。你能在 Codepen 找到它们全部的开源HTML和CSS代码。

挤压和拉伸 (Squash and stretch)
这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时，碰击到地面会变扁，恢复的时间会越来越短。

创建对象的时候最有用的方法是参照实物，比如人、时钟和弹性球。

当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关，它会按需要在屏幕上缩放。例如，一个按钮会变大并变成一个信息框，或者错误信息会出现和消失。

尽管如此，挤压和伸缩效果可以为一个对象增加实物的感觉。甚至一些形状上的小变化就可以创造出细微但抢眼的效果。

Codepen 上的源代码

预备动作 (Anticipation)



运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。

我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。

例如，悬停在一个元件上时可以在它变大前稍微缩小，在初始列表中添加额外的条目来介绍其它条目的移除方法。

Codepen 上的源代码

演出布局 (Staging)



演出布局是确保对象在场景中得以聚焦，让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置，要么模糊其它元件来让用户专注于看他们需要看的东西。

在网页方面，一种方法是用 model 覆盖在某些内容上。在现有页面添加一个遮罩并把那些主要关注的内容前置展示。

另一种方法是用动作。当很多对象在运动，你很难知道哪些值得关注。如果其它所有的动作停止，只留一个在运动，即使动得很微弱，这都可以让对象更容易被察觉。

还有一种方法是做一个晃动和闪烁的按钮来简单地建议用户比如他们可能要保存文档。屏幕保持静态，所以再细微的动作也会突显出来。

Codepen 上的源代码

连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)



连续运动是绘制动画的每一帧，姿态对应是通常由一个 assistant 在定义一系列关键帧后填充间隔。

大多数网页动画用的是姿态对应：关键帧之间的过渡可以通过浏览器在每个关键帧之间的插入尽可能多的帧使动画流畅。

有一个例外是定时功能step。通过这个功能，浏览器 "steps" 可以把尽可能多的无序帧串清晰。你可以用这种方式绘制一系列图片并让浏览器按顺序显示出来，这开创了一种逐帧动画的风格。

Codepen 上的源代码

跟随和重叠动作 (Follow Through and Overlapping Action)



事情并不总在同一时间发生。当一辆车从急刹到停下，车子会向前倾、有烟从轮胎冒出来、车里的司机继续向前冲。

这些细节是跟随和重叠动作的例子。它们在网页中能被用作帮助强调什么东西被停止，并不会被遗忘。例如一个条目可能在滑动时稍滑微远了些，但它自己会纠正到正确位置。

要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗 (View) 过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。

在网页方面，这可能意味着让过渡或动画的效果以不同速度来运行。

Codepen 上的源代码

缓入缓出 (Slow In and Slow Out)



对象很少从静止状态一下子加速到最大速度，它们往往是逐步加速并在停止前变慢。没有加速和减速，动画感觉就像机器人。

在 CSS 方面，缓入缓出很容易被理解，在一个动画过程中计时功能是一种描述变化速率的方式。

使用计时功能，动画可以由慢加速 (ease-in)、由快减速 (ease-out)，或者用贝塞尔曲线做出更复杂的效果。

Codepen 上的源代码

弧线运动 (Arc)



虽然对象是更逼真了，当它们遵循「缓入缓出」的时候它们很少沿直线运动——它们倾向于沿弧线运动。

我们有几种 CSS 的方式来实现弧线运动。一种是结合多个动画，比如在弹力球动画里，可以让球上下移动的同时让它右移，这时候球的显示效果就是沿弧线运动。



另外一种是旋转元件，我们可以设置一个在对象之外的原点来作为它的旋转中心。当我们旋转这个对象，它看上去就是沿着弧线运动。

Codepen 上的源代码：动画1、动画2

次要动作 (Secondary Action)



虽然主动画正在发生，次要动作可以增强它的效果。这就好比某人在走路的时候摆动手臂和倾斜脑袋，或者弹性球弹起的时候扬起一些灰尘。

在网页方面，当主要焦点出现的时候就可以开始执行次要动作，比如拖拽一个条目到列表中间。

Codepen 上的源代码

时间节奏 (Timing)



动画的时间节奏是需要多久去完成，它可以被用来让看起来很重的对象做很重的动画，或者用在添加字符的动画中。

这在网页上可能只要简单调整 animation-duration 或 transition-duration 值。

这很容易让动画消耗更多时间，但调整时间节奏可以帮动画的内容和交互方式变得更出众。

Codepen 上的源代码

夸张手法 (Exaggeration)



夸张手法在漫画中是最常用来为某些动作刻画吸引力和增加戏剧性的，比如一只狼试图把自己的喉咙张得更开地去咬东西可能会表现出更恐怖或者幽默的效果。

在网页中，对象可以通过上下滑动去强调和刻画吸引力，比如在填充表单的时候生动部分会比收缩和变淡的部分更突出。

Codepen 上的源代码

扎实的描绘 (Solid drawing)



当动画对象在三维中应该加倍注意确保它们遵循透视原则。因为人们习惯了生活在三维世界里，如果对象表现得与实际不符，会让它看起来很糟糕。

如今浏览器对三维变换的支持已经不错，这意味着我们可以在场景里旋转和放置三维对象，浏览器能自动控制它们的转换。

Codepen 上的源代码

吸引力 (Appeal)



吸引力是艺术作品的特质，让我们与艺术家的想法连接起来。就像一个演员身上的魅力，是注重细节和动作相结合而打造吸引性的结果。

精心制作网页上的动画可以打造出吸引力，例如 Stripe 这样的公司用了大量的动画去增加它们结账流程的可靠性。

Codepen 上的源代码
  • 大小: 74.4 KB
  • 大小: 137 KB
  • 大小: 384.2 KB
  • 大小: 428.4 KB
  • 大小: 152.7 KB
  • 大小: 121.9 KB
  • 大小: 259 KB
  • 大小: 305.4 KB
  • 大小: 168.6 KB
  • 大小: 415.3 KB
  • 大小: 208.9 KB
  • 大小: 174.7 KB
  • 大小: 103.5 KB
来自: 简书
4
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 yiwenqi_2011 2015-06-09 16:15
这些动画效果IE多少能够支持呢？
3 楼 _龙修_ 2015-06-09 09:50
2 楼 feizhang666 2015-06-09 09:32
不错不错，
1 楼 小刘不牛 2015-06-08 15:33
挺有趣

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 服务器网页不显示动画,网页flash动画不显示的解决方法

    网页flash动画不显示的解决方法发布时间：2009-08-16 13:27:47 作者：佚名 我要评论网页不显示flash动画，一般是因为刚安装了系统，一般只要安装一下flash插件就可以了。解决步骤如下：开始-->运行-->输入...

  • 网页动画的12原则，帮你做出漂亮的动画效果

    大多数网页动画用的是姿态对应：关键帧之间的过渡可以通过浏览器在每个关键帧之间的插入尽可能多的帧使动画流畅。 有一个例外是定时功能 step。通过这个功能，浏览器 “steps” 可以把尽可能多的无序帧串清晰。你...

  • Web 动画原则及技巧浅析

    在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation[1]，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则...

  • html网页设计文字出现动画,网页设计中的文字与图片的动画有以下几种形式

    下面我们会来详细介绍网页设计中，图文动画的几种展现方式，总结比较全面，大学互相学习一下。1．滚动文字或图片从屏幕的底部移动到顶部，dZ从左边...3．淡进和淡出网页动画上常见的图像转换的处理手法。4．飞行文...

  • 网页设计与制作期末大作业报告——动画家宫崎骏

    《网页设计与制作》大作业报告学院：**学院姓名：学号：专业:摘要：宫崎骏（Miyazaki Hayao，1941年1月5日-），日本知名动画导演、动画师及漫画家， 出生于东京都文京区，1963年进入东映动画公司，1985年与高烟勋...

  • 十条设计原则教你学会如何设计网页布局

    网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局,很少用三列... link:十条设计原则教你学会如何设计网页布局!_网页制作_青青个人博客

  • lottie-动画转代码神器

    网页动画历史 在21世纪初，当flash还是网页动画之王时, 每个设计师都在释放他们的创意。那时候网上炫酷炸裂的网站随处可见, 只要你装了flash播放器, 就可以正常浏览。其中有些看起来更像游戏，当时还没有像现在这么...

  • css动画结束闪烁,CSS秘密花园： 闪烁动画

    《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、...但全世界的人都鄙视他，因为它违反了样式和结构的分离原则，但最主要的是原因...

  • html设定元素动画执行,CSS动画 _Animation 教程_W3cplus

    本文是为帮助您入门和熟悉CSS动画而编写的，使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中，但是如今它已经有大量的内容可以供我们使用了。对我而言，CSS动画最令人激动的...

  • 网页设计Dreamweaver【1】

    表格、动画 C.声音视频 D.纸张等实物 2.下面不属于“页面属性”中可以设置的内容（） A.外观 B.链接 C.跟踪图像 D.首选参数 3.下列（）方法无法添加网页标题 A.在HTML代码中添加网页标题 B.在文档窗口中添加网页...

  • 用 JavaScript 实现手势库 — 手势动画应用【前端组件化】

    「四」用 JavaScript 实现时间轴与动画 「五」用 JavaScript 实现三次贝塞尔动画库 - 前端组件化 「六」用 JavaScript 实现手势库 - 实现监听逻辑 「七」用 JavaScript 实现手势库 — 手势逻辑 「八」用 JavaScript ...

  • 网页设计与构架中的几个SEO优化原则

    在设计的时候要学会不留垃圾代码，合理运用JS（JavaScript脚本语言）、FLASH（动画）以及PICTURE（图片）。搜索引擎不认识FLASH、PICTURE是众所周知的，可以通过增加ALT标签加以描述；可将JS放在页面代码的底部以...

  • 给你的网页添加动画效果

    当我们使用CSS3动画时，...Disney的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实，风格，和动画的物质叠加起来创建生动的角色，使得观众觉得真实而有趣。 《动画的12个

  • html tab选项卡动画,基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效。这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs。效果图如下：实现的代码。html代码：ConnectGiftsBoxesPrintsFun12345(function() {[].slice.call( ...

  • css 上滑隐藏动画,CSS实现隐藏搜索框功能(动画正反向序列)

    属性即要应用过渡动画的属性 时间曲线是动画的速度变化，比如开始慢、中间快、结束慢，可以比匀速运动更好看更平滑 延迟时间即达到触发条件后延迟一段时间再触发动画，可以用来实现多个动画有先后顺序地执行 ...

  • html网页设计实训日志,网页制作实习日志

    网页制作实习日志实习日志就是实习生在实习这段时间记录所学到的东西一种文本。下面是关于网页制作实习日志的内容，欢迎阅读！网页制作实习日志1具体情况通过这半年的学习实践中 和老师的指导下以大量明晰的操作步骤...

  • 智慧园区3D可视化解决方案PPT(24页).pptx

    在智慧园区建设的浪潮中，一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点，通过信息化平台与智能硬件的深度融合，为园区带来前所未有的变革。 首先，智慧园区综合解决方案以提升园区整体智能化水平为核心，打破了信息孤岛现象。通过构建统一的智能运营中心（IOC），采用1+N模式，即一个智能运营中心集成多个应用系统，实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”，利用大数据可视化技术，将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上，管理者可直观掌握园区运行状态，实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒，还大幅提升了管理效率，让园区管理更加精细化、智能化。 更令人兴奋的是，该方案融入了诸多前沿科技，让智慧园区充满了未来感。例如，利用AI视频分析技术，智慧园区实现了对人脸、车辆、行为的智能识别与追踪，不仅极大提升了安防水平，还能为园区提供精准的人流分析、车辆管理等增值服务。同时，无人机巡查、巡逻机器人等智能设备的加入，让园区安全无死角，管理更轻松。特别是巡逻机器人，不仅能进行360度地面全天候巡检，还能自主绕障、充电，甚至具备火灾预警、空气质量检测等环境感知能力，成为了园区管理的得力助手。此外，通过构建高精度数字孪生系统，将园区现实场景与数字世界完美融合，管理者可借助VR/AR技术进行远程巡检、设备维护等操作，仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是，智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程，实现降本增效。例如，智能库存管理、及时响应采购需求等举措，大幅减少了库存积压与浪费；而设备自动化与远程监控则降低了维修与人力成本。同时，借助大数据分析技术，园区可精准把握产业趋势，优化招商策略，提高入驻企业满意度与营收水平。此外，智慧园区的低碳节能设计，通过能源分析与精细化管理，实现了能耗的显著降低，为园区可持续发展奠定了坚实基础。总之，这一综合解决方案不仅让园区管理变得更加智慧、高效，更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境，是未来园区建设的必然趋势。

  • labelme标注的json转mask掩码图，用于分割数据集 批量转化，生成cityscapes格式的数据集

    labelme标注的json转mask掩码图，用于分割数据集 批量转化，生成cityscapes格式的数据集

  • （参考GUI）MATLAB GUI漂浮物垃圾分类检测.zip

    （参考GUI）MATLAB GUI漂浮物垃圾分类检测.zip

Global site tag (gtag.js) - Google Analytics