Animation

SootSim supports both the core Animated API and react-native-reanimated.

Animated API

engine/animated.ts implements:

• Animated.Value — observable value with listeners
• Animated.timing() — easing-based animation
• Animated.spring() — spring physics animation
• Animated.decay() — velocity-based deceleration
• Animated.sequence() — run animations in order
• Animated.parallel() — run animations simultaneously
• Animated.stagger() — staggered parallel start
• Animated.loop() — repeating animation

useNativeDriver

When useNativeDriver: true, animations run in the canvas frame loop (requestAnimationFrame) instead of triggering React re-renders. This matches React Native’s behavior of running animations on the UI thread.

Reanimated

The Reanimated stub (@soot/compat/stubs/react-native-reanimated.ts) provides:

• useSharedValue — reactive value with .value getter/setter
• useAnimatedStyle — derives styles from shared values
• withTiming — timing animation with configurable easing
• withSpring — spring animation with mass/damping/stiffness
• withSequence — sequential animations
• withRepeat — repeating animations
• interpolate — value mapping
• interpolateColor — color space interpolation
• useDerivedValue — computed values from shared values
• useAnimatedGestureHandler — gesture event handlers

Reanimated animations run in requestAnimationFrame and update shared values. useAnimatedStyle reads these values and triggers canvas re-renders via the SootSim render loop.

Native animation driver

engine/native-animation-driver.ts manages the frame loop:

1. collects all active animations
2. on each frame, advances animation time
3. updates animated values
4. triggers canvas re-render
5. removes completed animations