Un article expliquant en détail comment implémenter l'animation de chargement des changements dynamiques de longueur de ligne d'arc avec CSS

Comment utiliser CSS pour implémenter une animation de chargement de ligne dynamique ? L'article suivant présente trois méthodes d'utilisation de CSS pour implémenter des animations de chargement qui modifient la longueur des lignes d'arc dynamiques. J'espère que cela sera utile à tout le monde !

Un groupe d'amis m'a demandé comment utiliser CSS pour obtenir l'effet de chargement suivant :

C'est une question très intéressante.

Nous savons qu'en utilisant CSS, nous pouvons facilement obtenir un tel effet d'animation :

<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);
    }
}

L'animation est la suivante :

Par rapport à l'animation de chargement de ligne requise, l'animation ci-dessus manque d'un point central :

• La longueur de la ligne changera au cours du processus de rotation

La difficulté ici devient donc la suivante : comment réaliser dynamiquement le changement de longueur du segment de ligne d'arc ? La résolution de ce problème résout essentiellement l'animation de chargement de transformation de ligne mentionnée ci-dessus.

Cet article présentera plusieurs méthodes intéressantes en CSS qui peuvent modifier dynamiquement la longueur des lignes d'arc :

Méthode 1 : utiliser des masques pour y parvenir

La première méthode, qui est également plus facile à penser, consiste à utiliser des masques pour atteindre.

Nous implémentons deux lignes en demi-cercle, l'une est la couleur réelle qui peut être vue et l'autre est la même que la couleur d'arrière-plan, une ligne en demi-cercle relativement plus épaisse. Lorsque les deux lignes se déplacent à des rythmes différents, nous vous voyons visuellement. peut également voir les lignes d'arc qui changent dynamiquement.

Regardez le schéma et vous comprendrez d'un coup d'œil :

Nous remplaçons les lignes rouges ci-dessus par un fond blanc, et l'effet d'animation global est très similaire. Le pseudo-code est le suivant :

<div></div>

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);
    }
}

. Le noyau est de réaliser deux demi-cercles de ligne, un noir, une couleur de fond, deux sections de lignes se déplacent à des rythmes différents (contrôlés par le temps d'animation et l'assouplissement), l'effet est le suivant :

Pour le code complet, vous pouvez cliquer sur - Démo CodePen - Chargement linéaire

https://codepen.io/Chokcoco/pen/PvqYNJ

Les deux plus gros problèmes avec la solution ci-dessus sont :

• Si la couleur d'arrière-plan n'est pas uni couleur, il sera exposé

• Si vous avez besoin de la longueur du segment de ligne qui peut être affiché Il ne peut pas être complété s'il est plus grand qu'un demi-cercle

Sur cette base, nous ne pouvons trouver qu'un autre moyen.

Méthode 2 : Avec l'aide de la fonctionnalité Stroke-* de SVG

Dans de nombreux articles précédents, nous avons mentionné qu'avec CSS et SVG, nous pouvons réaliser diverses animations de lignes simples ou complexes, telles que les simples :

Ou personnalisez des animations de lignes complexes avec des chemins complexes :

> Si vous êtes intéressé par CSS/SVG pour implémenter l'animation de lignes, mais que vous n'y connaissez pas encore grand chose, vous pouvez consulter mon article - - 【Animation Web】 Premiers pas avec l'animation de lignes SVG

Ici, nous n'avons besoin que d'une simple balise SVG <circle></circle>, associée à son style CSS stroke-dasharray et Stroke-dashoffset peut facilement obtenir l'effet ci-dessus : <circle></circle>，配合其 CSS 样式 stroke-dasharray 和 stroke-dashoffset 即可轻松完成上述效果：

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

.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;
  }
}

简单解释下：

• 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

<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%); 
    }
}

Une brève explication :

Stroke : analogue à border-color en CSS, définissez les graphiques SVG Border Color ; 🎜🎜Stroke-dasharray : La valeur est un tableau sans limite supérieure. Chaque nombre représente alternativement la largeur du trait et de l'espace. 🎜🎜Stroke-dashoffset : La distance depuis. le motif de tirets au début du chemin. 🎜🎜🎜Nous utilisons Stroke-dasharray pour couper la ligne complète d'origine en plusieurs segments. Supposons que Stroke-dasharray : 10, 10 représente un tel graphique : 🎜🎜🎜🎜Le premier 10 représente le segment de ligne La longueur de , le deuxième 10 représente l'écart entre les deux segments de ligne visibles. 🎜🎜Le Stroke-dasharray : 1 200 dans le code réel signifie qu'il se situe entre deux segments de ligne 1px avec un intervalle de 200px. En raison du diamètre La circonférence du cercle de 40px est 40 * π ≈ 125.6px, ce qui est inférieur à 200, donc dans la réalité chiffre, il n'y a qu'un seul point : 🎜🎜 🎜🎜

同理，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视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!