Utilisez CSS3 pour implémenter la barre de progression du cercle

Cette fois, je vais vous présenter l'utilisation de CSS3 pour implémenter la barre de progression du cercle Quelles sont les précautions pour utiliser CSS3 pour implémenter la barre de progression du cercle. cas pratique, jetons un coup d'oeil.

Lors du développement d'une applet WeChat, j'ai rencontré le besoin d'une barre de progression circulaire. Utiliser Canvas pour dessiner est gênant :

1 Afin de réaliser une adaptation sur différents écrans, la taille de la barre de progression doit être calculée dynamiquement

2. a le plus haut niveau, pas facilement extensible.

Mais utiliser CSS3 et js pour implémenter la barre de progression peut facilement éviter ce problème.

Remarque : Cet article est implémenté en utilisant jquery, mais le principe est le même. Dans le mini programme, il suffit de définir et de modifier les variables correspondantes

1. Progression. Style de barre

Dans le développement quotidien, la bordure d'un élément est souvent utilisée pour afficher un motif circulaire. Cette technique est également utilisée lors de l'utilisation de CSS3 pour implémenter une barre de progression circulaire. Afin de réaliser la bordure circulaire au-dessus et de couvrir dynamiquement la bordure circulaire en dessous, un total d'un cercle, 2 rectangles et 2 demi-cercles sont nécessaires : un cercle est utilisé pour afficher l'arrière-plan sous-jacent et deux demi-cercles sont utilisés pour couvrir l'arrière-plan sous-jacent. . L'arrière-plan montre la progression et les deux autres rectangles sont utilisés pour couvrir la progression qui n'a pas besoin d'être affichée. Comme indiqué ci-dessous :

Le cercle inférieur est l'arrière-plan de la barre de progression. Il y a deux rectangles à gauche et à droite au-dessus du bas, qui sont utilisés pour couvrir la barre de progression. ne doit pas être affiché. Il y a un demi-cercle à l’intérieur de chacun des deux rectangles pour montrer la progression. Dans des circonstances normales, un demi-cercle dessiné à l'aide d'un carré a un angle inclus de 45 degrés en diamètre et horizontalement. Afin que les deux demi-cercles couvrent tout le cercle, vous devez utiliser rotate dans CSS3 pour faire pivoter le carré d'origine afin d'obtenir l'effet de couvrir tout l'arrière-plan. Comme le montre l'image ci-dessous (pour plus de clarté, il est représenté ici par un carré) :

Comme le montre l'image, faites pivoter le demi-cercle à l'intérieur du rectangle de 45 degrés par rapport au à droite (dans le sens des aiguilles d'une montre) pour obtenir la progression. Une image qui couvre tout l'arrière-plan. Faites pivoter le demi-cercle de 135 degrés vers la gauche (dans le sens inverse des aiguilles d'une montre) pour obtenir une image avec uniquement l'arrière-plan de la barre de progression. Pourquoi devrions-nous tourner vers la gauche au lieu de complètement vers la droite ? Bien entendu, l’effet que nous souhaitons obtenir est le suivant : la progression commence par le haut et se poursuit dans le temps ? À ce stade, l'idée est très claire. Il vous suffit de contrôler l'affichage de la progression à gauche et à droite par le pourcentage.

Le code html et css pour implémenter cette partie est le suivant :

code html

<p class="progressbar">
    <p class="left-container">
        <p class="left-circle"></p>
    </p>
    <p class="right-container">
        <p class="right-circle"></p>
    </p>
</p>

code css :

.progressbar{
    position: relative;
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border: 20px solid #ccc;
    border-radius: 50%;
}
.left-container,.right-container{
    position: absolute;
    width: 70px;
    height: 140px;
    top:-20px;
    overflow: hidden;
    z-index: 1;
}
.left-container{
    left: -20px;
}
.right-container{
    right: -20px;
}
.left-circle,.right-circle{
    position: absolute;
    top:0;
    width: 100px;
    height: 100px;
    border:20px solid transparent;   
    border-radius: 50%;
    transform: rotate(-135deg);
    transition: all .5s linear;
    z-index: 2;
}
.left-circle{
    left: 0;
    border-top-color: 20px solid blue;
    border-left-color: 20px solid blue;
}
.right-circle{
    border-right-color: 20px solid blue;
    border-bottom-color: 20px solid blue;
    right: 0;
}

Deux : js pour contrôler la barre de progression

Afin de rendre la logique de la barre de progression plus robuste, l'implémentation de la partie js doit considérer quatre situations :

1. Valeurs de base La valeur modifiée est à droite,

2. La valeur de base est à droite, la valeur modifiée est à gauche,

3. la valeur de base et la valeur modifiée sont à gauche,

4. La valeur de base est à gauche et la valeur modifiée est à droite.

Quel que soit le cas, le noyau ne doit prendre en compte que deux points : le changement d'angle et la durée d'utilisation.

Dans le premier cas, c'est relativement simple, et vous pouvez facilement calculer le changement d'angle et la durée d'utilisation. Tout d'abord, vous devez définir le temps nécessaire pour changer tout le demi-cercle. Après le réglage, calculez simplement le temps nécessaire pour changer l'angle en fonction du rapport. Le code est le suivant :

time = (curPercent - oldPercent)/50 * baseTime;
     //确定时间值为正
     curPercent - oldPercent > 0 ? '' : time = - time;
     deg = curPercent/50*180-135;

Le deuxième cas est un peu plus gênant. Parce qu’il y a une transition du progrès à droite au progrès à gauche. Afin de modifier la progression en douceur, nous devons utiliser Timer ici. Après avoir changé la partie de droite, modifiez la partie de gauche. Le code est le suivant :

//设置右边的进度
  time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
    transform: 'rotate('+ deg+ 'deg)',
    transition : 'all '+ time + 's linear'
})
//延时设置左边进度条的改变
setTimeout(function(){
    time = (curPercent - 50)/50;
    deg = (curPercent - 50)/50*180 -135;
    $leftBar.css({
        transform: 'rotate('+ deg+ 'deg)',
        transition : 'all '+ time + 's linear'
    })
}, Math.floor(time*1000));000));

Les troisième et quatrième cas sont similaires aux cas précédents et ne seront pas abordés ici.

Le code de fonction complet pour contrôler la barre de progression est le suivant (implémenté à l'aide de jQuery) :

/**
    *设置进度条的变化
    *@param {number} oldPercent    进度条改变之前的半分比
    *@param {number} curPercent    进度条当前要设置的值 
    *@return {boolean} 设置成功返回 true，否则，返回fasle
    */
    function setProgessbar(oldPercent, curPercent){
        var $leftBar = $('#left-bar');
        var $rightBar = $('#right-bar');
        //将传入的参数转换，允许字符串表示的数字
        oldPercent =  + oldPercent;
        curPercent =  + curPercent;
        //检测参数，如果不是number类型或不在0-100，则不执行
        if(typeof oldPercent ==='number' && typeof curPercent ==='number'
            && oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){
    
            var baseTime = 1;    //默认改变半圆进度的时间，单位秒   
            var time = 0;    //进度条改变的时间
            var deg = 0;     //进度条改变的角度
            if(oldPercent > 50){//原来进度大于50
                if(curPercent>50){
                    //设置左边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }else{
                    //设置左边的进度
                    time = (oldPercent - 50)/50 * baseTime;
                    deg = (oldPercent - 50)/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延时设置右边进度条的改变
                    setTimeout(function(){
                        time = (50 - curPercent)/50;
                        deg = (50 - curPercent)/50*180 -135;
                        $rightBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }
            }else{//原来进度小于50时
    
                if(curPercent>50){
                    //设置右边的进度
                    time = (50 - oldPercent)/50 * baseTime;
                    deg = (50 - oldPercent)/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延时设置左边进度条的改变
                    setTimeout(function(){
                        time = (curPercent - 50)/50;
                        deg = (curPercent - 50)/50*180 -135;
    
                        $leftBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }else{
                    //设置右边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }
                return true;
            }
        }else{
            return false;
        }
    }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment rendre le positionnement absolu en CSS compatible avec toutes les résolutions

Transition, animation, transformation des attributs CSS3

Disposition à double aile volante et mise en page du Saint Graal Explication graphique détaillée

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!