当前位置:首页 > 资讯中心 > 帮助中心

网页设计中动画方法的运用

时间:2019-01-22 来源:龙睿科技

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。

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


挤压和拉伸 (Squash and stretch)


这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时,碰击到地面会变扁,恢复的时间会越来越短。

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

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

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


预备动作 (Anticipation)


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

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

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


演出布局 (Staging)


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

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

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

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


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


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

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

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


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


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

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

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

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


缓入缓出 (Slow In and Slow Out)


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

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

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


弧线运动 (Arc)


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

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

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


次要动作 (Secondary Action)


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

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


时间节奏 (Timing)


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

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

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


夸张手法 (Exaggeration)


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

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


扎实的描绘 (Solid drawing)


当动画对象在三维中应该加倍注意确保它们遵循透视原则。因为人们习惯了生活在三维世界里,如果对象表现得与实际不符,会让它看起来很糟糕。这个web前端开发中,浏览器对三维变换的支持已经不错,这意味着我们可以在场景里旋转和放置三维对象,浏览器能自动控制它们的转换。


吸引力 (Appeal)


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

相关新闻

RELATED

03/14
2023
​随着互联网的快速发展,越来越多的企业意识到建立一个好的网站对于企业的重要性。一个好的网站不仅可以为企业带来良好的品牌形象和商业价值,还可以为企业开辟更多的商机和客户资源。那么,建立一个好的网站真的能给企业带来好处吗?
03/13
2023
在国际贸易市场中,一个优秀的外贸网站是建立公司品牌和扩大业务的重要方式。然而,一个优秀的外贸网站并不是一朝一夕可以建立的,需要注意以下几点
03/11
2023
网站需要专业人员维护,保证安全、稳定、用户体验和更新升级,为企业带来商业价值。
03/10
2023
在数字化时代,拥有一个优秀的网站已经成为了企业发展的重要手段之一。但是对于许多没有经验的个人和企业而言,网站建设可能是一项繁琐的任务。下面介绍网站建设需要的几个步骤以及为什么建议找专业开发公司。
10/15
2022
深圳龙睿科技提供商铺转让平台开发定制,有多个成熟的成功案例,后台重要功能:商铺信息管理、业务保护、业务跟进、找店开店一键匹配、开店找店信息推送、在线支付系统、黑名单管理、广告管理等
01/07
2021
什么样的网站才有前途,很多需要网站建设的客户,最为关心往往是网站建设价格,却忽视了网站在制作过程中需要的要素,要知道,一个优秀的网站能够给企业或者个人在互联网带来相当大的帮助和影响。当然,你的网站内容要齐全,主题要鲜明,如果从一开始网站就是不完美的,那么,也许,从小的说,会影响网站的优化,从大的说,在互联网上,你将无所作为!
  • 在线网络培训 全程网络培训服务
  • 优质在线服务 优质的在线服务
  • 正确选择龙睿网站建设 选择我们是正确的
  • 提供VIP网站建设服务 提供VIP服务

Copyright © 2016-2023 lonrui.COM 龙睿科技 版权所有 粤ICP备17011063号

粤公网安备粤公网安备 44030902000135号