Animations

作者 software-mansion-labse3f00cdb3494無授權條款291 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫10 天前更新

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, CSS pseudo-selectors, CSS callbacks, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.

僅含說明Software Development Design & Creative

AI 產生的概覽

在 React Native 中以 Reanimated 4、Skia、WebGPU 與 TypeGPU 製作正式環境動畫的參考模式。

功能: 此技能提供在 React Native 中製作介面動畫的指引與參考資料。內容涵蓋 CSS 轉場與動畫、共享值動畫、版面動畫與捲動驅動動畫、以 Skia 實作的畫布與精靈動畫、WebGPU 與 TypeGPU 的 GPU 著色器動畫，以及效能調校與無障礙支援。它僅提供文件，本身不會產生檔案或程式碼成品。
適用情境: 適合在撰寫或審查 React Native 動畫程式碼時使用，例如在 CSS 轉場與共享值之間做選擇，或實作版面、捲動、畫布、SVG 與 GPU 著色器動畫。也適合排查動畫效能問題或處理減少動態效果的無障礙需求。
執行需求: 需要採用 Reanimated 4 與新架構的 React Native 專案；部分主題假定已使用 react-native-skia、react-native-wgpu、TypeGPU 或 Three.js。它會從 node_modules 或鎖定檔讀取已安裝的 Reanimated 版本，並可能透過網路取得所連結的文件頁面。未附帶任何指令碼。

Animations

Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.

Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.

Version Check

Read the installed Reanimated version before writing animation code: node_modules/react-native-reanimated/package.json or the lockfile, not the package.json range. Reanimated 3.x has no CSS transitions or animations; use shared values there. On 4.x, a feature used below the version that added it (table in animations.md) is silently ignored or throws: do not emit it, and if the user asked for that feature, say which version adds it.

Critical Rules

NEVER use runOnJS. It is removed in Reanimated 4. Use scheduleOnRN(fn, ...args) from react-native-worklets instead. This applies everywhere: scroll handlers, gesture callbacks, useAnimatedReaction, useFrameCallback, and any other worklet context.

References

File	When to read
`animations.md`	Choosing between CSS transitions, CSS animations, and shared value animations; CSS feature availability by Reanimated version; CSS transition and CSS animation patterns and rules; CSS callbacks (`onCSS*`, 4.6.0+); animating text; infinite animation cleanup; `scheduleOnRN`
`css-pseudo-selectors.md`	Interaction state without React state: `:hover`, `:active`, `:active-deepest`, `:focus`, `:focus-within` (4.5.0+), selector precedence, the property lock, per-platform press traps
`animation-functions.md`	Gotchas and rules for core hooks (`useSharedValue`, `useAnimatedStyle`, `useAnimatedProps`, `useDerivedValue`); `withSpring` config modes; `withRepeat` and `withClamp` caveats; composing animations
`layout-animations.md`	Entering/exiting animation gotchas (`nativeID` conflict, view flattening); layout transitions; keyframe animation rules; list item animations (`itemLayoutAnimation`); shared element transitions
`scroll-and-events.md`	Scroll-driven animation patterns (`useAnimatedScrollHandler`, `scrollTo`, `useScrollOffset`); `useAnimatedReaction` patterns; `useFrameCallback`; `measure` rules
`canvas-animations.md`	Canvas animations with `@shopify/react-native-skia`; Reanimated integration (shared values as direct props); `interpolateColors`; retained vs immediate mode (Picture API); path animations (`usePathInterpolation`, `usePathValue`); `useClock`; gesture integration and element tracking; SKSL runtime shaders and image filters; textures
`canvas-atlas.md`	Atlas for batched sprite/tile animation; `useTexture`, `useRSXformBuffer`; RSXform matrix format (`[scos, ssin, tx, ty]`)
`gpu-animations.md`	GPU shader animations; `react-native-wgpu` Canvas and device setup; TypeGPU typed pipelines; Reanimated + WebGPU worklet integration; compute pipelines for particle systems, physics, and simulations; `@typegpu/noise` (Perlin noise, PRNG); `@typegpu/sdf` (signed distance shapes); Three.js / React Three Fiber for 3D
`svg-animations.md`	Animating SVG elements and paths with Reanimated; `createAnimatedComponent` for SVG; progress arcs; pulsing circles
`animations-performance.md`	Performance tuning; 120fps setup; feature flags; FPS drop fixes; simultaneous animation limits; accessibility (`useReducedMotion`, `ReducedMotionConfig`); worklet closure optimization; debug vs release builds

來源與署名

來源：software-mansion-labs/skills位於skills/react-native-best-practices/references/animations提交e3f00cd

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Animations

Animations

Version Check

Critical Rules

References

來源與署名

更多來自 software-mansion-labs/skills 的技能

Svg

Rich Text

Jsi

Gestures

Enable Worklets Bundle Mode

Audio

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices