大家好~

我是熱愛用 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. D1 Three.js 與音訊處理：3D 音頻視覺化的架構搭建指南
  2. D2 從數據到視覺：利用 BufferGeometry 生成 3D 長條圖（上）
  3. D3 從數據到視覺：利用 BufferGeometry 生成 3D 長條圖（下）
  4. D4 高效處理大量數據：優化3D長條圖的頂點屬性更新策略
  5. D5 讓排序演算法起舞吧！響應式數據驅動 BufferGeometry
  6. D6 讓排序演算法起舞吧！3D圓餅圖的排序動畫
  7. D7 讓排序演算法互動！探索 Cannon.js 的物理世界

• WebGL與著色器
  1. E1 WebGL 基礎概念：透過for迴圈探討渲染流程
  2. E2 WebGL 畫圓範例：變數的傳遞與處理
  3. E3 渲染的奧秘：分形茱莉亞集合的片段著色器藝術
  4. E4 曼德博羅集的分形魔力：用片段著色器實現反鋸齒
  5. E5 流暢分形渲染：滑鼠與手勢互動在 React 的應用

結語

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