So erstellen Sie einen Fortschrittsbalken für den Animationseffektprozess in JS

Dieses Mal zeige ich Ihnen, wie Sie einen Animationseffektprozess mit JS erstellenFortschrittsbalken Was sind die Vorsichtsmaßnahmen für die Erstellung eines Animationseffektprozesses mit JS? Folgendes ist ein praktischer Fall.

Bei der Verwendung eines Prozesses gibt es beispielsweise einen Audit-Prozess, der aus drei Phasen besteht: Start, Audit läuft und Audit erfolgreich. In verschiedenen Phasen erfolgt eine entsprechende Fortschrittsanzeige. Bei der Anzeige erfolgt die Anzeige in Form einer Animation. Beginnen wir ohne weitere Umschweife mit dem Bau.

Zuerst habe ich überlegt, Canvas zum Erstellen dieses Steuerelements zu verwenden, also habe ich in demo.html einen neuen Canvas erstellt, um ihn zum Testen anzuzeigen, und zunächst mehrere Attributwerte geschätzt. Nach Ergänzungen und Änderungen sind die endgültigen Attribute wie folgt:

<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>

Dann fing ich an, die entsprechende js-Datei zu schreiben, die ich ct_progress.js nannte. Mein Ziel ist es, ein Anzeigesteuerelement zu erstellen, das Benutzer frei konfigurieren können. Deshalb habe ich einige konfigurierbare Attribute definiert:

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;

Die Attribute sind abgeschlossen und ich beginne mit Canvas, um mit dem ersten Zeichnen mit diesen Attributwerten zu beginnen:

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(); 
}

Zu diesem Zeitpunkt wird ein statischer Prozessfortschrittsbalken ohne Fortschritt angezeigt. Fügen Sie dann diesem Fortschrittsbalken eine Anzeigeanimation hinzu:

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);

Damit ist ein einfacher Prozessfortschrittsbalken mit Anzeigeanimation fertig. Der endgültige Effekt ist wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

So verwenden Sie JS zur Referenz- und Wertübergabe

Verwenden Sie JS, um die Verschlüsselung zu implementieren und Entschlüsselungsvorgang

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Fortschrittsbalken für den Animationseffektprozess in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!