TweenMax 安裝與使用筆記

使用 NVM 管理 Node.js

如果直接從官網下載 Node.js，只會安裝固定版本；NVM 可以用來安裝及切換不同版本。

• 下載：nvm-windows
• 點選 nvm-setup.zip
• 開啟命令提示字元安裝 Node.js

nvm list
nvm list available
nvm install v8.12.0
nvm use v8.12.0

• nvm list：查看已安裝的版本
• nvm list available：查看可以安裝的 Node.js 版本
• nvm install v8.12.0：安裝指定版本
• nvm use v8.12.0：切換到指定版本
• LTS：穩定版本

確認是否安裝完成：

node -v

安裝的版本是：

v8.12.0

VS Code 套件

這裡也順便分享常用的VSCode套件:

• Monokai Dark Soda：編輯器配色
• Live Server：模擬 server 環境並開啟網頁
• colorize：顯示顏色標籤
• AutoFileName：協助尋找路徑
• vscode-icons：顯示專案資料夾圖示
• Copy filename：在右鍵選單直接複製檔名

TweenMax

• 安裝：TweenMax 下載頁（右上角下載）
• 動畫曲線：Ease Visualizer

to()

to 表示動畫要到哪裡，可以帶三個參數：

1. 要改變哪個物件，例如 ID 或 class。
2. 動畫要在幾秒內完成。
3. 要改變的屬性、函式與其他選項。

transformOrigin

transformOrigin 是中心點定位屬性：

(0,0)   (50,0)   (100,0)
(0,50)  (50,50)  (100,50)
(0,100) (50,100) (100,100)

回呼函式

• onStart：動畫開始以前執行，只會執行一次。
• onUpdate：動畫移動過程中不斷執行。
• onComplete：動畫結束時呼叫，只會執行一次，例如 onComplete: move。

這些回呼可用來做動畫生命週期的階段性偵測。

staggerTo

staggerTo 會依序處理元素：

TweenMax.staggerTo(
  '.pic',
  0.5,
  {
    transform: 'translateY(0px)',
    opacity: 1,
  },
  0.2,
);

所有物件會間隔 0.2 秒出現。

ScrollToPlugin

捲軸處理使用 ScrollToPlugin，使用方式可查官方文件裡的 scrollTo。

其他動畫筆記

水平置中的 CSS：

display: flex;
justify-content: center;

製作動畫時，先想好最後要呈現的樣子，再做初始化動作。

取得瀏覽器高度時，要扣掉物件本身的高度。物件的起始位置是左上角 (0, 0)：

const availableHeight = window.innerHeight - elementHeight;

無限重複旋轉與運動速率：

repeat: -1;
ease: Linear.easeInOut;

各瀏覽器滑鼠滾動事件相容性可參考：滑鼠滾輪事件的相容性整理。

快捷鍵

• Shift + 滑鼠右鍵：開啟命令視窗
• Ctrl+P：輸入 >icon 更換 VS Code 圖示