Question

我想不通这个方法...我不能真正在项目中添加标记，只能在CSS中添加标记（出于很多与我远程协作的人的无聊原因）。

最终客户希望画出其徽标路径的加载动画，但不是线性的，更容易进出（慢-快-慢）。为了说明我的意思，请参阅我已经完成的jsfiddle：https://jsfiddle.net/tobzzzz/djf7oth2/（它们的徽标有点像语音标记，为了方便演示，我做了一个圆圈）。

徽标将位于图像背景之上，而不是白色/纯色背景，因此我的小提琴手解决方案无法将两个圆圈分层。我添加了浅灰色背景以演示它如何工作。

IDEAL解决方案将仅是SVG（使用SVG动画而不是CSS动画），然后将其转换为数据并将其作为背景图像。

如果不能仅使用SVG动画来完成，我想知道是否可以使用SVG和CSS组合来完成。但是绝对不能100％是JS。

有什么好主意吗？

body {
  background: #eee
}

.black {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash 4s linear infinite;
}

.white {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash2 4s ease-in-out infinite;
}

@keyframes dash {
  80% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash2 {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg class="path" width="84" height="84" xmlns="http://www.w3.org/2000/svg">
      <path class="black" fill="none" stroke="#000000" stroke-width="4" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
      <path class="white" fill="none" stroke="white" stroke-width="5" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
    </svg>

Answer 1

您需要为stroke-dasharray而不是stroke-dashoffset设置动画。您可以将多个数字添加到虚线数组的值，以定义虚线和间隙的交替长度。因此，如果您用r="40"绕圈，其圆周为251,4，

0 251.4是一个长度为0的笔触，整个圆周上都有一个间隙
125.7 125.7是半圆行程和半圆间隙
然后再次减小笔划长度

同时，通过使偏移量动画化，使笔划的起点绕圆移动。

您可以对其他中间值进行很多微调，方法是分别分配keyTime和缓动函数。这是线性动画的基本变体：

<svg width="84" height="84">
    <circle r="40" cx="42" cy="42" style="fill: none;stroke: black;stroke-width: 4;">
        <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0 251.4;125.7 125.7;0 251.4" />
        <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0;-100;-251.4" />
    </circle>
</svg>

Answer 2

你看过这个吗？

https://maxwellito.github.io/vivus-instant/

您可以拖入任何SVG，并且该SVG具有自动有限的动画功能。

仅SVG（无JS）-线/路径动画

2 个答案: