html5网页设计工具给设计师的网页动画设计基本指南

动画早就不是早期人们印象中的低龄向玩物了，从从前的卢卡斯影业到本日的工业光魔，动画技能证明了它可以实现无限的可能性；从70年代的高达、 EVA到之后的宫崎骏、皮克斯，动画的深度和内涵也早已不弱于电影和文学作品。
而随着技能的积累，网页中的动画也已经是各处着花，它时尚，有趣，也人性化。
不断呈现的新技能和新工具令网页动画设计的门槛逐年降落，高速网络也使得俊秀的动效和纯萌的GIF险些是无缝地加载到网页中。
本日，我们可以斩钉截铁地说，动画已经是最常见也是最实用的网页设计工具之一了。

根本知识

将静止或者二维平面上的物体授予活气与活力，让它们以符合或者贴近物理定律的办法来运动，这便是我们所熟知的动画。
Mac 桌面上那个著名的图标跳动动画便是最范例的例子之一，那种仿照皮球在地上弹跳的效果显得真实而有质感，这种动画设计是遵照著名的动画设计12原则的。

对动效或者说动画最熟习的，无疑是迪士尼。
Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造本日动画的12个原则：

html5网页设计工具给设计师的网页动画设计基本指南 Vue.js

挤压和拉伸预期登台连续动作和姿态对应缓进缓出弧形运动次要动作时序夸年夜立体刻画吸引力

文末干系链接中，会附上关于这12原则的干系文献。

网页动画的实现办法很多，最常见的是利用Gif图，CSS，SVG，WebGL 以及视频。
但是和动漫不同，网页中的动画可以是任何元素，小到下划线，大到背景和全体页面，它可以随着页面加载而涌现，也可能是鼠标移动到某个位置上之后被触发。
和其他的设计手腕相似，动画可以是非常奇妙、触动人心的，也可以是开门见山、清晰直不雅观的。
以是，最主要的是看你怎么利用动效，是在得当的时候给人会心一击，还是摆在显眼的位置，令人不会错过。

新兴的趋势

当我们谈及网页动效的时候，它和动漫、CG、电影、游戏中的动画，是截然不同的。
当我们在网页的语境之下提及动画和动效的时候，它作为一个范例的设计趋势和设计手腕，节制是是最关键的成分。
小巧大略的动效在网页中会更具吸引力，也更加有趣，那些真正“隐形”的动效会让用户难以察觉，却更好地让他们有更好的体验。
但是显著而抓人眼球的繁芜动效也很主要，它们会强化设计感。
不过在动画和动效的设计上，同等性很主要，过于繁芜的方案可能会让整体效果混乱。

让动画成为设计趋势，实在是全体设计圈的走向造成的。
扁平化和极简风的盛行开来，网页设计确实简约了很多，但是用户须要更多的信息来见告他们该当怎么做，而动画便是最好的方案——无需影响整体美感就可以给用户以足够的勾引。
纵然是最大略的设计，动画的存在都能给予用户以解释和指引，这样条件下出身的动效，在大略和易用性之间达成了平衡。

动画其实在后端和用户端和有很多不错的影响。
首先是大家再也不须要用Flash来事先繁芜的动画了，它的实现办法也相称的自由和多样，本日的动画不会像曾经的Flash等技能那样拖慢网站的呈现速率乃至影响做事器，加载速率飞快，体验精良。

大小动画的对抗

大和小的竞争无处不在，纵然是动画的领域也同样是如此。

规模较大的动画常常因此视频的形式存在的，它们常日会占满整屏或者一个比较关键的部位，循环、简练是它们的特色。
这些动画为全体设计创造了焦点，用户纵然没有实行任何操作，也能看到它们。
以Studio Meta的网站为例，当你阅读文案的时候，没一张大图都会逐步缩放。

小动效会涌如今网站的各个角落，当你同网站进行交互的时候，会创造它们的存在。
这些动效可能会在光标悬停的时候触发，可能是一个指引性的标识，也可能以更加奇妙的办法呈现。
这些眇小的动效会对整体的美感产生影响，在 Henry Brown 的这个案例中，动画就非常的小而奇妙，仔细不雅观察，你会创造人物的眼睛在闪烁。

什么时候利用动画

当我们谈及每一种设计趋势的时候，都须要磋商一个主要的问题：什么时候才能利用它们。
动画可能是一种非常讨巧的设计手段，它有用，但是并非适用于每一个设计项目。
动画该当是平滑无缝的，而非滞塞机器的，它的做事工具是用户，并且和其他内容的呈现形式不一样。

利用动画和动效的紧张目的是提高网页的可用性。
大略的动效可以有效的勾引用户，帮助他们理解点击之后会去怎么样，纵然是须要利用繁芜的视差滚动动效，设计师也会搭配一些大略的动画来作为勾引和赞助之用。

可用性的呈现形式：

阐明功能，展示网站的运作呈现变革，比如展示可点击的元素，或者表单那的精确填写办法创建流程，或者勾引用户实行动作召唤类的操作

利用动效的第二个情由是出自美学需求。
动画和动效无疑是拥有强装饰性的元素，如果某个动效是出于视觉装饰的浸染而进行设计的话，无疑是可以接管的。
这种装饰性的动画不仅有助于讲述故事，而且可以建立用户界面之间的情绪联系，它可以通过视觉上的变革引发用户的兴趣，在不断的交互中让用户勾留更长的时间，不断回来。

如果你要创建纯粹的动画，那么你楈枒仔细思考它能做什么，会带来什么。
你希望用户有什么样的反馈？想分享一些独特的内容，还是用动效给用户带来愉悦的体验？这很主要。

一些资源

准备为网站加入动画和动效么？接下来的一些文章或者网站可能会给你一些帮助。
(这些文章都是英文的，恩)

《生命的错觉》会见告你一些关于动画的12个基本原则

《网页动画的运作》是一个列表，个中的资源会见告你网页动画是如何运作的

《CSS动效新手指南》是见告你如何利用CSS属性来制作动画的