집 > 기사 > 웹 프론트엔드 > JS에서 애니메이션 효과 프로세스 진행률 표시줄을 만드는 방법

JS에서 애니메이션 효과 프로세스 진행률 표시줄을 만드는 방법

php中世界最好的语言원래의: 2018-06-04 09:53:201506검색

이번에는 JS로 애니메이션 효과 프로세스진행률 표시줄을 만드는 방법과 JS로 애니메이션 효과 프로세스 진행률 표시줄을 만들 때 주의사항이 무엇인지 알아보겠습니다.

예를 들어 프로세스를 사용할 때 시작, 검토 진행 중, 검토 성공의 세 단계로 구성된 검토 프로세스가 있습니다. 다른 단계에서는 해당 진행 상황이 표시됩니다. 표시되면 애니메이션 형식으로 표시됩니다. 더 이상 고민하지 않고 구축을 시작하겠습니다.

우선 이 컨트롤을 생성하기 위해 캔버스를 사용할 것을 고려했기 때문에 테스트를 위해 표시할 새 캔버스를 데모.html에 생성하고 먼저 여러 속성 값을 추정한 다음 프로세스 중에 최종 속성인 추가 및 변경했습니다.

<canvas id="myCanvas" width="800" height="100" style="background:#efefef" data-show="开始|审核中|预审核|结束" data-font-size="16" 
    data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10"> 
  您的浏览器不支持 HTML5 canvas 标签。</canvas>

그런 다음 해당 js 파일 작성을 시작하고 이름을 ct_progress.js로 지정했습니다. 내 목적은 사용자가 자유롭게 구성할 수 있는 디스플레이 컨트롤을 만드는 것이므로 구성 가능한 몇 가지 속성을 정의했습니다.

var c=document.getElementById("myCanvas"); 
var showStr = c.getAttribute("data-show"); 
var showStrs = showStr.split("|"); 
var r = c.hasAttribute("data-r")?Number(c.getAttribute("data-r")):15; 
var ctx=c.getContext("2d"); 
var padding = c.hasAttribute("data-padding")?Number(c.getAttribute("data-padding")):10;//左右上的间隔 
var space = (c.getAttribute("width")-2*r-2*padding)/(showStrs.length-1); 
var speed = c.hasAttribute("data-speed")?Number(c.getAttribute("data-speed")):20;//动画速度 
var fillColour = c.hasAttribute("data-fill-colour")?c.getAttribute("data-fill-colour"):"#ffff00";//填充色 
var fontSize = c.hasAttribute("data-font-size")?Number(c.getAttribute("data-font-size")):15;

속성이 완성되었으며 캔버스를 사용하여 이러한 속성 값을 사용하여 초기 그리기를 시작합니다.

for(var i in showStrs) 
{ 
  ctx.beginPath(); 
  ctx.fillStyle="#ffffff"; 
  ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面两个参数为圆心坐标，第三个为半径，第四个为起始角。第五个为结束角 
  ctx.fill(); 
  if(i!=0) 
  { 
    ctx.fillRect(r+(i-1)*space+padding,r/2+padding,space,r);//前面两个左上角坐标，后面两个宽高 
  } 
  ctx.beginPath(); 
  ctx.fillStyle="#333333"; 
  ctx.font=fontSize+"px Georgia";//一定要指定字体否则大小没有用 
  ctx.fillText(showStrs[i],r+i*space-r+padding,r*2+fontSize+10+padding);//左下角为起点 
  ctx.stroke(); 
}

At 이번에는 진행률이 없는 정적 프로세스 진행률 표시줄이 생성됩니다. 그런 다음 이 진행률 표시줄에 디스플레이 애니메이션을 추가하세요.

var proW = 0;//进度长度 
var progress = c.hasAttribute("dara-progress")?Number(c.getAttribute("dara-progress")):showStrs.length;// 
var showW = space*progress;//计算应该显示的进度长度 
var i=0,j; 
var int = setInterval(function () { 
  //清除 
  //ctx.clearRect(0, 0, c.width, c.height);//不清除在原图上画了覆盖 
  j=i; 
  i = parseInt(proW/space); 
  if(i>j) 
  { 
    ctx.beginPath(); 
    ctx.fillStyle=fillColour; 
    ctx.fillRect(r+j*space+padding,r/2+padding,space,r);//前面两个左上角坐标，后面两个宽高 
    //clearArc(ctx,r+j*space+padding,r+padding,r,1);//清除圆部 
  } 
  else 
  { 
    if(i<progress) 
    { 
      ctx.beginPath(); 
      ctx.fillStyle=fillColour; 
      ctx.fillRect(r+i*space+padding,r/2+padding,proW-i*space,r);//前面两个左上角坐标，后面两个宽高 
    } 
  } 
  //clearArc(ctx,r+i*space+padding,r+padding,r,1);//清除圆部 
  ctx.beginPath(); 
  ctx.fillStyle=fillColour; 
  ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面两个参数为圆心坐标，第三个为半径，第四个为起始角。第五个为结束角 
  ctx.fill(); 
  if(proW>=showW) 
  { 
    clearInterval(int); 
  } 
  proW+=speed; 
}, 150);

이렇게 하면 디스플레이 애니메이션이 포함된 간단한 프로세스 진행률 표시줄이 완성됩니다. 최종 효과는 다음과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!