링 진행률 표시줄을 구현하는 CSS3 메서드
- 小云云원래의
- 2018-01-27 15:06:522258검색
처음 이 링을 작성하기 시작했을 때, 게시물에 있는 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
})
관련 권장 사항:
캔버스에 호 및 링 진행률 표시줄을 구현하는 예제 방법에 대한 자세한 설명
CSS 클립을 사용하여 오디오 재생 링 진행률 표시줄 구현 튜토리얼 예
위 내용은 링 진행률 표시줄을 구현하는 CSS3 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!