顯示具有 動畫 標籤的文章。 顯示所有文章
顯示具有 動畫 標籤的文章。 顯示所有文章

2024年9月27日 星期五

React 的動畫函式庫 Framer Motion

最近在網路上看到 Framer Motion 這個基於 React 的動畫函式庫, 雖然我沒學過 React (因為我偏愛 Vue), 但基於好奇, 就透過 ChatGPT 來快速了解其特性 :

問 : 請說明 Framer Motion 是甚麼? 
答 : 
Framer Motion 是一個用於 React 應用程式的動畫庫，提供簡單且強大的 API 來實現各種動畫效果。它是 Framer 團隊開發的，專注於流暢、高效的動畫，並支持許多動態交互，例如過渡效果、彈跳、拖動、滾動等。

Framer Motion 的特色包括：

  1. 簡單易用的 API：使用直觀的屬性（如 animate、initial 和 exit）來輕鬆為元件添加動畫。
  2. 性能優化：內建使用動畫關鍵幀、GPU 加速，確保動畫流暢、性能高效。
  3. 支援複雜的動畫：可以輕鬆地定義多階段動畫、拖動行為和手勢。
  4. 易於整合：可以與 React 框架中的其他元件或第三方庫（如 styled-components）無縫整合。
  5. 動態交互：支持互動性動畫，如當元素被拖動、點擊或滾動時的動畫效果。
可以用 GPU 加速真不賴ㄟ. 

問 : 需要先安裝甚麼執行環境嗎?   
答 : 
所需的環境：
  1. 安裝 Node.js 和 npm。
  2. React 應用程式（如 create-react-app）。
    命令列指令 :
    npx create-react-app my-app
    cd my-app
  3. 安裝 Framer Motion 後，即可在專案中使用它來添加動畫效果。
    npm install framer-motion
問 : 請比較 Framer Motion 與其他競爭之函式庫之優缺點 
答 : 

Framer Motion 在動畫和互動效果方面與其他動畫庫相比有獨特的優勢和挑戰。以下是它與幾個常見的競爭動畫函式庫之比較：

1. Framer Motion

優點：

  • 簡單且直觀的 API：使用者可以通過少量代碼快速建立動畫，API 設計對 React 開發者十分友好。
  • 強大的動態交互功能：支援拖曳（drag）、手勢、滾動動畫等複雜行為，適合現代互動式應用。
  • 自動管理動畫：動畫自動化過程（如布局過渡 layout transition），減少手動處理 DOM 的繁瑣工作。
  • React 專用優化：針對 React 環境進行深度優化，並與 React 16.8+ 的 Hooks 機制無縫集成。
  • 高性能：使用 requestAnimationFrame 和 GPU 加速技術來優化動畫性能，動畫流暢。

缺點：

  • 局限於 React：Framer Motion 是專為 React 應用設計的，因此無法在非 React 框架中使用。
  • 文件與學習曲線：儘管 API 簡單，但某些進階功能（如變換動畫、路徑動畫等）可能需要更多學習與摸索。

2. GSAP (GreenSock Animation Platform)

優點：

  • 功能強大且靈活：GSAP 支援所有類型的動畫效果，從簡單過渡到複雜的時序動畫，並且可用於任何 JavaScript 環境（不限於 React）。
  • 極高的瀏覽器相容性：GSAP 支援各種瀏覽器，包括 IE9+，且在不同的環境中保持一致的表現。
  • 複雜的時序控制：GSAP 提供功能豐富的時間軸（timeline）系統，可以精確控制動畫的執行順序和時間。

缺點：

  • 學習曲線較陡：GSAP 的功能多樣，對初學者來說學習成本較高，尤其是其複雜的 API 和動畫時序系統。
  • 相對於 React 整合性弱：雖然 GSAP 可以用於 React，但它並不像 Framer Motion 那樣針對 React 進行專門的優化，整合上稍微繁瑣。

3. Anime.js

優點：

  • 輕量且靈活：Anime.js 是一個體積小巧的動畫庫，適合實現精簡的動畫效果，尤其是在 DOM 操作和 SVG 路徑動畫上表現優異。
  • 多類型動畫支持：Anime.js 支援動畫對象包括 CSS 屬性、DOM 屬性、SVG、JSON、JavaScript 物件等，非常靈活。

缺點：

  • React 整合性不足：Anime.js 不是專為 React 設計的，與 React 整合時需要額外處理元件生命周期管理，導致開發體驗不如 Framer Motion 流暢。
  • 進階功能較弱：相比 GSAP 和 Framer Motion，Anime.js 在時間軸控制和交互性動畫上功能不如前兩者強大。

4. React Spring

優點：

  • 物理模擬動畫：React Spring 以物理模型為基礎，用彈簧物理模擬來構建動畫，提供比線性時間函數更自然的動畫效果。
  • React 整合良好：它也是專為 React 應用設計，與 React 的 Hook 和動畫狀態的管理深度集成，容易控制狀態變化中的動畫。
  • 靈活的 API：可以根據不同場景靈活選擇基於物理的動畫模型或傳統過渡動畫。

缺點：

  • 學習成本：對於需要精確控制的動畫，React Spring 的設置和配置相對複雜，對初學者來說學習成本較高。
  • 缺乏拖動、手勢等功能：相比 Framer Motion，React Spring 對於複雜的互動和手勢控制沒有專門的支援。
Framer Motion 的優勢在於它與 React 的深度整合、易於使用的 API 以及對複雜交互動畫的支持，非常適合需要打造高度互動、動態 UI 的 React 應用。GSAP 則適合需要實現複雜動畫且希望跨平台使用的場景，而 Anime.js 和 React Spring 則適合輕量或物理模擬動畫需求的項目。

總結比較如下表 : 




學 Framer Motion 得先學 React 累累, 似乎輕量的 Anime.js 較合我胃口. 不過我也只是偶然看到透過 AI 了解一下而已, 還真沒時間學, 先記著. 


張貼者： 於 沒有留言 :
標籤： ,

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 還沒測完, 所以先起個頭就好, 有空再繼續玩唄. 在正式測試之前要先把線上文件看完, 參考 :


張貼者： 於 沒有留言 :
標籤： , , ,

2010年6月28日 星期一

找回自己的興趣

昨天在鄉下上網時, 看到螢幕上的 TAB 與 TBS 突然想到, 這麼久沒用, 該不會已昇版了吧? 一查沒錯, the TAB 已昇版到 3.2.1, 而 TBS 則到 5.0 了. 趕緊到官網去下載來試用, 果真有改進, the TAB 已支援某些中文字型, 雖然還不算滿意, 而 TBS 則越來越好, 雖然它沒有中文.
晚上回高雄路上, 小狐狸們討論將來要做什麼, 我想了想, 我如果沒有作現在的工作, 重新來的話, 我要當動畫師! 是呀, 我寫程式, 做語言學研究, 忙很多事, 但其實心裡真正的興趣是畫動畫! 不要等什麼時候, 現在就開始.
張貼者： 於 沒有留言 :
標籤： ,
訂閱： 文章 ( Atom )