Ein Artikel, in dem ausführlich erläutert wird, wie eine Ladeanimation dynamischer Änderungen der Bogenlinienlänge mit CSS implementiert wird

Wie verwende ich CSS, um dynamische Zeilenladeanimationen zu implementieren? Der folgende Artikel stellt drei Methoden zur Verwendung von CSS zum Implementieren von Ladeanimationen vor, die die Länge dynamischer Bogenlinien ändern. Ich hoffe, dass er für alle hilfreich ist!

Eine Gruppe von Freunden fragte mich, wie man mit CSS den folgenden Ladeeffekt erzielen kann:

Das ist eine sehr interessante Frage.

Wir wissen, dass wir mit CSS leicht einen solchen Animationseffekt erzielen können:

<div></div>

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    animation: rotate 3s infinite linear;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

Die Animation sieht wie folgt aus:

Im Vergleich zur erforderlichen Zeilenladeanimation fehlt der obigen Animation ein Kernpunkt:

• Die Länge der Linie ändert sich während des Rotationsprozesses

Die Schwierigkeit besteht hier also darin, wie man die Änderung der Länge des Bogenliniensegments dynamisch realisieren kann. Die Lösung dieses Problems löst im Wesentlichen die oben erwähnte Linientransformation beim Laden der Animation.

In diesem Artikel werden mehrere interessante Möglichkeiten in CSS vorgestellt, die die Länge von Bogenlinien dynamisch ändern können:

Methode 1: Verwenden Sie Masken, um dies zu erreichen.

Die erste Methode, die auch einfacher vorstellbar ist, besteht darin, Masken zu verwenden erreichen.

Wir implementieren zwei Halbkreislinien, eine ist die tatsächlich sichtbare Farbe und die andere ist „die gleiche wie die Hintergrundfarbe“, eine relativ dickere Halbkreislinie. Wenn sich die beiden Linien unterschiedlich schnell bewegen, sehen wir Sie kann auch sich dynamisch ändernde Bogenlinien sehen. Schauen Sie sich das schematische Diagramm an und Sie werden es auf einen Blick verstehen:

Wir ersetzen die obigen roten Linien durch einen weißen Hintergrund, und der gesamte Animationseffekt ist wie folgt:

<div></div>

rrree

Der Kern besteht darin, zwei Halbkreise zu realisieren. Linie, eine schwarze, eine Hintergrundfarbe, zwei Linienabschnitte bewegen sich mit unterschiedlicher Geschwindigkeit (gesteuert durch Animationszeit und Beschleunigung), der Effekt ist wie folgt:

Für den vollständigen Code: Sie können auf „CodePen-Demo – Lineares Laden“ klicken Farbe, es wird freigelegt.

Methode 2: Mit Hilfe der Stroke-*-Fähigkeit von SVG

In vielen früheren Artikeln haben wir erwähnt, dass wir mit CSS und SVG verschiedene einfache oder komplexe Linienanimationen erzielen können, wie zum Beispiel einfache:

Oder passen Sie komplexe Linienanimationen mit komplexen Pfaden an:
• > Wenn Sie sich für die Implementierung von Linienanimationen mit CSS/SVG interessieren, aber noch nicht viel darüber wissen, können Sie sich diesen Artikel von mir ansehen - -

  【Webanimation】Erste Schritte mit der SVG-Linienanimation

Hier benötigen wir nur ein einfaches SVG-Tag <circle></circle>, gepaart mit seinem CSS-Stil Stroke-Dasharray Und Stroke-Dashoffset kann leicht den oben genannten Effekt erzielen:

div {
    width: 200px;
    height: 200px;
}
div::before {
    position: absolute;
    content: "";
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    animation: rotate 3s infinite ease-out;
}
div::after {
    position: absolute;
    content: "";
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 7px solid transparent;
    border-bottom: 7px solid #fff;
    border-right: 7px solid #fff;
    animation: rotate 4s infinite ease-in-out;
}
@keyframes rotate {
    100% {
        transform: rotate(0deg);
    }
}

<svg class="circular" viewbox="25 25 50 50">
  <circle class="path" cx="50" cy="50" r="20" fill="none" />
</svg>

Eine kurze Erklärung:

Stroke: Analog zur Rahmenfarbe in CSS, SVG-Grafiken festlegen Rahmenfarbe;

Stroke-Dasharray: Der Wert ist ein Array ohne Obergrenze. Jede Zahl stellt abwechselnd die Breite von Strich und Abstand dar.

Stroke-Dashoffset: Der Abstand von das Strichmuster an den Anfang des Pfads.

Wir verwenden Stroke-Dasharray, um die ursprüngliche vollständige Linie in mehrere Segmente zu schneiden. Nehmen wir an, dass Stroke-Dasharray: 10, 10 eine solche Grafik darstellt:

Die ersten 10 stellen die dar Liniensegment Die Länge von , die zweite 10 stellt die Lücke zwischen den beiden sichtbaren Liniensegmenten dar.

Der Stroke-Dasharray: 1, 200 im eigentlichen Code bedeutet, dass er zwischen zwei 1px-Liniensegmenten mit einem Intervall von 200px liegt. Aufgrund des Durchmessers beträgt der Umfang des Kreises von 40px 40 * π ≈ 125,6px, was weniger als 200 ist, also in der Realität Abbildung, es gibt nur einen Punkt:

<circle></circle>，配合其 CSS 样式 stroke-dasharray 和 stroke-dashoffset 即可轻松完成上述效果：

.circular {
  width: 100px;
  height: 100px;
  animation: rotate 2s linear infinite;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: #000;
  animation: dash 1.5s ease-in-out infinite
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

<div></div>

简单解释下：

• stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
• stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度;
• stroke-dashoffset：dash 模式到路径开始的距离。

我们利用 stroke-dasharray 将原本完整的线条切割成多段，假设是 stroke-dasharray: 10, 10 表示这样一个图形：

第一个 10 表示线段的长度，第二个 10 表示两条可见的线段中间的空隙。

而实际代码中的 stroke-dasharray: 1, 200，表示在两条 1px 的线段中间，间隔 200px，由于直径 40px 的圆的周长为 40 * π ≈ 125.6px，小于 200

同理，stroke-dasharray: 89, 200 表示：

通过 animation，让线段在这两种状态之间补间变换。而 stroke-dashoffset 的作用则是将线段向前推移，配合父容器的 transform: rotate() 旋转动画，使得视觉效果，线段是在一直在向一个方向旋转。结果如下：

完整的代码你可以戳这里：CodePen Demo -- Linear loading

https://codepen.io/Chokcoco/pen/jOGQGJP?editors=1100

OK，还会有同学说了，我不想引入 SVG 标签，我只想使用纯 CSS 方案。这里，还有一种利用 CSS @property 的纯 CSS 方案。

方法三：使用 CSS @property 让 conic-gradient 动起来

这里我们需要借助 CSS @property 的能力，使得本来无法实现动画效果的角向渐变，动起来。

正常来说，渐变是无法进行动画效果的，如下所示：

<div></div>

.normal {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); 
    transition: background 300ms;
    
    &:hover {
        background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); 
    }
}

将会得到这样一种效果，由于 conic-gradient 是不支持过渡动画的，得到的是一帧向另外一帧的直接变化：

好，使用 CSS @property 自定义变量改造一下：

@property --per {
  syntax: &#39;<percentage>&#39;;
  inherits: false;
  initial-value: 25%;
}

div {
    background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 
    transition: --per 300ms linear;
    
    &:hover {
        --per: 60%;
    }
}

看看改造后的效果：

在这里，我们可以让渐变动态的动起来，赋予了动画的能力。

我们只需要再引入 mask，将中间部分裁切掉，即可实现上述线条 Loading 动画，伪代码如下：

<div></div>

@property --per {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: rotate 11s infinite ease-in-out;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7);
        mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000);
        animation: change 3s infinite cubic-bezier(0.57, 0.29, 0.49, 0.76);
    }
}

@keyframes change {
    50% {
        transform: rotate(270deg);
        --per: 98%;
    }
    100% {
        transform: rotate(720deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

这里，我顺便加上了 filter: hue-rotate()，让线条在旋转的同时，颜色也跟着变化，最终效果如下，这是一个纯 CSS 解决方案：

完整的代码你可以猛击这里：Linear Loading Animation

https://codepen.io/Chokcoco/pen/ZEXmJxP?editors=1100

本方案的唯一问题在于，当前 CSS @property 的兼容性稍微不是那么乐观。当然，未来可期。

最后

简单总结一下，本文介绍了 3 种实现动态弧形线条长短变化的 Loading 动画，当然，它们各有优劣，实际使用的时候根据实际情况具体取舍。有的时候，切图也许也是更省时间的一种方式：）

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem ausführlich erläutert wird, wie eine Ladeanimation dynamischer Änderungen der Bogenlinienlänge mit CSS implementiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!