大家好~

我是熱愛用 Canvas 創作的 Jerry！在這個系列中，我將帶你探索數學、物理和演算法的世界，透過 Canvas 來實現各種視覺效果。如果你對前端動畫與互動感興趣，那這就是為你設計的旅程！

五大主題

我們將探討五個重點，專注於 Canvas 特效實作，並穿插 React 和 Vue 元件的實戰操作，要如何掌握動畫控制並整合到專案中，透過我的經驗分享給大家，趕緊來看看大綱～
（雖然說是舞步，但我也不知道怎麼寫進標題，以後再說吧XD）

大綱

• 介面與元件設計
  1. A1 熱身的第一步：用React和Vue實做RWD吧！
  2. A2 腳步踩穩囉：啟動工廠模式下的 Canvas Transition 動畫
  3. A3 蹲馬步：掌握模板動態生成的導航欄元件
  4. A4 面板元件－靈活的收納按鈕設計
  5. A5 面板元件－一鍵搞定！錄影按鈕元件
  6. A6 React 和 Vue 實作表格元件：排序、搜尋與分頁功能詳解
  7. A7 React 和 Vue 實作表格元件：排序、搜尋、資料狀態管理

• 粒子系統與動畫管理
  1. B1 玩轉 IntersectionObserver：打造你的專屬動畫管理器！
  2. B2 玩轉 IntersectionObserver：揭秘動畫管理員的設計與實作細節！
  3. B3 中間人架構：從三個繪圖系統看分離關注點的重要性
  4. B4 在旋轉的沙漏中：掠食者與獵物的動態美學
  5. B5 掌握分層渲染：製作高效 Canvas 繪圖工具
  6. B6 從掠食者-獵物模型瞥見粒子系統－魔幻引力
  7. B7 與 Web Worker 互動：多執行緒渲染真的能提升效能嗎？

• 看見演算法
  1. C1 彈跳吧！彈珠－粒子系統彈性碰撞
  2. C2 讓排序演算法起舞吧！最小單位：華爾滋
  3. C3 上升的泡沫與選擇－迭代生成器驅動的排序動畫
  4. C4 流動的插入和希爾－迭代生成器驅動的排序動畫
  5. C5 快速排序的雙面交鋒－動畫背後的遞迴與迭代思維
  6. C6 合併排序的舞步－視覺化演繹分治法的魅力
  7. C7 堆排序的結構之美－動態演繹堆化過程的優雅
• 3D圖形與音頻資料
  1. Three.js 手作3D長條圖
  2. BufferGeometry－什麼是頂點？
  3. mesh、geometry、meterial 三位一體
  4. 聲音格式工廠
  5. 從頂點到幾何空間－封裝底層長條圖算法
• WebGL與著色器
  1. WebGL到底在幹嘛? 從for迴圈開始說起...
  2. 頂點著色器－座標轉換
  3. 片段著色器－渲染茱莉亞合集
  4. 片段著色器－渲染曼德柏羅集
  5. 反鋸齒

結語

這只是我們探索Canvas特效的開始！在接下來的文章中，假如時間足夠，還會寫流體力學的演算法、模擬水的世界！如果你對這些技術感興趣，千萬別錯過更新！記得訂閱，保持關注哦！