动画与手势

RN 动画的两种运行模式

React Native 动画存在一个根本性的性能挑战：JS 线程和 UI 线程是分离的。当 JS 线程忙于处理业务逻辑、网络请求、React 渲染时，动画帧就会丢失，表现为卡顿和掉帧。

解决方案是将动画逻辑"移到" UI 线程执行，即使 JS 线程完全冻结，动画也能保持流畅。这就是 Reanimated 3 的核心价值。

核心名词解释

JS 驱动 vs UI 线程动画

Animated API（内置方案）

import { Animated, Easing } from 'react-native';
import { useRef, useEffect } from 'react';

export function FadeInCard({ children }: { children: React.ReactNode }) {
  const opacity = useRef(new Animated.Value(0)).current;
  const translateY = useRef(new Animated.Value(20)).current;

  useEffect(() => {
    // 并行执行两个动画
    Animated.parallel([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 400,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true, // 必须！让动画跑在 UI 线程
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 400,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  return (
    <Animated.View
      style={{
        opacity,
        transform: [{ translateY }],
      }}
    >
      {children}
    </Animated.View>
  );
}

Reanimated 3：UI 线程动画

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

export function DraggableCard() {
  // SharedValue 可跨 JS 和 UI 线程共享
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const scale = useSharedValue(1);

  // 拖拽手势（在 UI 线程处理，无延迟）
  const gesture = Gesture.Pan()
    .onBegin(() => {
      'worklet'; // 在 UI 线程执行
      scale.value = withSpring(1.05); // 按下时放大
    })
    .onUpdate((event) => {
      'worklet';
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      'worklet';
      // 松手后弹回原位（弹簧动画）
      translateX.value = withSpring(0, { damping: 20, stiffness: 200 });
      translateY.value = withSpring(0, { damping: 20, stiffness: 200 });
      scale.value = withSpring(1);
    });

  // 动画样式（worklet，在 UI 线程计算）
  const animatedStyle = useAnimatedStyle(() => {
    // 根据拖拽距离计算旋转角度
    const rotation = interpolate(
      translateX.value,
      [-150, 0, 150],
      [-15, 0, 15],
      Extrapolation.CLAMP
    );

    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
        { scale: scale.value },
        { rotate: `${rotation}deg` },
      ],
    };
  });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <Text>拖拽我！</Text>
      </Animated.View>
    </GestureDetector>
  );
}