环境动画在网页设计中的原理与实现（第一部分）
创建动画可能很棘手。过多会分散注意力，过少则设计显得平淡。环境动画是中间路线——微妙、缓慢移动的细节，能增添氛围而不抢风头。在本文中，网页设计先驱Andy Clarke介绍了环境动画的概念，并解释了如何实现它们。
与基于时间线的动画（通过事件序列讲述故事）或交互动画（当有人触摸某物时触发）不同，环境动画是那种你可能一开始不会注意到的被动运动。但是，它们以微妙的方式使设计看起来生动。
在环境动画中，元素可能会在颜色之间微妙过渡、缓慢移动或逐渐改变位置。元素可以出现和消失、改变大小，或者缓慢旋转。
环境动画不会侵入；它们不要求关注、不会分散注意力，也不会干扰用户在使用产品或网站时试图实现的目标。它们也可以很有趣，当用户注意到它们时会让人微笑。这样，环境动画为品牌个性增添了深度。
选择要动画化的元素
页面上或图形中的一切并不都需要移动，设计环境动画的一部分是知道何时停止。诀窍是选择那些自然适合微妙运动的元素，而不是将运动强加到不合适的地方。
自然运动提示
在决定要动画化什么时，我会寻找自然运动提示，并思考某物在现实世界中何时会自然移动。我问自己：“这个东西有重量吗？"，“它灵活吗？"，以及"它在现实生活中会移动吗？“如果答案是"是”，那么如果它移动，可能会感觉正确。
氛围，而非动作
我经常选择那些能增添氛围但不争夺注意力的元素或装饰性细节。环境动画不是向某人示意他们应该看哪里；它们是关于创造一种情绪的。
趣味性和乐趣
我最喜欢环境动画的一点是它们如何为设计带来乐趣。它们是通过有趣的细节展示个性的机会，当人们注意到它们时会让人微笑。
牢记层次结构
运动会吸引眼球，即使微妙的运动也有视觉重量。因此，我将最明显的动画保留给需要产生最大影响的元素。
应用克制
仅仅因为某物可以动画化并不意味着它应该被动画化。在创建环境动画时，我会研究图像并记录那些微妙运动可能增添生机的元素。我牢记这些问题：“我正在讲述什么故事？运动在何处有帮助，何时可能变得分散注意力？”
记住，克制不仅仅是做得少；它是关于更少地做正确的事情。
分层SVG以导出
当元素挤在单个SVG文件中时，导航可能是一场噩梦。定位特定路径或组可能感觉像大海捞针。
这就是为什么我分层开发SVG，一次导出一组元素并优化——始终按照它们在最终文件中出现的顺序。这让我可以通过将每个清理过的部分粘贴到我的SVG文件中来逐步构建主SVG。
我从导出背景元素开始，优化它们，添加类和ID属性，并将它们的代码粘贴到我的SVG文件中。
然后，我导出那些通常保持静态或作为组移动的元素，比如酋长和Quick Draw McGraw。
在最终导出、命名和添加细节之前，比如Quick Draw的烟斗、眼睛和他石化的火花。
由于我从相同大小的画板导出每个图层，我不需要担心对齐或定位问题，因为它们都会自动就位。
实现环境动画
您不需要动画框架或库来向项目添加环境动画。大多数时候，您只需要一个准备充分的SVG和一些周到的CSS。
但是，让我们从SVG开始。关键是逻辑地分组元素并给它们有意义的类或ID属性，这些属性在CSS中充当动画钩子。对于这个动画，我给每个移动部分自己的标识符，如#quick-draw-tail或#chief-smoke-2。这样，我可以精确地定位我需要的内容，而无需像垃圾桶里的浣熊一样挖掘DOM。
一旦SVG设置好，CSS就完成了大部分工作。我可以使用@keyframes进行更具表现力的运动，或使用animation-delay模拟随机性和错开时间。诀窍是保持一切微妙，并记住我不是为了吸引注意力而动画化，我是为了氛围而动画化。
请记住，大多数环境动画会连续循环，因此它们应该是轻量级且性能友好的。当然，尊重要求较少运动的用户是良好实践。您可以将动画包装在@media prefers-reduced-motion查询中，以便它们只在受欢迎时运行。
|
|
这是一个易于实现的小细节，它使您的设计更具包容性。
环境动画设计原则
如果您希望动画感觉像环境，更像氛围而非动作，遵循一些原则会有所帮助。这些不是硬性规定，而是我在动画化烟雾、火花、眼球和眉毛时学到的东西。
保持动画缓慢平滑
环境动画应该感觉轻松，因此使用较长的持续时间并选择感觉有机的缓动曲线。我经常使用ease-in-out，但当您想要更轻松的感觉和自然界中可能找到的运动时，三次贝塞尔曲线也可能有帮助。
无缝循环并避免突然变化
硬重置或突然跳跃可能破坏情绪，因此如果动画循环，请确保它平滑循环。您可以通过匹配开始和结束关键帧，或通过将animation-direction设置为alternate值来实现这一点，以便动画向前播放，然后向后播放。
使用分层构建复杂性
单个动画可能很无聊。五个微妙的动画，每个在不同的层上，可能感觉丰富而生动。将其视为构建声音混合——您需要节奏、音调和时间的变化。在我的动画中，火花以不同的间隔闪烁，烟雾向上卷曲，羽毛摇摆，眼睛瞪大。没有什么是主导的，每个运动在场景中扮演其小角色。
避免分散注意力
环境动画的重点是它不占主导地位。它是一个背景元素，而不是行动号召。如果某人的眼睛被挑起的眉毛吸引，那可能太多了，所以调回动画，直到它感觉像是只有您真正看时才会捕捉到的东西。
考虑可访问性和性能
检查prefers-reduced-motion，不要假设每个人的设备都能处理复杂的动画。SVG和CSS是轻量级的，但像模糊滤镜和阴影以及复杂的CSS动画这样的东西仍然可能给低功耗设备带来负担。当动画纯粹是装饰性的时，考虑添加aria-hidden="true"以防止它弄乱可访问性树。
快速绘制
环境动画就像一道佳肴上的调味料。它是您几乎注意不到的那撮盐，但当它消失时您会想念。它不喊叫，它低语。它不引领，它徘徊。它是漂浮的烟雾、摇摆的羽毛和您在眼角捕捉到的火花。当它做得好时，环境动画为设计增添个性而不要求掌声。
现在，我意识到不是每个人都需要动画化卡通角色。因此，在第二部分中，我将分享如何为几个最近的客户项目创建动画。直到下次，如果您正在制作插图或使用SVG，请问自己：如果这是真的，什么会移动？然后只动画化那个。让它缓慢而柔和。保持环境。
您可以在CodePen上查看完整的环境动画代码。