环境动画在网页设计中的实践应用（第二部分）
动作设计可能很棘手：过多会分散注意力，过少则显得平淡。环境动画处于中间位置。它们是微妙、缓慢移动的细节，能够增添氛围而不喧宾夺主。在系列文章的第二部分中，网页设计先驱Andy Clarke展示了环境动画如何为任何网站设计增添个性。
首先，回顾一下：
环境动画是那种你可能一开始不会注意到的被动运动。然而，它们以微妙的方式使设计变得生动。元素可能会在颜色之间微妙过渡，缓慢移动，或逐渐改变位置。元素可以出现和消失，改变大小，或者缓慢旋转，为品牌个性增添深度。
在第一部分中，我通过将Quick Draw McGraw漫画书的封面重新创建为CSS/SVG动画来说明了环境动画的概念。但我知道不是每个人都需要动画卡通角色，所以在第二部分中，我将分享环境动画在三个非常不同的项目中的工作原理：Reuven Herman、Mike Worth和EPD。每个项目都展示了动作如何在不主导页面的情况下增强品牌标识、个性和故事讲述。
Reuven Herman
洛杉矶作曲家Reuven Herman不仅仅想要一个展示他作品的网站。他希望网站能够传达他的个性以及客户与他合作时的体验。与音乐家合作总是充满创造性的刺激：他们批判性强，参与度高，且充满想法。
Reuven的古典和爵士背景让我想起了专辑封面设计师Alex Steinweiss的作品。
受到Alex为超过2500个独特封面设计带来的深度和纹理的启发，我想将他的技术融入我为Reuven创作的插图中。
为了使Reuven的插图生动起来，我遵循了几个核心的环境动画原则：
- 保持动画缓慢而平滑。
- 无缝循环并避免突然变化。
- 使用分层来构建复杂性。
- 避免分散注意力。
- 考虑可访问性和性能。
您可以在我的实验室中查看这个环境动画。对于Reuven的网站：
- 乐谱谱线在波浪形和直线状态之间变形。
- 音符以不同的速度漂移，创造出类似视差的效果深度。
- 钢琴键看起来像是在漂浮。
我的第一步总是优化SVG以进行动画制作，一次导出一组元素并进行优化——始终按照它们在最终文件中出现的顺序，并逐步构建主SVG。从背景开始，我首先导出了波浪状态的乐谱谱线。
动画的第一步是在状态之间变形谱线。它们由六条带有多彩描边的路径组成。我从波浪线开始：
1
2
3
4
5
6
7
8
9
|
<!-- Wavy state -->
<g fill="none" stroke-width="2" stroke-linecap="round">
<path id="p1" stroke="#D2AB99" d="[…]"/>
<path id="p2" stroke="#BDBEA9" d="[…]"/>
<path id="p3" stroke="#E0C852" d="[…]"/>
<path id="p4" stroke="#8DB38B" d="[…]"/>
<path id="p5" stroke="#43616F" d="[…]"/>
<path id="p6" stroke="#A13D63" d="[…]"/>
</g>
|
尽管CSS现在支持路径点之间的动画，但每个状态中的点数需要匹配。GSAP没有这个限制，可以在具有不同点数的状态之间进行动画，使其成为这类动画的理想选择。我定义了一组新的直线路径：
1
2
3
4
5
6
7
8
9
|
<!-- Straight state -->
const Waves = {
p1: "[…]",
p2: "[…]",
p3: "[…]",
p4: "[…]",
p5: "[…]",
p6: "[…]"
};
|
然后，我创建了一个GSAP时间线，该时间线在六秒内前后重复：
1
2
3
4
5
6
7
8
9
|
const waveTimeline = gsap.timeline({
repeat: -1,
yoyo: true,
defaults: { duration: 6, ease: "sine.inOut" }
});
Object.entries(Waves).forEach(([id, d]) => {
waveTimeline.to(`#${id}`, { morphSVG: d }, 0);
});
|
另一个环境动画原则是使用分层来构建复杂性。可以将其想象成构建声音混音。你希望节奏、音调和时间上有变化。在我的动画中，三行音符以不同的速度移动：
1
2
3
|
<path id="notes-row-1"/>
<path id="notes-row-2"/>
<path id="notes-row-3"/>
|
每行动画的持续时间也使用GSAP定义，从100到400秒，为整体动画提供视差风格的效果：
1
2
3
4
5
6
7
|
const noteRows = [
{ id: "#notes-row-1", duration: 300, y: 100 }, // slowest
{ id: "#notes-row-2", duration: 200, y: 250 }, // medium
{ id: "#notes-row-3", duration: 100, y: 400 } // fastest
];
[…]
|
下一层包含由钢琴键投射的阴影，该阴影围绕其中心缓慢旋转：
1
2
3
4
5
6
7
8
9
|
gsap.to("shadow", {
y: -10,
rotation: -2,
transformOrigin: "50% 50%",
duration: 3,
ease: "sine.inOut",
yoyo: true,
repeat: -1
});
|
最后是钢琴键本身，它们同时旋转，但方向与阴影相反：
1
2
3
4
5
6
7
8
9
|
gsap.to("#g3-keys", {
y: 10,
rotation: 2,
transformOrigin: "50% 50%",
duration: 3,
ease: "sine.inOut",
yoyo: true,
repeat: -1
});
|
完整的动画可以在我的实验室中查看。通过深思熟虑地分层运动，网站感觉生动而不主导内容，这与Reuven的能量完美匹配。
Mike Worth
正如我之前提到的，不是每个人都需要动画卡通角色，但我偶尔会这样做。Mike Worth是一位艾美奖获奖的电影、视频游戏和电视作曲家，他请我设计他的网站。在这个项目中，我创作并插画了猩猩冒险家Orango Jones的角色。
Orango被证明是环境动画的完美主题，并出现在Mike网站的每个页面上。他带领读者进行冒险，沿途他们可以体验Mike的音乐。
对于Mike的"关于"页面，我想将环境动画与交互结合起来。Orango在一个洞穴里，他发现了一块有模糊标记的石碑，这些标记作为导航辅助工具，可以引导到Mike网站的其他地方。插图中包含一个隐藏功能，一个彩蛋，当有人按下Orango的放大镜时，移动的光束会流入洞穴并照射到石碑上。
我的SVG是经过精心结构的，从后到前包括洞穴、光束、Orango和导航：
1
2
3
4
5
6
|
<svg data-lights="lights-off">
<g id="cave">[…]</g>
<path id="light-shaft" d="[…]"></path>
<g id="orango">[…]</g>
<g id="nav">[…]</g>
</svg>
|
我还添加了一个锚点围绕一个隐藏的圆圈，将其定位在Orango的放大镜上方，作为一个大的点击目标，通过更改SVG上的data-lights值来切换光束的开关：
1
2
3
|
<a href="javascript:void(0);" id="light-switch" title="Lights on/off">
<circle cx="700" cy="1000" r="100" opacity="0" />
</a>
|
然后，我在CSS中添加了两个后代选择器，根据data-lights的值调整光束的不透明度：
1
2
3
4
5
6
7
8
9
|
[data-lights="lights-off"] .light-shaft {
opacity: .05;
transition: opacity .25s linear;
}
[data-lights="lights-on"] .light-shaft {
opacity: .25;
transition: opacity .25s linear;
}
|
缓慢而微妙的旋转为光束增添了自然运动：
1
2
3
4
5
|
@keyframes shaft-rotate {
0% { rotate: 2deg; }
50% { rotate: -2deg; }
100% { rotate: 2deg; }
}
|
这仅在灯光切换处于活动状态时可见：
1
2
3
4
|
[data-lights="lights-on"] .light-shaft {
animation: shaft-rotate 20s infinite;
transform-origin: 100% 0;
}
|
在开发任何环境动画时，考虑性能至关重要，因为即使CSS动画是轻量级的，像模糊滤镜和投影这样的特性仍然可能对低功耗设备造成压力。考虑可访问性也很关键，因此要尊重某人的prefers-reduced-motion偏好：
1
2
3
4
5
6
7
8
|
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
|
当动画功能纯粹是装饰性的时，考虑添加aria-hidden=“true"以防止其扰乱可访问性树：
1
2
3
|
<a href="javascript:void(0);" id="light-switch" aria-hidden="true">
[…]
</a>
|
在Mike的Orango Jones中，环境动画从微妙的氛围转变为有趣的故事讲述。光束和柔和的交互将叙事编织到设计中而不抢夺焦点，证明动画可以同时支持品牌标识和用户体验。在我的实验室中查看此动画。
EPD
离开作曲家的话题，EPD是一家房地产投资公司。他们委托我为新网站设计创意概念。快速搜索房地产投资公司通常会让你对它们可互换的网站设计感到失望。它们包括全宽横幅，带有模糊的通用城市天际线或不同种族的人握手的库存照片。
对于EPD，我想开发一种公司可以拥有的独特视觉风格，因此我提出了图形化、风格化的天际线，这些天际线既反映了EPD的品牌，也反映了其全球投资组合。我使用各种大小的圆圈制作了它们，这些圆圈让人想起公司的标志。
环境动画的重点在于它不占主导地位。它是一个背景元素，而不是号召性用语。如果某人的眼睛被它吸引，那可能就太多了，所以我会减弱动画，直到它感觉像是只有在你真正看的时候才会注意到的东西。我创建了三个天际线设计，包括迪拜、伦敦和曼彻斯特。
在每一个环境动画中，轮子都会旋转，大圆圈以随机间隔改变颜色。
为了开始优化此插图以进行动画制作，我导出了包含除轮子之外的每个元素的基础路径：
1
2
3
4
5
6
|
<g id="banner-base>
<path d="[…]"/>
<path d="[…]"/>
<path d="[…]"/>
[…]
</g>
|
接下来，我导出了一个包含要改变颜色的圆圈元素的层。
1
2
3
4
5
6
|
<g id="banner-dots">
<circle class="data-theme-fill" […]/>
<circle class="data-theme-fill" […]/>
<circle class="data-theme-fill" […]/>
[…]
</g>
|
我再次使用GSAP选择一组圆圈，这些圆圈像灯光一样在天际线上闪烁：
1
2
3
4
5
|
function animateRandomDots() {
const circles = gsap.utils.toArray("#banner-dots circle")
const numberToAnimate = gsap.utils.random(3, 6, 1)
const selected = gsap.utils.shuffle(circles).slice(0, numberToAnimate)
}
|
然后，在两秒的间隔内，这些圆圈的填充颜色从蓝绿色强调色更改为与我的插图其余部分相同的灰白色：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
gsap.to(selected, {
fill: "color(display-p3 .439 .761 .733)",
duration: 0.3,
stagger: 0.05,
onComplete: () => {
gsap.to(selected, {
fill: "color(display-p3 .949 .949 .949)",
duration: 0.5,
delay: 2
})
}
})
gsap.delayedCall(gsap.utils.random(1, 3), animateRandomDots) }
animateRandomDots()
|
结果是一个轻轻闪烁的天际线，仿佛城市本身是活着的。最后，我旋转了轮子。在这里，不需要使用GSAP，因为仅使用CSS旋转就可以实现：
1
2
3
4
|
<g id="banner-wheel">
<path stroke="#F2F2F2" stroke-linecap="round" stroke-width="4" d="[…]"/>
<path fill="#D8F76E" d="[…]"/>
</g>
|
1
2
3
4
5
6
7
8
9
|
#banner-wheel {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: rotateWheel 30s linear infinite;
}
@keyframes rotateWheel {
to { transform: rotate(360deg); }
}
|
CSS动画是轻量级的，非常适合简单的重复效果，如淡入淡出和旋转。它们易于实现且不需要库。另一方面，GSAP提供了更多的控制，因为它可以处理路径变形和序列时间线。选择使用哪一个取决于我是需要GSAP的精确度还是CSS的简单性。
通过保持轮子转动和圆圈发光，天际线动画保持在背景中，同时赋予设计独特的感觉。它们避免了库存照片的陈词滥调，同时强化了EPD的品牌标识，并证明即使在像房地产投资这样保守的行业中，环境动画也可以增添氛围而不减损信息。
总结
从Reuven的音乐纹理到Mike的叙事驱动的Orango Jones，再到EPD的发光天际线，这些项目展示了环境动画如何适应上下文。有时它纯粹是氛围性的，如漂移的音符或旋转的轮子；其他时候，它与交互无缝融合，奖励好奇心而不妨碍。
无论它是呼应作曲家的即兴创作，作为有趣的叙事工具，还是为保守行业增添微妙的特色，同样的原则都成立：
保持动作缓慢、无缝且有目的性，使其增强而不是分散设计的注意力。