利用canvas實(shí)現(xiàn)的加載動(dòng)畫效果實(shí)例代碼
更新時(shí)間：2017年07月05日 16:43:20 作者：可我不愛聰明
之前看到一個(gè)Android的加載效果不錯(cuò)，一直想自己動(dòng)手做一個(gè)，正好這段時(shí)間重溫了一個(gè)Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實(shí)現(xiàn)加載效果的相關(guān)資料，需要的朋友可以參考下。
前言
以前在瀏覽文章時(shí)，看到過一個(gè)Android的加載效果，覺得挺好看的，于是自己就模仿了一個(gè)。下面話不多說，我們直接來看看詳細(xì)的介紹吧。
運(yùn)行效果圖
分析下這個(gè)效果：
1.可以把這四個(gè)方塊標(biāo)號
2.這個(gè)運(yùn)動(dòng)效果其實(shí)只用分解為兩段動(dòng)畫，一段是上下移動(dòng)，一段是左右移動(dòng)。
示例代碼：
/*核心代碼*/
/*分析動(dòng)畫，其實(shí)動(dòng)畫只有兩次的執(zhí)行*/
var for_index = 1;//記錄當(dāng)前執(zhí)行動(dòng)畫的序列
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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript閉包相關(guān)知識，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了微信小程序緩存時(shí)效性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法
這篇文章主要介紹了BootStrap 動(dòng)態(tài)添加驗(yàn)證項(xiàng)和取消驗(yàn)證項(xiàng)的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
ES6 exports與import導(dǎo)出模塊使用基礎(chǔ)示例
這篇文章主要為大家介紹了ES6 exports與import導(dǎo)出模塊使用基礎(chǔ)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
JS 刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼
本篇文章主要是對JS刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
不錯(cuò)的JS中變量相關(guān)的細(xì)節(jié)分析
不錯(cuò)的JS中變量相關(guān)的細(xì)節(jié)分析...2007-08-08
這篇文章主要為大家介紹了JS面試之對事件循環(huán)的理解分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本篇文章主要介紹了微信小程序開發(fā)之下拉刷新 上拉加載，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-11-11
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會(huì)在控制臺(tái)輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08