リングプログレスバーを実装するcss3メソッド-CSSチュートリアル-php.cn

リングプログレスバーを実装するcss3メソッド

小云云

リリース： 2018-01-27 15:06:52

オリジナル

2334 人が閲覧しました

最初にこのリングを書き始めたとき、投稿に記載されている CSS コードを参照して、自分の必要に応じて変更しました。リングは完全に回転できることがわかりましたが、パーセンテージで制御できないようでした。と諦めて既製品をコピーしましたが、やはり頭を使う必要があります。

実装原理

CSSで円を実装する方法はたくさんあると思いますが、ボーダー(border)+クリッピング(clip:rect())で実装することが多いと思いますので、私もこの方法を使用します。

これは主にレイアウトの問題で、ほとんどの円プログレスバーは似ていると思いますが、レイアウトと回転方法が異なります

rree

.circle (左右の円の親要素) のみをトリミングします。左のリングはRingを表示しており、右のリングの幅はそのまま0です。プログレスバーが50%になったところで、つまり左のリングの回転角度をtransform:rotate(180deg)にして、をトリミングします。円が削除(.clip-auto)すると、右側のリングの幅が元に戻ります。これが基本的にルーチンです。

jQueryのアニメーションメソッドanimate()のstep属性

角度の回転制御に

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

ログイン後にコピー

だけを使うと、アニメーションを付けないと堅苦しく見えてしまいます。、jq が提供する animate は数値のみのアニメーションを作成できますが、文字列型の値のアニメーションは作成できません。

このとき、animateのstep属性を使用する必要があります。

stepの紹介

数値の属性を操作するのによく使うのがanimateのprogress属性ですが、このとき文字列値の属性を操作することができません。

ステップは、名前が示すように、アニメーションをステップに分解することです。animate メソッドでは、各ステップがどのように分解されるかは、設定した CSS プロパティ値とアニメーションの長さによってではなく、システムによって決まります。

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

ログイン後にコピー

ここでは主に、ここで角度に値が割り当てられる理由を説明します。ちなみに、値をいくつのフラグメントに分割するかは、人間の制御下にはありません。

step メソッドの 2 番目のパラメーター - fx

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

ログイン後にコピー