méthode CSS3 pour implémenter la barre de progression en anneau

Quand j'ai commencé à écrire cette bague, je me suis référé au code CSS donné dans le message et je l'ai remplacé en fonction de mes propres besoins. J'ai trouvé que la bague pouvait tourner parfaitement, mais il semblait que je ne pouvais pas la contrôler. pourcentage, alors j'ai abandonné et copié avec désinvolture. Une idée toute faite, encore faut-il utiliser son cerveau.

Principe d'implémentation

Il existe de nombreuses façons d'implémenter des cercles en CSS. Je pense que la plupart d'entre elles sont implémentées en utilisant border (border) + clipping (clip:rect()), donc je le suis. également préparé Adoptez cette approche.

C'est principalement un problème de mise en page. Je pense que la plupart des barres de progression des cercles sont similaires, mais les méthodes de mise en page et de rotation sont différentes

// html 

<p id="loading" class="loading">
    <p class="circle">
        <p class="percent left"></p>
        <p class="percent right wth0"></p>
    </p>
    <p class="per"></p>
</p>

// css 

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 9999;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.circle{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  border:10px solid #fff;
  clip:rect(0,100px,100px,50px);
}
.clip-auto{
  clip:rect(auto, auto, auto, auto);
}
.percent{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  top:-10px;
  left:-10px;
}
.left{
  -webkit-transition:-webkit-transform ease;
  transition:-webkit-transform ease;
  transition:transform ease;
  border:10px solid #E54B00;
  clip: rect(0,50px,100px,0);
}
.right{
  border:10px solid #E54B00;
  clip: rect(0,100px,100px,50px);
}
.wth0{
  width:0;
}

// js


$('.left').animate({
    deg: per*3.6
}, {
    step: function(n, fx) {
        if(per>180){
            $('.circle').addClass('clip-auto');
            $('.right').removeClass('wth0');
        }
        $(this).css({
            "-webkit-transform":"rotate("+n+"deg)",
            "-moz-transform":"rotate("+n+"deg)",
            "transform":"rotate("+n+"deg)"
        });
    },
    duration:500
})

En éditant .circle(la gauche et cercles de droite Le recadrage de l'élément parent) affiche uniquement l'anneau de gauche, et la largeur de l'anneau de droite est directement 0. Lorsque la barre de progression atteint 50%, l'angle de rotation de l'anneau de gauche est transform : rotate(180deg), supprimez le recadrage de .circle (.clip-auto), et restaurez la largeur du cercle de droite. C'est fondamentalement la routine.

L'attribut step de la méthode d'animation de jQuery animate()

Si vous utilisez uniquement

$(this).css({
    "-webkit-transform":"rotate("+n+"deg)",
    "-moz-transform":"rotate("+n+"deg)",
    "transform":"rotate("+n+"deg)"
});

pour contrôler la rotation de l'angle, il aura l'air raide sans aucune animation . Pour le moment, vous devriez envisager d'y ajouter une animation, et le animate fourni par jq ne peut créer des animations que pour les valeurs numériques, mais ne peut pas créer d'animations pour les valeurs de type chaîne.

À ce stade, vous devez utiliser l'attribut step d'animate.

Introduction à l'étape

L'attribut progress d'animate est ce que nous utilisons souvent pour exploiter les attributs des valeurs numériques, mais les attributs des valeurs de chaîne ne peuvent pas être exploités avec lui pour le moment. c'est un attribut d'étape nécessaire.

L'étape, comme son nom l'indique, consiste à décomposer une animation en étapes. Dans la méthode animate, la façon dont chaque étape est décomposée n'est pas déterminée par la valeur de la propriété CSS et la durée de l'animation que nous définissons, mais par le système. de.

$(".left").animate({left:50},{
    duration:100,
    step:function(now,fx){
        console.log(now) //控制台输出，看看这个动画被分解成了几个片段
    }
});

Cet endroit explique principalement pourquoi l'angle se voit attribuer une valeur ici. D'ailleurs, le nombre de fragments en lesquels il divise la valeur n'est pas sous notre contrôle humain.

Le deuxième paramètre de la méthode step - fx

$(".demo").animate({
    first:2,
    second:10
}, {
    step:function(n,fx){
        // 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）；第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。
        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
        // 执行动画的元素：elem;
        // 动画正在改变的属性：prop;
        // 正在改变属性的当前值：now;
        // 正在改变属性的结束值：end;
        // 正在改变属性的单位：unit;等
        
        // 可在这里改变animate第1个参数中设置的属性second在动画结束时的值
        if(fx.prop=="second"){fx.end=5}
        console.log(fx.prop+": "+n);
    },
    duration:2000
})

Recommandations associées :

Explication détaillée de la méthode d'instance d'implémentation des barres de progression en arc et en anneau sur canevas

Utilisation d'un clip CSS pour implémenter un exemple de didacticiel de barre de progression en anneau de lecture audio

Utilisation de CSS3 pour créer un exemple de barre de progression en anneau

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!