91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

利用canvas實現的加載動畫效果實例代碼

發布時間:2020-10-22 01:51:44 來源:腳本之家 閱讀:141 作者:可我不愛聰明 欄目:web開發

前言

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

運行效果圖

利用canvas實現的加載動畫效果實例代碼

分析下這個效果:

      1.可以把這四個方塊標號

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

示例代碼:

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

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

石狮市| 峨边| 宜兴市| 壤塘县| 大埔区| 八宿县| 长泰县| 呼玛县| 彭水| 济源市| 奉节县| 铅山县| 河北区| 长葛市| 乐亭县| 濮阳市| 子长县| 翼城县| 确山县| 盐源县| 阿坝| 东乌| 颍上县| 乐安县| 南昌市| 海口市| 新营市| 台南市| 永宁县| 台江县| 昭觉县| 虞城县| 上虞市| 栾城县| 洛浦县| 濮阳县| 曲沃县| 武隆县| 张北县| 宁陵县| 台南县|