创建一个动画图标Loader with JavaScript

收藏图标是一个关键的在线品牌的一部分,他们得到一些提示用户使用,并帮助他们区分你的网站从其他人。 虽然大多数收藏图标是静态的,它能够创造动画图标。

让我们来谈谈重要性的图标

让我们来谈谈重要性的图标

在线业务的退伍军人知道这是小事情,设置一个公司在竞争中脱颖而出。 新手…阅读更多

一个不断移动的图标当然是令人讨厌的大多数用户,也危害性,但是当它是只有画的时间很短响应用户的行动或事件的背景,例如页面负荷,它可以提供额外的视觉信息—因此,提高用户的经验。

在这个岗位上,我将展示如何创建一个动画的圆形装载在一个HTML帆布,以及如何可以使用它作为一个图标。 一个动画图标loader是一个伟大的工具,以想象的进展的任何行动上执行一个网页,例如文件上传或图像处理。 你可以看看演示属于这一教程在。。

1. 创建<canvas><canvas>元

第一,我们需要创建一个画画,画了一个圆满的100%,在总(这将是重要的,当我们需要增加arc)。

<button id=lbtn>Load</button> <canvas id=cvl width=16 height=16></canvas> <button id=lbtn>Load</button> <canvas id=cvl width=16 height=16></canvas>

我使用的标准图标尺寸、16*16素,对于画布上。 你可以使用一个规模更大比,如果你想要的,但注意到的画的图像将被按比例缩减到162素区时,它的应用作为一个图标。

2. 如果检查<canvas><canvas>支持

内加载()事件处理程序,我们得到一个参考用的帆布元[cv]使用querySelector()方法,并参考其2D绘制的上下文对象[ctx]的帮助getContext()方法的。

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ /*...*/ } };

我们还需要检查如果画布上的支持UA通过确保所绘制的上下文对象[ctx]存在并不是不确定的的。 我们会把所有代码归属的负荷事件入这如果条件。

建议阅读: 15JavaScript方法DOM操纵,用于网页开发人员

3. 创建的初步变量

让我们创建三个全球变量,s的开始角度弧,tc的id若第()计时器,并pct的百分比数值的相同的计时器的。 代码tc=pct=0分配0作为初始价值的tc和pct变量。

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ s=1.5*数学。PI, tc=pct=0; } };

以显示如何价值的s计算,让我迅速地解释如何弧角度的工作。

弧角度

的对向角(角度组成的两个线的定义一个弧)的周长上的一个圆是2π rad,其中rad是弧度部符号。 这使得角度对一个季度弧等于0.5π rad的。

图像:维基百科

当可视化装载进展,我们希望圈在画布上绘制从顶部位置,而不是默认的权利。

顺时针(默认的方向弧是绘画布上)从正确的位置,顶点是后达到四分之三,即在一个角度1.5π rad的。 因此,我已经创建了可变s=1.5*数学。PI后表示开始的角度弧被画从画布上的。

4. 风格的圆

的绘图方面的对象,我们定义的线宽和strokeStyle性圆我们要汲取在下一个步骤。 该strokeStyle产代表它的颜色。

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ s=1.5*数学。PI, tc=pct=0; 环磷酰胺.线宽=2; 环磷酰胺.strokeStyle='紫红色'; } }; 5. 画的圆圈

我们添加一击事件的处理程序的载按钮[#lbtn]其触发若第定时器的60毫秒,该执行的功能,负责绘制的圆[updateLoader()]每60毫秒,直到这个圈子是充分绘制。

的若第()方法返回一个定时器id确定其计时器将其分配给tc变量。

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ s=1.5*数学。PI, tc=pct=0, btn=文件。querySelector('#lbtn'); 环磷酰胺.线宽=2; 环磷酰胺.strokeStyle='紫红色'; btn的。addEventListener("点击"、功能(){ tc=若第(updateLoader,60); }); } }; 6. 创建updateLoader()自定义功能

它的时间来建立的定义updateLoader()功能,是要由若第()方法当按点击(该事件被触发)。 让我告诉你密码,然后我们可以一起去的解释。

功能updateLoader(){ 环磷酰胺.clearRect(0, 0, 16, 16); 环磷酰胺.beginPath(); 环磷酰胺.弧(8,8,6,s,(pct*2*数学。PI/100+s)段); 环磷酰胺.行程(); 如果(pct===100){ clearInterval(tc); 返回; } pct++; }

的clearRect()方法清除矩形区域的帆布由其定义参数:(x,y)坐标的左上角落。 该clearRect(0,0,16,16)线擦除一切在16*16素的画布,我们已创建的。

的beginPath()方法创建一个新的路径的绘图,并程()方法油漆上,新创建的道路的。

在结束updateLoader()功能,百分比数[pct]增加1,并在增加我们检查,如果它等于100的。 当它的100%,若第() 计时器(确定的定时器的id,tc)被清除的帮助clearInterval()方法。

第三个参数的弧()方法是(x,y)坐标的中心弧和其半径的。 第四个和第五个参数表示的开始和结束的角度在其中绘制的弧开始和结束。

我们已经决定起始点的装载机的圈子,这是在角s,这将是同在所有迭代的。

结束的角度是将增加的百分比计,我们可以计算出大小的递增在以下方式。 说1%(价值1 100)相当于α角度出的2π一圈(2π=角的整个周),那么同样可以写下公式:

1/100=α/2π

在重新安排公式:

α=1*2π/100 α=2π/100

所以,1%是等同的角2π/100了一圈。 因此,结束角度期间的每一百分比增加是计算乘以2π/100百分比值的。 然后结果是加入s(开始角),因此弧来自同一位置开始每次。 这就是为什么我们使用的pct*2*数学。PI/100+s的公式来计算的结束角的代码段所述。

7. 添加图标

让我们把一个网站的链路元件入HTML<head><head>部分,直接或通过JavaScript。

<link rel="icon" type="image/ico" > <link rel="icon" type="image/ico" >

在updateLoader()功能,首先,我们获取的图标使用querySelector()方法,并将其分配给lnk变量。 然后我们需要出口的画像每次一个弧形绘制成编码的图像通过使用toDataURL()方法,并分配的数据URI的内容图像的图标的。 这创造了一个动画图标是相同的画布上装载的。

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ s=1.5*数学。PI, tc=pct=0, btn=文件。querySelector('#lbtn'), lnk=文件。querySelector('[rel="图标"]'); 环磷酰胺.线宽=2; 环磷酰胺.strokeStyle='紫红色'; btn的。addEventListener("点击"、功能(){ tc=若第(updateLoader,60); }); } }; 功能updateLoader(){ 环磷酰胺.clearRect(0, 0, 16, 16); 环磷酰胺.beginPath(); 环磷酰胺.弧(8,8,6,s,(pct*2*数学。PI/100+s)段); 环磷酰胺.行程(); 墨水href=的简历。toDataURL('image/png'); 如果(pct===100){ clearTimeout(tc); 返回; } pct++; }

你可以看看全代码在审查的。

奖金:使用装载异步活动

当你需要使用这个画画与装载作在一个网页,分配updateLoader()功能作为事件的处理程序进展()事件的行动的。

建议阅读: 了解同步和异步JavaScript–第1部分

例如,我们JavaScript会改变这样的在阿贾克斯:

加载=功能(){ cv=文件。querySelector('#中央静脉线'), ctx=的简历。getContext('2d'); if(!!环磷酰胺){ s=1.5*数学。PI, lnk=文件。querySelector('[rel="图标"]'); 环磷酰胺.线宽=2; 环磷酰胺.strokeStyle='紫红色'; } var把=程序(); 把.addEventListener('的进展'的,updateLoader); 把.open('','https://xyz.com/abc'); 把.发送(); }; 功能updateLoader(evt){ 环磷酰胺.clearRect(0, 0, 16, 16); 环磷酰胺.beginPath(); 环磷酰胺.弧(8,8,6,s,(evt的。装*2*数学。PI/evt的。总+s)段); 环磷酰胺.行程(); 墨水href=的简历。toDataURL('image/png'); }

在弧()方法,代替百分比数值[pct]与载财产的事件—这表示如果该文件已被载入,并在地方100使用总财产的ProgressEvent,其中表示总量被装载。

有不需要若第()在这种情况下,作为进展()事件是自动发射作为装载的进展。

发表评论

电子邮件地址不会被公开。 必填项已用*标注