動畫是現代網頁不可或缺的元素,適當的動畫也能提升使用者體驗。framer-motion 是近年崛起的 React animation library,擁有完善的 API 與簡易的使用方法,讓添加動畫不再是新手的惡夢。
身為前端蔡鳥仔,起初興奮地寫出網頁本體,但總覺得自己的網頁少了什麼,
一點都不吸引人 :(。 對於動畫我只懂 CSS animation,學習 JS 與 React 已經帶來不少知識負荷了,如果有更快更簡單的建構漂亮網站那該有多好...。
一番挖掘後,於是選擇 framer-motion ,這個設計+ 開發一體的工具。
第一次參加鐵人賽請多多包涵。
今天要講另一個很常用的 motion Component ─ <Reorder>,專門用來操作元件排序動畫,以後在做 todolist 除了新增予...
SVG 動畫很常在一些使用者互動上看到,例如 Navbar 上的小漢堡。而在 motion API SVG 也可以變成 motion.path、motion.c...
motion 元件都會使用到 Motion value,主要用來訂閱 (subscribe) 動畫或運動狀態的值,一般來說 motion 元件自動會建立這些值...
前一篇有提到 motion value 是可以搭配 useTransform 串聯多個值一起用的,可以根據一個/組數值產生一連串新的 motion value,...
useScroll 的動畫很常使用,在之前的 Gestures 篇章只有 whileInView 來處理當滑動看到目標物並啟動動畫,但有時候我們會持續性地觸發...