Question

我想制作一个顺时针绘制的旋转器，以比绘制速度更快的速度旋转2个完整周期，然后逆时针绘制。我非常接近，但我不确定如何使用绘图动画协调旋转。我通常最终没有旋转，或者在抽出动画期间，这不是我想要的。

$spinnerSize: 100;

svg.spinner {
    width: $spinnerSize + px;
    height: $spinnerSize + px;
    x: 100px;
    y: 100px;
    viewBox: 0 0 $spinnerSize $spinnerSize;

    circle {
        fill: transparent;
        stroke-width: 12;
        stroke-dasharray: (3.14 * $spinnerSize);
        transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
        animation: 
            spinner 3s linear infinite,
            rotation 3s linear infinite;
        transform: ScaleX(-1) rotate(270deg);
    }
}

 @keyframes spinner {
  0% { stroke-dashoffset: 350; }
  10% { stroke-dashoffset: 630; }
  30% { stroke-dashoffset: 630; }
 100% { stroke-dashoffset: 1000; }
} 


@keyframes rotation
{
  0% {transform: rotate(270deg)}
  10% {transform: rotate(270deg)}
  15% {transform: rotate(300deg)}
  30% {transform: rotate(270deg)} 
  100% {transform: rotate(360deg);}
}

<svg class="spinner" stroke="url(#linear)">
    <circle cx="50" cy="50" r="40"></circle>
    <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="rgba(231,60,99,1)"/>
      <stop offset="100%" stop-color="rgba(150,77,135,1)"/>
    </linearGradient>
  </defs>
</svg>

Answer 1

我认为这是你在技术上要求的。我将两个动画组合成一个：

 @keyframes spinner {
  0% { stroke-dashoffset: 350; transform: rotate(270deg) }
  25% { stroke-dashoffset: 630; transform: rotate(270deg)}
  50% { stroke-dashoffset: 630; transform: rotate(990deg)}
  75% { stroke-dashoffset: 630; transform: rotate(990deg)}
 100% { stroke-dashoffset: 1000; transform: rotate(990deg)}
}

this answer

使用SVG动画组合绘制，旋转和绘制

1 个答案: