这里的动效不再仅仅是指单一的动画视频。从全局的图像移动到小的悬停效果，动画的触感现在几乎随处可见。同时，动效开始越来越时髦、有趣，并且对提升用户体验也大有帮助。
使用动效的障碍已经开始减少，随着大多数用户使用更高速的网络，从简单的动作或使用gif，动画已经成为实用和有用的网站设计工具和必不可少的缘故。
让我们开始吧!
动效基础（Animation Basics）
动效是指以静止或二维形式创建的东西被“赋予生命”，并似乎以遵循物理定律的方式移动。它可以是卡通人物在屏幕上走过的方式，或者是应用程序图标在Mac桌面上加载时像球一样弹跳的方式。
一个几乎与动效同义的词是——迪士尼。在20世纪80年代初，两家公司的顶级动画师写了一本书，详细介绍了动画的12条原则。弗兰克·托马斯和奥利·约翰斯顿创作的《生命的幻觉：迪士尼动画》至今仍为动画提供了框架。
1. 压扁和伸展
2. 预期
3. 分期
4. 直截了当地采取行动，并摆出姿势
5. 跟进和重叠操作
6. 慢进慢出
7. 弧
8. 次要行动
9. 计时
10. 夸张
11. 实体图和实体姿势
12. 上诉
网页设计中的动效通常以GIF, CSS, SVG, WebGL或视频的形式出现。它们可以是任何东西，从鼠标悬停在单词上时出现的简单下划线，到全屏视频或背景图像。与任何其他设计技术一样，动画可以是微妙的、细节的，或者它们可能就直接展现在你面前，你很难不去注意到。
永不过时的动效技术（Timeless Animation Techniques）
当说到互联网领域的动效时，什么是有效的、什么是无效的，你看到以及感觉到的可能比解释起来更加统一。你只要知道这个动作是正确的，它是有效的；反之就是速度太快或太慢，你也马上可以知道。
为了帮助指导你在使用动效方面的决策，你可能想要避免一些流行的元素，坚持一些永恒的动画设计元素。这些技术提供了一个基本的指南，可以帮助你创建一些可用的和视觉上有趣的东西。
导航：使用微动效展示用户在点击或点击之前激活一个元素或菜单。
悬停状态：另一个使用到微动效的地方，可以通过提示什么是可操作的来促进用户体验。
视频：这个广泛使用的动效形式可以是一种吸引人的内容类型，有助于用设计讲述故事。
滑动过渡：在Banner中很流行，这种方法通过滚动或自动移动图像或插图（这里的技巧是使每个过渡尽可能流畅自然）。
滚动：从视差效果到更复杂的动画过渡，滚动是添加细微运动来表示内容变化的好地方。
背景动画：细微的运动元素可以使静态图像更有趣，并为用户提供惊喜。
欢迎或加载动画：许多欢迎页面动画可以减少加载问题导致的用户焦虑。操作得当，动效有趣，它不会让用户感到厌烦，相反可以分散用户对延迟的注意力。
讲故事的动画：动画可以帮助为其中的内容设置场景，并且可以帮助用户在进入故事的过程中更长时间地停留在网站上。
大小动效间的对比（Large vs. Small Animations）
说到网站上的动效，它可以分为两个同样容易理解的类别：大型和小型。在小型动效中还有另一个类别——微动画。
大型动效是有比例的内容，通常是以带有时间的视频的形式出现，占据了屏幕的很大一部分，大部分以短片的形式被使用。这些动画作为整体设计的焦点，用户通常不需要执行任何操作就能看到动态动画。如果你在Studio Meta网站上仔细观察，你会发现每个大图片在你阅读的时候都在放大。
小型动效是你开始与网站互动时才可能发现的“小惊喜”。它可能以悬浮状态、微小的装饰或可用性指南或工具的形式出现。小型动效有助于为整体视觉提供兴趣点，但不太可能成为设计的重点。在 Henry Brown 的网站设计中，如果你仔细看，插图中的眼睛实际上在眨眼。
别忘了微动效。这些是属于用户界面的超短动效元素，帮助人们完成网站之旅。它可以是任何东西，从悬停动作到表示滚动的闪烁箭头。最好的微动效是用户体验中几乎看不见的部分，但如果你需要帮助或信息，它们就在那里。
何时使用动效（When to Use Animation）
动效可以是你的设计工具包中的一个很棒的小技巧，但并不是每个项目都适用。动效应该是流畅和无缝的，而不是跳跃或机械的。它需要为用户服务，而不是妨碍内容。
使用动效的主要原因是增加可用性。简单的动画可以成为很好的指导工具，帮助人们了解在网站中点击什么按钮或下一步去哪里。许多设计师使用复杂的滚动效果，将简单的动画与用户的滚动或单击操作相结合（比如从简单的弹跳图标到弹出并显示“向下滚动”的文字)。
可用性有几种形式：
· 沟通功能或如何使用网站
· 将用户吸引到整体设计或特定元素
· 增加互动和参与度
· 显示更改，例如正确填写表单或突出显示可单击的元素
· 建立更好或更强的情感联系
· 创建流程或将用户引导到行动号召
· 改善整体用户体验
动效也可以是一个很好的“装饰”。有时动画元素的目标是纯粹的视觉效果，这是可以接受的。这种装饰性的动效可以帮助讲述一个故事，或者在界面和用户之间建立一种情感联系。动效的目的可以是激发视觉兴趣，并让用户在更长的时间内停留在你的网站。
当创建一个纯视觉动效时，考虑它实际的目的是什么，想想你希望用户通过这些动效做什么，它应该是有趣的还是惊喜的？它是专为分享而设计的独特内容吗？即使是纯粹的视觉效果也应该有一个目标。
总结
说到动效，我们的经验法则是：好的动效会让用户在网站上获得更好的用户体验。这可以是一种情感联系的形式——比如一种有趣的、积极的体验——或者是让网站更容易使用。
动效是一种有趣的技术，它已经成为各种应用的标准。
----图文来自：design shack