反向 SVG 画线动画

Posted 2023-03-06

【中文标题】反向 SVG 画线动画

【英文标题】：Reverse SVG line drawing animation

【发布时间】：2015-12-05 16:25:06

【问题描述】：

我正在尝试反转这条 SVG 线的动画效果。我需要这条线从左到右绘制，但只能让它从右到左工作。我尝试在 illustrator 中更改终点，但这只会导致它从两侧绘制。我该怎么做呢？你可以在这里看到动画：http://mckeever02.github.io/voxbit/

这是 SVG：

<svg viewBox="0 0 759.7 234.2">
    <path class="phone-line" stroke="#fff" stroke- stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
  </svg>

以及用于动画的 CSS：

.phone-line 
  stroke-dasharray:1400;
  -webkit-animation: draw 4s ease-in;


@-webkit-keyframes draw 
  from 
    stroke-dashoffset: 1400;
  
  to 
    stroke-dashoffset: 0;
  

【问题讨论】：

在我的浏览器 (Firefox/Linux) 上，这条线根本没有动画效果（与图标相反）。

@rr- 在 Chrome 中查看。他只有 webkit 关键帧规则。

是的，我的错误忘记了我的非供应商前缀。

【参考方案1】：

如您所知，stroke-dasharray 属性创建了一个虚线模式。当该值指定为 1400 时，这意味着短划线的长度和短划线之间的间隔为 1400。也就是说，对于 0 到 1400，这条线将存在，而从 1400 到 2800 将存在一条短划线。

现在，当您将 stroke-dashoffset 从 1400 更改为 0 时，它会从一个方向看到线。最初偏移量为 1400，因此只有破折号可见（没有线条）。当偏移设置为 0 时，虚线向左移动，线（从 0 到 1400）慢慢进入视野。

从另一个方向执行此操作的简单方法是将其从1400 动画化到2800。完成此操作后，随着线（从 2800 到 4200 出现）慢慢进入视野，破折号向右移动。

.phone-line 
  stroke-dasharray: 1400;
  animation: draw 4s ease-in;

@keyframes draw 
  from 
    stroke-dashoffset: 1400;
  
  to 
    stroke-dashoffset: 2800;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox="0 0 759.7 234.2">
  <path class="phone-line" stroke="#000" stroke- stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
</svg>

---

另一种方法（如comments 中的Paul LeBeau 所述）是将其从-1400 动画化到0。这也会产生与上述 sn-p 相同的输出。

.phone-line 
  stroke-dasharray: 1400;
  animation: draw 4s ease-in;

@keyframes draw 
  from 
    stroke-dashoffset: -1400;
  
  to 
    stroke-dashoffset: 0;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox="0 0 759.7 234.2">
  <path class="phone-line" stroke="#000" stroke- stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
</svg>

注意：在我看来，理想的方法是将path 本身的方向更改为从左侧开始并向右移动，而不是从右向左移动。这只是一个简单的解决方法，可以在不更改 path 的情况下反转方向。

【讨论】：

从-1400 到0 可能更简单。

@PaulLeBeau：我发誓我试过了，但由于某种原因，它之前没有用。我一定犯了一些愚蠢的错误。感谢您的评论，我也会在答案中提到这一点:)

确认这在我的浏览器中有效←来自 OP 帖子的投诉者

我正在应用它，但发现与向前相比，动画开始有明显的延迟。 Forward 立即开始动画。我不明白为什么，谁能解释一下？