样式化组件中的 SVG 动画

Posted 2023-03-15

【中文标题】样式化组件中的 SVG 动画

【英文标题】：SVG animation in styled components

【发布时间】：2021-09-02 10:03:51

【问题描述】：

我有不同的svgs

<svg class="logo">
 <path .../>
 <path .../>
 ...
</svg>

我想为各个路径设置动画。在香草 JS 中，我会做类似的事情

const logo = document.querySelectorAll('.logo path');

for (let i = 0; i < logo.length; i++) 
  console.log(`$i: $logo[i].getTotalLength()`);

手动查找各个路径的长度，然后像这样逐个路径在css路径中制作动画

...
.logo path:nth-child(2) 
  stroke-dasharray: ...;
  stroke-dashoffset: ...;
  animation: anim 2s ease-in-out forwards;

.logo path:nth-child(3) 
  stroke-dasharray: ...;
  stroke-dashoffset: ...;
  animation: anim 2s ease-in-out forwards 0.2s;

...
@keyframes anim 
  to 
    stroke-dashoffset: 0;
  

我在我的React项目中使用了styled components，我想让上面的逻辑符合整个项目的风格，也就是使用styled components。实现这一目标的最有效方法是什么？

【参考方案1】：

您可以考虑使用网络动画 api (https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)。 所以动画可以通过 JS 设置，所以你可以使用你提供的 JS 代码来计算长度并将它们存储在变量中。然后，您可以在网络动画 api 中使用这些变量，这样您就不必手动计算和输入。