iT邦幫忙

鐵人檔案

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

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

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

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

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

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

#01 Who & Why framer-motion ?

目錄 從坐著到行動 選擇動畫相關為主題 什麼是 framer motion ? 為什麼選 framer motion ? 先備知識 規劃 從坐著到行動 H...

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

#02 Dancing with Animation and Transition

以能夠做到 CSS 基本的動畫操作為切入點,初步了解 framer motion。 目錄 安裝環境 Magic Is Happening ! 躍上五線譜 :...

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

#03 Put your Gestures up - Hover, Focus & Tap

上篇講完了基本組成動畫的 props ,透過三種 animate 、 initial 以及 transition 可以交織出不同的動畫組合,這些動畫都是網頁載...

2022-09-16 ‧ 由 Rosa 分享
DAY 4

#04 Put your Gestures up II - Pan, whileDrag, whileInView

上篇只介紹到最基本的使用者互動操作,本篇的 Pan 、 whileDrag 具有持續的互動性,在過程中能依照更細節的偏移量 (offset)、速度 (velo...

2022-09-17 ‧ 由 Rosa 分享
DAY 5

#05 Kage Bunshin no Jutsu - Variants

Variants 可以讓元件以字串的方式帶入動畫,同時可以把相同的動畫抽出來,可以說是動畫的影分身之術,此外還有傳播的功能,可以使子元件相同 key 的動畫一...

2022-09-18 ‧ 由 Rosa 分享
DAY 6

#06 Magic ! layout props

華麗的特效很炫沒錯,但往往伴隨著效能卡頓的問題 QQ。在 網頁完整渲染的過程,會經過一系列的步驟,直到讓使用者看見畫面,光是改變元素大小,就會使流程在走一遍,...

2022-09-19 ‧ 由 Rosa 分享
DAY 7

#07 Magic is happening again - layout type & layoutGroup

目錄 腰間骨會痛記得要用 : layout 的其他種類 共享朋友 : layoutId 兄弟會 : LayoutGroup Component 本節...

2022-09-20 ‧ 由 Rosa 分享
DAY 8

#08 Everything in ... transition type

在第二天的時候有提到 transition 除了預設的 spring 彈簧效果,還有其他的種類,並且不同種類對應不同的設定數值,今天來認識這些值。除了 twee...

2022-09-21 ‧ 由 Rosa 分享
DAY 9

#09 Bye Bye Bye ! AnimatePresence Component

<AnimatePresence> 是使用在元件 unmount 時的離場動畫,在 React 的生命週期裡 unmount 就直接從畫面上消失了...

2022-09-22 ‧ 由 Rosa 分享
DAY 10

#10 Ok,Bye... AnimatePresence Page Transition

上一篇使用 <AnimatePresence> 都是直接底下包裹 motion 元件, 實際上我們更常把元件打包起來成客製化元件 (<Ite...

2022-09-23 ‧ 由 Rosa 分享