約 5 分鐘 · React 16.8+ · React DOM
開始
從安裝到手勢與進出場動態，共六步。每一步都是一個能執行的小元件。
安裝
Animated 沒有執行期相依套件。React 16.8+ 是 peer 相依。
套件進入點標記了 'use client'。在 Next.js App Router 中，伺服器的 layout 可以渲染
AnimatedProvider；Hook 與Animated.<tag>請在 Client Component 中使用。npm install @kkwaenggwari/animated編輯器能解析
@kkwaenggwari/animated的匯入。讓第一個值動起來
useAnimatedValue(1)在元件的生命週期內持有一個動態數字。把它直接放進style：它會變成 CSS 變數，所以值改變時 React 不會渲染。timing(value, { toValue, duration }).start()讓它動起來。中途再按一次，會從目前的不透明度開始。正在準備範例…
方塊淡出再淡入，中途再按一次會從目前位置反向。
從一個值推導出多個輸出
interpolate把值對應到長度、角度或數字。沒有緩動時，它會成為同一個變數的精確calc()，所以五條軌道的成本和一條相同。同一個值使用不同的輸入範圍，就能做出層疊效果，不需要五個獨立的動畫。
正在準備範例…
按一次，五條軌道層疊移動；修改 spread 只會改變範圍。
描述目的地
Animated.button渲染的是一般的 button。seed是第一格，pose是它現在應在的位置，tempo是它怎麼過去。如果
pose在途中改變，元素會從畫面上的當下位置轉向，使用彈簧時還會保留速度。正在準備範例…
快速點擊卡片，也不會有卡片跳動。
串接輸入
input(ref, moveInput(...))把指標座標寫進值。follow(target, source)讓一個值以彈簧方式追隨另一個值。在
useAnimated工廠函式中宣告的一切都歸元件所有：元件卸載或相依值改變時，監聽器與彈簧都會停止。正在準備範例…
卡片朝指標傾斜，指標離開後恢復原位。
為離場加上動畫
移除 React 子元素通常會讓它立刻消失。
Animated.Keep會保留有 key 的子元素，直到它們的depart姿態播放完畢。wait會等所有離場結束後，才渲染新的子元素。正在準備範例…
被關閉的訊息會以選定的動態離場，然後才消失。
你已經掌握整個模型
值、目的地、輸入與離場共用相同的控制器、中斷規則與清理機制。指南會逐一深入說明。