网页环境动画实战应用：SVG与CSS动画技术解析

本文深入探讨环境动画在网页设计中的实际应用，详细解析了使用SVG和CSS实现微妙动画效果的技术方案，包括路径变形、分层动画和时间轴控制等核心技巧，帮助设计师为网站增添个性而不分散用户注意力。

环境动画在网页设计中的实际应用（第二部分）

动作设计可能很棘手：过多会分散注意力，过少则显得平淡。环境动画处于中间位置。它们是微妙、缓慢移动的细节，能够增添氛围而不抢风头。在系列文章的第二部分中，网页设计先驱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

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的发光天际线，这些项目展示了环境动画如何适应上下文。有时它纯粹是氛围性的，如漂移的音符或旋转的轮子；其他时候，它与交互无缝融合，奖励好奇心而不妨碍。

无论它是呼应作曲家的即兴创作，作为有趣的叙事手段，还是为保守行业增添微妙区别，同样的原则都成立：

保持动作缓慢、无缝且有目的性，使其增强而不是分散设计的注意力。

comments powered by Disqus
© 2020 - 2025 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次