2021年4月20日 星期二

用 Anime.js 做網頁動畫

今天在 Youtube 看到 Javascript 動畫函式庫 Anime.js 的介紹 : 









記得十餘年前小狐狸們還在讀小學時我也找到一個同樣名為 Anime 的動畫製作軟體, 那時對動畫興致很高卻沒有時間學習 (買了一些 Flash 的書同樣也是摸幾下就束之高閣), 今天看到這個 Anime.js 真的感到非常親切, 也很感慨, 原來時光飛逝如此之快.  

Anime.js 是一套在網頁上製作動畫的開放原始碼函式庫, 目前已發展到 v3.2.1 版, 參考 :


其函式庫可在 GitHub 的 lib 目錄下載, 原始版 anime.js 約 802 KB, 壓縮版 anime.min.js 約 375 KB, 算是很輕量的函式庫 :


將 anime.min.js 放在專案目錄下, 直接嵌入網頁中即可使用. 網頁中需搭配動畫中欲操作的目標元素 (targets), 可以是下列幾種 :
  • div 元素
  • DOM 節點或其串列
  • CSS 選擇器 (常用 .classname 與 #id)
  • Javascript 物件
  • 以上之陣列組合
這些 targets 通常需要 CSS 配合來製作物件的外觀 (大小, 色彩, 邊框, 外型等), 最重要的是呼叫 anime() 並傳入設定物件進行初始化 :

var animation=anime({
  //properties
  });    

模板網頁如下 :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Anime.js Test</title>
  <script src="anime.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      }
  </style>
</head>
<body>
  <div></div>
  <script>
    var animation=anime({   //初始化
      targets: 'div',
      //settings
      });
  </script>
</body>
</html>

也可以用 jsdelivr.net 提供的 CDN 服務 :


CDN 模板網頁如下 : 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Anime.js Test</title>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: green;
      }
  </style>
</head>
<body>
  <div></div>
  <script>
    var animation=anime({
      targets: 'div',
      //settings
      });
  </script>
</body>
</html>

以上模板只是指定網頁中的 div 元素為目標, 並未指定動畫屬性, 因此僅依此 div 元素之 CSS 設定在網頁中顯示一個 100*100 px 的 cyan 顏色方塊. 

Anime.js 的動畫效果主要是靠傳入 anime() 的屬性物件來設定, 除了 targets 屬性外, 還有下列三種屬性 :
  • properties (屬性) :
    與 CSS, Javascript, DOM, SVG 等動畫設定相關之屬性, 例如 translateX, borderRadius 等.
  • property parameters (屬性參數) :
    例如 duration, delay, easing 等
  • animation parameters (動畫參數) :
    例如 direction, loop 等 
參考 : 


例如 : 


測試 1 : 移動的球 [看原始碼]  

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Anime.js Test</title>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: green;
      border-radius: 50%;
      }
  </style>
</head>
<body>
  <div class="circle"></div>
  <script>
    var animation=anime({
      targets: '.circle',
      translateX: 300
      });
  </script>
</body>
</html>

此例用 class=circle 的樣式將 div 元素裝扮成一個直徑 100px 的綠色圓球, 透過 translateX 屬性將此球往右 (X 軸) 移動 300 px, 結果如下 : 




此例 taget 為 class, 下面這個範例則用 CSS 選擇器直接指定 div 元素 :



<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Anime.js Test</title>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      }
  </style>
</head>
<body>
  <div></div>
  <script>
    var animation=anime({   //初始化
      targets: 'div',                  //目標 div 元素
      translateX: 100,            //移動 100 px
      borderRadius: 50,         //變形邊緣半徑
      duration: 2000,             //動畫時間 (ms)
      easing: 'linear',              //線性變形
      direction: 'alternate'      //返回恢復原狀
      });
  </script>
</body>
</html>

此範例設定了一個為時 2 秒的變形動畫, 100*100 px 的正方形會向右線性移動變成圓形, 再返回原點回復方形, 結果如下 : 




嗯, 看來 Anime.js 也很好玩, 但因為 p5.js 還沒測完, 所以先起個頭就好, 有空再繼續玩唄. 在正式測試之前要先把線上文件看完, 參考 :


張貼者： 於
標籤： , , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )