利用canvas實(shí)現(xiàn)的加載動(dòng)畫效果實(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)畫，一段是上下移動(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é)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

一文了解你不知道的JavaScript閉包篇
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript閉包相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下
2022-11-11
淺談js中對(duì)象的使用
下面小編就為大家?guī)?lái)一篇淺談js中對(duì)象的使用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
詳解微信小程序緩存--緩存時(shí)效性
這篇文章主要介紹了微信小程序緩存時(shí)效性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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)代碼
本篇文章主要是對(duì)JS刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
不錯(cuò)的JS中變量相關(guān)的細(xì)節(jié)分析
不錯(cuò)的JS中變量相關(guān)的細(xì)節(jié)分析...
2007-08-08
JS面試之對(duì)事件循環(huán)的理解
這篇文章主要為大家介紹了JS面試之對(duì)事件循環(huán)的理解分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解微信小程序開(kāi)發(fā)之下拉刷新上拉加載
本篇文章主要介紹了微信小程序開(kāi)發(fā)之下拉刷新上拉加載，具有一定的參考價(jià)值，有興趣的可以了解一下。
2016-11-11
你不知道的前端console用法分享
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會(huì)在控制臺(tái)輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08