利用canvas實(shí)現(xiàn)的加載動(dòng)畫(huà)效果實(shí)例代碼
更新時(shí)間：2017年07月05日 16:43:20 作者：可我不愛(ài)聰明
之前看到一個(gè)Android的加載效果不錯(cuò)，一直想自己動(dòng)手做一個(gè)，正好這段時(shí)間重溫了一個(gè)Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實(shí)現(xiàn)加載效果的相關(guān)資料，需要的朋友可以參考下。
前言
以前在瀏覽文章時(shí)，看到過(guò)一個(gè)Android的加載效果，覺(jué)得挺好看的，于是自己就模仿了一個(gè)。下面話不多說(shuō)，我們直接來(lái)看看詳細(xì)的介紹吧。
運(yùn)行效果圖
分析下這個(gè)效果：
1.可以把這四個(gè)方塊標(biāo)號(hào)
2.這個(gè)運(yùn)動(dòng)效果其實(shí)只用分解為兩段動(dòng)畫(huà)，一段是上下移動(dòng)，一段是左右移動(dòng)。
示例代碼：
/*核心代碼*/
/*分析動(dòng)畫(huà)，其實(shí)動(dòng)畫(huà)只有兩次的執(zhí)行*/
var for_index = 1;//記錄當(dāng)前執(zhí)行動(dòng)畫(huà)的序列
var interval = setInterval(function(){
if(for_index == 1){
if(squre4.x == origin_squre.x - step * 2){
for_index = 2;
}else{
squre2.x -= 2;
squre2.y += 1;
squre4.x += 2;
squre4.y -= 1;
}
}else if(for_index == 2){
if(squre4.x == origin_squre.x){
for_index = 1;
/*重置方塊位置信息到初始值*/
init_squre(origin_squre.x,origin_squre.y);
}else{
squre3.x -= 2;
squre3.y -= 1;
squre2.x -= 2;
squre2.y -= 1;
squre4.x += 2;
squre4.y += 1;
squre1.x += 2;
squre1.y += 1;
}
}
ctx.clearRect(0,0,canvas.width,canvas.height);
/*重繪方塊*/
if(for_index == 1 || for_index == 2){
draw_squre(squre4);
draw_squre(squre1);
draw_squre(squre3);
draw_squre(squre2);
}
/*重繪陰影*/
get_shaow_pos();
for(var i in shaow_begin){
draw_shaow(shaow_begin[i]);
}
},1000 / 24);
由于在高分屏下繪制有點(diǎn)模糊，于是引入了hidpi-canvas.js
github地址：https://github.com/lzuntalented/lzLoading
本地下載：http://xiazai.jb51.net/201707/yuanma/lzLoading(jb51.net).rar
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
layui使用數(shù)據(jù)表格實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了layui使用數(shù)據(jù)表格實(shí)現(xiàn)購(gòu)物車功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了微信小程序如何獲取openid及用戶信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實(shí)現(xiàn)自定義頭像功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定的幫助，感興趣的小伙伴可以了解一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了js事件處理程序跨瀏覽器解決方案，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
BOM全稱是brower object model(瀏覽器對(duì)象模型)，主要用于管理窗口及窗口間的通訊，其核心對(duì)象是window。說(shuō)窗口，可能并不準(zhǔn)確。因?yàn)椋械臑g覽器窗口可能包含多個(gè)標(biāo)簽頁(yè)，每個(gè)標(biāo)簽頁(yè)都有自己的window對(duì)象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。2016-08-08
iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件，不過(guò)有個(gè)方法可以實(shí)現(xiàn)同等的效果,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS得到當(dāng)前時(shí)間的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript獲取日期時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
js文件中直接alert()中文出來(lái)的是亂碼的解決方法
下面小編就為大家?guī)?lái)一篇js文件中直接alert()中文出來(lái)的是亂碼的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11