처음 이 링을 작성하기 시작했을 때, 게시물에 있는 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)되면 오른쪽 링의 너비가 복원됩니다. 이것은 기본적으로 루틴입니다.
$(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) //控制台输出,看看这个动画被分解成了几个片段 } });
여기서 각도에 값이 할당되는 이유를 주로 설명합니다. 그런데 값을 몇 조각으로 나누는지는 인간이 통제할 수 없습니다.
$(".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 중국어 웹사이트의 기타 관련 기사를 참조하세요!