顶部右侧 | 自行修改 顶部左侧内容
当前位置:网站首页 > SEO技术 > 正文

网页动画的十二原则

seo秀 2019-05-25 18 浏览 0 评论

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。,动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。,迪士尼经过基础工作练习的长时间累积,在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。,

作为前端的设计师和工程师,我们用 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 方面,缓入缓出很容易被理解,在一个动画过程中计时功能是一种描述变化速率的方式。

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

Codepen 上的源代码

相关推荐

做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
今日头条seo如何优化?如何做搜索靠前呢?
今日头条seo如何优化?如何做搜索靠前呢?

一、“头条seo”是什么?头条seo指的是在今日头条app上用关键词搜索结果排名靠前。做百度有所谓的“百度seo”,做谷歌有所谓的“谷歌seo”,那么作为头条这...

4天前 seo秀

如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
百度官方分享:让蜘蛛抓取网页的四种方式
百度官方分享:让蜘蛛抓取网页的四种方式

百度在微信上分先过来四种让蜘蛛收录网页的四种方式,主推推送、sitemap、手工提交、自动推送。那是什么意思呢?1、主动推送:是最为快速的提交方式,建议您将站点...

3个月前 (06-03) seo秀

2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
关键字的优化需要注意什么?
关键字的优化需要注意什么?

网站关键字可以带来更多的流量到您的网站,可以带来更好的排名为你的网站在搜索引擎。随着互联网科技的不断发展,我们在我们的日常生活中发现,在网络中起着非常重要的作用...

3个月前 (06-02) seo秀

SEO前景怎么样?

经济低迷,做付费推广你们不心疼吗?还是做SEO吧!对于利用搜索引擎进行的推广营销,这是任何企业都不可以忽略的。在做搜索引擎营销,即SEM,以百度为例子,SEM包含:知道、地图、文库、百科、经验等以及付...

欢迎 发表评论: