JSでアニメーション効果処理のプログレスバーを作成する方法

今回はJSでアニメーションエフェクト処理プログレスバーを作成する方法と、JSでアニメーションエフェクト処理プログレスバーを作成する際の注意点

を紹介します。実際の事例を見てみましょう。

たとえばプロセスを使用する場合、レビュー プロセスがあり、開始、レビュー中、レビュー成功の 3 つの段階があります。異なるステージでは、それに応じた進行状況表示が行われ、アニメーション形式で表示されます。早速、構築を始めてみましょう。

まず、このコントロールを作成するためにキャンバスを使用することを考えたので、テスト用に表示する新しいキャンバスをdemo.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>

ct_progress.js 次に、対応する 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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用して参照渡しおよび値渡しをする方法

JS を使用して暗号化操作と復号化操作を実装する

🎜

以上がJSでアニメーション効果処理のプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。