基于JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條
當(dāng)在使用流程的時(shí)候,比如有一個(gè)審核流程,有三個(gè)階段:開始,審核中,審核成功。當(dāng)在不同的階段,做相應(yīng)的進(jìn)度顯示,當(dāng)顯示時(shí),是以動(dòng)畫的形式顯示的。話不多說,我們開始打造吧。
首先,我考慮的是使用canvas來打造這個(gè)控件,于是我現(xiàn)在demo.html里新建了一個(gè)canvas用來顯示測(cè)試用,并且先預(yù)計(jì)了幾個(gè)屬性值,在做的過程中增增改改,最終屬性如下:
<canvas id="myCanvas" width="800" height="100" style="background:#efefef" data-show="開始|審核中|預(yù)審核|結(jié)束" data-font-size="16" data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
然后開始編寫相應(yīng)的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;//動(dòng)畫速度 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;
屬性完成,開始使用canvas使用這些屬性值開始進(jìn)行初始化畫圖:
for(var i in showStrs) { ctx.beginPath(); ctx.fillStyle="#ffffff"; ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面兩個(gè)參數(shù)為圓心坐標(biāo),第三個(gè)為半徑,第四個(gè)為起始角。第五個(gè)為結(jié)束角 ctx.fill(); if(i!=0) { ctx.fillRect(r+(i-1)*space+padding,r/2+padding,space,r);//前面兩個(gè)左上角坐標(biāo),后面兩個(gè)寬高 } ctx.beginPath(); ctx.fillStyle="#333333"; ctx.font=fontSize+"px Georgia";//一定要指定字體否則大小沒有用 ctx.fillText(showStrs[i],r+i*space-r+padding,r*2+fontSize+10+padding);//左下角為起點(diǎn) ctx.stroke(); }
此時(shí)畫出了一個(gè)靜態(tài)的沒有進(jìn)度的流程進(jìn)度條。然后為這個(gè)進(jìn)度條加上顯示時(shí)的動(dòng)畫:
var proW = 0;//進(jìn)度長度 var progress = c.hasAttribute("dara-progress")?Number(c.getAttribute("dara-progress")):showStrs.length;// var showW = space*progress;//計(jì)算應(yīng)該顯示的進(jìn)度長度 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);//前面兩個(gè)左上角坐標(biāo),后面兩個(gè)寬高 //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);//前面兩個(gè)左上角坐標(biāo),后面兩個(gè)寬高 } } //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);//前面兩個(gè)參數(shù)為圓心坐標(biāo),第三個(gè)為半徑,第四個(gè)為起始角。第五個(gè)為結(jié)束角 ctx.fill(); if(proW>=showW) { clearInterval(int); } proW+=speed; }, 150);
這樣便完成了一個(gè)簡(jiǎn)單的帶顯示動(dòng)畫的流程進(jìn)度條。最終效果如下:
具體控件使用以及源碼,詳見github:點(diǎn)擊打開鏈接希望學(xué)習(xí)或有用到的童鞋star一下,感謝
總結(jié)
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放
各種音樂播放器上都有一個(gè)自動(dòng)滾動(dòng)播放歌詞的功能,當(dāng)前滾動(dòng)到的歌詞會(huì)高亮居中顯示,即使歌詞被換行也能正常居中,那么這個(gè)功能基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放呢?感興趣的朋友一起看看吧2015-11-11js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
這篇文章主要為大家詳細(xì)介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法,感興趣的朋友可以參考一下2016-05-05一個(gè)可以得到元素真實(shí)的背景顏色的javascript腳本
一個(gè)可以得到元素真實(shí)的背景顏色的javascript腳本...2007-07-07利用d3.js力導(dǎo)布局繪制資源拓?fù)鋱D實(shí)例教程
這篇文章主要給大家介紹了關(guān)于如何利用d3.js力導(dǎo)布局繪制資源拓?fù)鋱D的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01