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