iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

向網頁施點魔法粉 framer-motion 系列

動畫是現代網頁不可或缺的元素,適當的動畫也能提升使用者體驗。framer-motion 是近年崛起的 React animation library,擁有完善的 API 與簡易的使用方法,讓添加動畫不再是新手的惡夢。

身為前端蔡鳥仔,起初興奮地寫出網頁本體,但總覺得自己的網頁少了什麼,
一點都不吸引人 :(。 對於動畫我只懂 CSS animation,學習 JS 與 React 已經帶來不少知識負荷了,如果有更快更簡單的建構漂亮網站那該有多好...。
一番挖掘後,於是選擇 framer-motion ,這個設計+ 開發一體的工具。

第一次參加鐵人賽請多多包涵。

參賽天數 29 天 | 共 15 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 11

#11 Line up ! Reorder Component

今天要講另一個很常用的 motion Component ─ <Reorder>,專門用來操作元件排序動畫,以後在做 todolist 除了新增予...

2022-09-24 ‧ 由 Rosa 分享
DAY 12

#12 Point and Line to Plane - SVG Animation

SVG 動畫很常在一些使用者互動上看到,例如 Navbar 上的小漢堡。而在 motion API SVG 也可以變成 motion.path、motion.c...

2022-09-25 ‧ 由 Rosa 分享
DAY 13

#13 The New Style - useMotionValue & useMotionTemplate

motion 元件都會使用到 Motion value,主要用來訂閱 (subscribe) 動畫或運動狀態的值,一般來說 motion 元件自動會建立這些值...

2022-09-26 ‧ 由 Rosa 分享
DAY 14

#14 Move & Bounce Again - useTranfrom & useSpring

前一篇有提到 motion value 是可以搭配 useTransform 串聯多個值一起用的,可以根據一個/組數值產生一連串新的 motion value,...

2022-09-27 ‧ 由 Rosa 分享
DAY 15

#15 Bump in to you - useScroll & useInView

useScroll 的動畫很常使用,在之前的 Gestures 篇章只有 whileInView 來處理當滑動看到目標物並啟動動畫,但有時候我們會持續性地觸發...

2022-09-28 ‧ 由 Rosa 分享