欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用canvas實現(xiàn)的加載動畫效果實例代碼

 更新時間:2017年07月05日 16:43:20   作者:可我不愛聰明  
之前看到一個Android的加載效果不錯,一直想自己動手做一個,正好這段時間重溫了一個Canvas,所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實現(xiàn)加載效果的相關(guān)資料,需要的朋友可以參考下。

前言

以前在瀏覽文章時,看到過一個Android的加載效果,覺得挺好看的,于是自己就模仿了一個。下面話不多說,我們直接來看看詳細(xì)的介紹吧。

運行效果圖

分析下這個效果:

      1.可以把這四個方塊標(biāo)號

      2.這個運動效果其實只用分解為兩段動畫,一段是上下移動,一段是左右移動。

示例代碼:

/*核心代碼*/
/*分析動畫,其實動畫只有兩次的執(zhí)行*/
   var for_index = 1;//記錄當(dāng)前執(zhí)行動畫的序列
   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);

由于在高分屏下繪制有點模糊,于是引入了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)文章

  • layui使用數(shù)據(jù)表格實現(xiàn)購物車功能

    layui使用數(shù)據(jù)表格實現(xiàn)購物車功能

    這篇文章主要為大家詳細(xì)介紹了layui使用數(shù)據(jù)表格實現(xiàn)購物車功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 微信小程序如何獲取openid及用戶信息

    微信小程序如何獲取openid及用戶信息

    這篇文章主要介紹了微信小程序如何獲取openid及用戶信息,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • 取消Bootstrap的dropdown-menu點擊默認(rèn)關(guān)閉事件方法

    取消Bootstrap的dropdown-menu點擊默認(rèn)關(guān)閉事件方法

    今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點擊默認(rèn)關(guān)閉事件方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JS+Canvas實現(xiàn)自定義頭像功能

    JS+Canvas實現(xiàn)自定義頭像功能

    本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實現(xiàn)自定義頭像功能,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)有一定的幫助,感興趣的小伙伴可以了解一下
    2022-06-06
  • js事件處理程序跨瀏覽器解決方案

    js事件處理程序跨瀏覽器解決方案

    這篇文章主要為大家詳細(xì)介紹了js事件處理程序跨瀏覽器解決方案,感興趣的小伙伴們可以參考一下
    2016-03-03
  • JavaScript實現(xiàn)簡單的彈窗效果

    JavaScript實現(xiàn)簡單的彈窗效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • Javascript中瀏覽器窗口的基本操作總結(jié)

    Javascript中瀏覽器窗口的基本操作總結(jié)

    BOM全稱是brower object model(瀏覽器對象模型),主要用于管理窗口及窗口間的通訊,其核心對象是window。說窗口,可能并不準(zhǔn)確。因為,有的瀏覽器窗口可能包含多個標(biāo)簽頁,每個標(biāo)簽頁都有自己的window對象。本文將詳細(xì)介紹這些內(nèi)容,有需要可以參考學(xué)習(xí)。
    2016-08-08
  • iframe的onreadystatechange事件在firefox下的使用

    iframe的onreadystatechange事件在firefox下的使用

    firefox不支持iframe的onreadystatechange事件,不過有個方法可以實現(xiàn)同等的效果,需要的朋友可以參考下
    2014-04-04
  • JS得到當(dāng)前時間的方法示例

    JS得到當(dāng)前時間的方法示例

    這篇文章主要介紹了JS得到當(dāng)前時間的方法,結(jié)合具體實例形式對比分析了javascript獲取日期時間的相關(guān)操作技巧,需要的朋友可以參考下
    2017-03-03
  • js文件中直接alert()中文出來的是亂碼的解決方法

    js文件中直接alert()中文出來的是亂碼的解決方法

    下面小編就為大家?guī)硪黄猨s文件中直接alert()中文出來的是亂碼的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11

最新評論