집 >웹 프론트엔드 >CSS 튜토리얼 >링 진행률 표시줄을 구현하는 CSS3 메서드

링 진행률 표시줄을 구현하는 CSS3 메서드

小云云원래의: 2018-01-27 15:06:522337검색

처음 이 링을 작성하기 시작했을 때, 게시물에 있는 CSS 코드를 참조하고 필요에 따라 변경했습니다. 링이 완벽하게 회전할 수 있다는 것을 알았지만 백분율로 제어할 수는 없는 것 같았습니다. , 그래서 포기하고 기성품을 복사했습니다. 여전히 두뇌를 사용해야합니다.

구현 원리

CSS에서 원을 구현하는 방법은 여러 가지가 있는데 대부분 테두리(border) + 클리핑(clip:ect())으로 구현되는 것 같아서 저도 이 방법을 사용하겠습니다.

주로 레이아웃 문제인 것 같아요. 대부분의 원 진행률 표시줄은 비슷하지만 레이아웃과 회전 방법이 다릅니다

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

자르면 .circle(왼쪽 및 오른쪽 원의 상위 요소)만 가능합니다. 왼쪽 링이 표시되고 오른쪽 링의 너비는 바로 0입니다. 진행률 표시줄이 50%에 도달하면, 즉 왼쪽 링의 회전 각도는 transform:rotate(180deg)이고 자르기는 입니다. 원이 제거 (.clip-auto)되면 오른쪽 링의 너비가 복원됩니다. 이것은 기본적으로 루틴입니다.

jQuery의 애니메이션 메소드인 animate()의 step 속성

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

만 사용하여 각도의 회전을 제어한다면 애니메이션이 없어 뻑뻑해 보일 수 있습니다. 이때 애니메이션을 추가하는 것을 고려해야 합니다. , jq는 animate를 제공하여 숫자 값에 대해서만 애니메이션을 생성할 수 있지만 문자열 유형 값에 대해서는 애니메이션을 생성할 수 없습니다.

이때 animate의 step 속성을 사용해야 합니다.

단계 소개

animate의 진행 속성은 숫자 값의 속성을 연산하는 데 자주 사용되지만, 문자열 값의 속성을 연산하는 데는 사용할 수 없습니다. 이때 단계 속성이 필요합니다.

step은 이름에서 알 수 있듯이 애니메이션을 단계로 분해하는 것입니다. animate 방법에서 각 단계가 어떻게 분해되는지는 우리가 설정한 CSS 속성 값과 애니메이션 지속 시간에 의해 결정되는 것이 아니라 시스템에 의해 결정됩니다.

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

여기서 각도에 값이 할당되는 이유를 주로 설명합니다. 그런데 값을 몇 조각으로 나누는지는 인간이 통제할 수 없습니다.

단계 메서드의 두 번째 매개 변수 - 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
})

링 진행률 표시줄을 구현하는 CSS3 메서드

구현 원리

jQuery의 애니메이션 메소드인 animate()의 step 속성

단계 소개

단계 메서드의 두 번째 매개 변수 - fx

관련 기사