CSS3-Methode zum Implementieren des Ring-Fortschrittsbalkens

Als ich anfing, diesen Ring zu schreiben, habe ich mich auf den im Beitrag angegebenen CSS-Code bezogen und ihn entsprechend meinen eigenen Bedürfnissen ersetzt. Ich stellte fest, dass sich der Ring perfekt drehen ließ, aber es schien, dass ich ihn damit nicht steuern konnte Prozentsatz, also habe ich aufgegeben und es beiläufig kopiert. Eine fertige Idee, es ist immer noch notwendig, Ihr Gehirn zu benutzen.

Implementierungsprinzip

Es gibt viele Möglichkeiten, Kreise in CSS zu implementieren. Ich denke, die meisten davon werden durch die Verwendung von Rahmen (border) + Clipping (clip:rect()) implementiert, also bin ich es auch vorbereitet Nehmen Sie diesen Ansatz.

Es ist hauptsächlich ein Layoutproblem. Ich denke, dass die meisten Kreisfortschrittsbalken ähnlich sind, aber die Layout- und Rotationsmethoden sind unterschiedlich.

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

Durch Bearbeiten von .circle(the left und rechte Kreise Das Zuschneiden des übergeordneten Elements) zeigt nur den Ring auf der linken Seite an, und die Breite des Rings auf der rechten Seite ist direkt 0. Wenn der Fortschrittsbalken 50 % erreicht, beträgt der Drehwinkel des linken Rings Transformieren: Drehen (180 Grad), Entfernen des Ausschnitts von .circle (.clip-auto) und Wiederherstellen der Breite des rechten Kreises. Das ist im Grunde die Routine.

Das Schrittattribut der jQuery-Animationsmethode animate()

Wenn Sie nur

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

verwenden, um die Drehung des Winkels zu steuern, sieht es ohne Animation steif aus Zu diesem Zeitpunkt sollten Sie darüber nachdenken, eine Animation hinzuzufügen. Die von jq bereitgestellte Funktion animate kann nur Animationen für numerische Werte erstellen, jedoch keine Animationen für Werte vom Typ Zeichenfolge.

Zu diesem Zeitpunkt müssen Sie das Schrittattribut von animate verwenden.

Einführung in die einzelnen Schritte

Das Fortschrittsattribut von animate wird häufig zum Bedienen der Attribute numerischer Werte verwendet, die Attribute von Zeichenfolgenwerten können jedoch derzeit nicht damit bedient werden. Wir brauchen ein Schrittattribut.

Schritt besteht, wie der Name schon sagt, darin, eine Animation in Schritte zu zerlegen. Bei der Animationsmethode wird die Art und Weise, wie jeder Schritt zerlegt wird, nicht durch den von uns festgelegten CSS-Eigenschaftswert und die Animationsdauer bestimmt, sondern durch das System. von.

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

Dieser Ort erklärt hauptsächlich, warum dem Winkel hier ein Wert zugewiesen wird. In wie viele Fragmente er den Wert unterteilt, liegt übrigens nicht unter unserer menschlichen Kontrolle.

Der zweite Parameter der Schrittmethode - 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
})

Verwandte Empfehlungen:

Detaillierte Erläuterung der Instanzmethode zum Implementieren von Bogen- und Ring-Fortschrittsbalken Canvas

Verwenden eines CSS-Clips zum Implementieren eines Tutorialbeispiels für einen Ring-Fortschrittsbalken für die Audiowiedergabe

Verwenden von CSS3 zum Erstellen eines Beispiels für einen Ring-Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonCSS3-Methode zum Implementieren des Ring-Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!