动画与手势

npx expo install react-native-reanimated react-native-gesture-handler

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

const fade = new Animated.Value(0); // 0 到 1 的进度

// 1. timing：按时长和缓动曲线推进
Animated.timing(fade, {
  toValue: 1,
  duration: 300,
  easing: Easing.out(Easing.cubic),
  useNativeDriver: true,
}).start();

// 2. spring：物理弹簧，收尾有轻微回弹，按压反馈首选（friction 越大回弹越少，tension 为刚度）
Animated.spring(fade, { toValue: 1, friction: 6, tension: 60, useNativeDriver: true }).start();

// 3. decay：惯性滑动，给一个初速度让它自己滑走
Animated.decay(fade, { velocity: 0.8, deceleration: 0.998, useNativeDriver: true }).start();

const style = {
  opacity: progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  }),
  translateY: progress.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [40, 8, 0], // 三段折线，0.5 处减速
    extrapolate: 'clamp',    // 超界钳制，防止手势拖出边界值飞出去
  }),
};

// 编排：并发 / 串行 / 错峰并发 / 循环
Animated.parallel([animA, animB]).start();
Animated.sequence([animA, animB]).start();
Animated.stagger(80, items.map((_, i) => rowAnim(i))).start(); // 列表逐行错峰入场
Animated.loop(Animated.sequence([inAnim, outAnim])).start();

// 派生：对 Value 做算术得到新的 Animated 值；任意组件可用 createAnimatedComponent 挂动画样式
const bounded = Animated.diffClamp(Animated.add(offsetX, offsetY), 0, 120); // 折叠头部常用

import React, { useEffect, useRef } from 'react';
import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';

export function FadeInCard({ title, onPress }: { title: string; onPress?: () => void }) {
  const appear = useRef(new Animated.Value(0)).current; // 0 未显示，1 完全显示
  const press = useRef(new Animated.Value(1)).current;  // 按压缩放，1 为基准

  useEffect(() => {
    Animated.timing(appear, {
      toValue: 1,
      duration: 320,
      easing: Easing.out(Easing.cubic),
      useNativeDriver: true,
    }).start();
    return () => { appear.stopAnimation(); press.stopAnimation(); };
  }, [appear, press]);

  const pressIn = () =>
    Animated.spring(press, { toValue: 0.97, friction: 5, useNativeDriver: true }).start();
  const pressOut = () =>
    Animated.spring(press, { toValue: 1, friction: 4, useNativeDriver: true }).start();

  // 两个值分别驱动 opacity / translateY（appear）和 scale（press）
  const cardStyle = {
    opacity: appear,
    transform: [
      { translateY: appear.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) },
      { scale: press },
    ],
  };

  return (
    <Pressable onPressIn={pressIn} onPressOut={pressOut} onPress={onPress}>
      <Animated.View style={[styles.card, cardStyle]}>
        <Text style={styles.title}>{title}</Text>
      </Animated.View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20, margin: 12 },
  title: { fontSize: 17, fontWeight: '600' },
});

import React, { useRef } from 'react';
import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';

export function FocusableField() {
  const focus = useRef(new Animated.Value(0)).current; // 0 未聚焦，1 聚焦

  const animateTo = (value: 0 | 1) =>
    Animated.timing(focus, {
      toValue: value,
      duration: 200,
      useNativeDriver: true,
    }).start();

  // 同一个值，映射出 label 的位移与缩放
  const labelStyle = {
    transform: [
      { translateY: focus.interpolate({ inputRange: [0, 1], outputRange: [0, -18] }) },
      { scale: focus.interpolate({ inputRange: [0, 1], outputRange: [1, 0.78] }) },
    ],
    opacity: focus.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }),
  };

  // 下划线用 scaleX 伪装"宽度从 0 展开"，规避 width 不能上原生驱动的限制
  const underlineStyle = {
    transform: [
      { scaleX: focus.interpolate({ inputRange: [0, 1], outputRange: [0.1, 1] }) },
    ],
  };

  return (
    <View style={styles.field}>
      <Animated.Text style={[styles.label, labelStyle]}>邮箱</Animated.Text>
      <TextInput placeholder="you@example.com" onFocus={() => animateTo(1)} onBlur={() => animateTo(0)} />
      <View style={styles.underlineTrack}>
        <Animated.View style={[styles.underline, underlineStyle]} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  field: { paddingHorizontal: 16, paddingTop: 24 },
  label: { fontSize: 13, color: '#666', marginBottom: 4 },
  underlineTrack: { height: 1, backgroundColor: '#ddd' },
  underline: { height: 1, backgroundColor: '#3b82f6' },
});

import { LayoutAnimation, Platform, UIManager } from 'react-native';

// 安卓旧版本需要显式开启实验开关；新架构下各版本的开关行为有调整，
// 建议在目标 RN 版本真机实测后再决定是否保留这行。
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

function addItem() {
  LayoutAnimation.configureNext(
    LayoutAnimation.Presets.easeInEaseOut, // 还有 linear / spring
  );
  setItems((prev) => [...prev, nextItem()]);
}

const onDrag = (x: number) => {
  'worklet'; // 没有这行，下面这些代码在 JS 线程跑，等于白用 Reanimated
  sharedX.value = x;
};

import Animated, {
  useSharedValue, useAnimatedStyle,
  withTiming, withSpring, withDecay,
  withSequence, withDelay, cancelAnimation,
} from 'react-native-reanimated';

const opacity = useSharedValue(0);

// JS 线程里读写 .value 都合法；worklet 里读写走的是 UI 线程视图
opacity.value = withTiming(1, { duration: 300 });
opacity.value = withSpring(1, { damping: 12, stiffness: 120, mass: 0.8 });
opacity.value = withDecay({ velocity: 0.9, deceleration: 0.995 });

// 编排：withSequence 串行，withDelay 插队延时
opacity.value = withSequence(
  withTiming(0.4, { duration: 100 }),
  withDelay(200, withSpring(1)),
);

// 完成回调 + 中途取消
opacity.value = withTiming(1, {}, (finished) => {
  'worklet';
  if (!finished) console.log('被 cancelAnimation 打断');
});
// cancelAnimation(opacity);

const x = useSharedValue(0);
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: x.value }],
}));

<Animated.View style={style} />

import Animated, {
  useSharedValue, useAnimatedStyle, useAnimatedScrollHandler,
  interpolate, Extrapolation,
} from 'react-native-reanimated';

const HEADER_HEIGHT = 160;

export function CollapsingHeader() {
  const offsetY = useSharedValue(0);

  const onScroll = useAnimatedScrollHandler((e) => {
    offsetY.value = e.contentOffset.y;
  });

  // 头部整体上移，最多吃掉 HEADER_HEIGHT
  const headerStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -Math.min(offsetY.value, HEADER_HEIGHT) }],
  }));

  // 头部内容随滚动淡出；导航栏小标题随滚动淡入
  const coverOpacity = useAnimatedStyle(() => ({
    opacity: interpolate(offsetY.value, [0, HEADER_HEIGHT], [1, 0], Extrapolation.CLAMP),
  }));
  const titleOpacity = useAnimatedStyle(() => ({
    opacity: interpolate(offsetY.value, [HEADER_HEIGHT - 60, HEADER_HEIGHT], [0, 1], Extrapolation.CLAMP),
  }));

  return (
    <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <Animated.View style={[{ height: HEADER_HEIGHT }, headerStyle]}>
        <Animated.View style={coverOpacity} />
      </Animated.View>
      <Animated.Text style={[styles.navTitle, titleOpacity]}>文章标题</Animated.Text>
      {/* 正文 */}
    </Animated.ScrollView>
  );
}

import Animated, {
  FadeIn, FadeInUp, SlideInLeft, SlideInUp, ZoomIn, ZoomOut,
  FadeOut, SlideOutDown,
  Layout,
} from 'react-native-reanimated';

<Animated.View entering={FadeInUp.duration(250)} exiting={FadeOut}>...</Animated.View>

import React, { useState } from 'react';
import { Text } from 'react-native';
import Animated, {
  SlideInRight, ZoomOut, Layout,
} from 'react-native-reanimated';

const INITIAL = Array.from({ length: 8 }, (_, i) => `第 ${i + 1} 项`);

export function RemovableList() {
  const [items, setItems] = useState(INITIAL);

  return (
    <Animated.FlatList
      data={items}
      keyExtractor={(item) => item}
      renderItem={({ item, index }) => (
        <Animated.View
          entering={SlideInRight}
          exiting={ZoomOut}
          layout={Layout.Linear.duration(240)} // 删除后其余项滑向新位置
        >
          <Text onPress={() => setItems((prev) => prev.filter((_, i) => i !== index))}>
            {item}（点我删除）
          </Text>
        </Animated.View>
      )}
    />
  );
}

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <RootNavigator />
    </GestureHandlerRootView>
  );
}

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const tap = Gesture.Tap()
  .taps(2)                 // 双击
  .maxDuration(250)        // 按下-抬起超时判定
  .onEnd(() => { 'worklet'; /* 双击达成 */ });

const longPress = Gesture.LongPress()
  .minDuration(400)
  .onStart(() => { 'worklet'; /* 触发震动反馈 */ })
  .onEnd((_, success) => { 'worklet'; if (!success) { /* 提前松手，未达标 */ } });

const pan = Gesture.Pan()
  .activeOffsetX([-12, 12])   // 横向移动超过 12px 才激活
  .failOffsetY([-20, 20])     // 纵向先动则放弃（让位给滚动）
  .onBegin((e) => { 'worklet'; })
  .onUpdate((e) => { 'worklet'; /* e.translationX / e.velocityX */ })
  .onEnd((e) => { 'worklet'; })
  .onFinalize(() => { 'worklet'; });

const twoFingerPan = Gesture.Pan().activeTouches(2); // 至少两个触点才激活
const singleTap = Gesture.Tap().maxPointers(1);      // 按下第二根手指即失败

const pan = Gesture.Pan();
const pinch = Gesture.Pan(); // 示意，双指场景

// 同时进行（地图拖拽 + 缩放互不干扰）
const combined1 = Gesture.Simultaneous(pan, pinch);
// 竞速：谁先满足激活条件谁赢，另一个作废（点 vs 拖）
const combined2 = Gesture.Race(tap, pan);
// 有序仲裁：按声明顺序判定（区别于 Race 的"先到先得"）
const combined3 = Gesture.Exclusive(pan, tap);

Gesture.Pan().onUpdate((e) => {
  'worklet';
  progress.value = e.translationX / 300; // 只写 shared value
});

const style = useAnimatedStyle(() => ({
  transform: [{ translateX: progress.value * 300 }],
}));

import React from 'react';
import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue, useAnimatedStyle,
  withTiming, withDecay, runOnJS,
} from 'react-native-reanimated';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');
const CLOSE_DISTANCE = SCREEN_HEIGHT / 3;

export function DismissibleCard({ onClose }: { onClose: () => void }) {
  const translateY = useSharedValue(0);
  const startY = useSharedValue(0);

  const gesture = Gesture.Pan()
    // 只响应向上拖出的手势起点，纵向位移全部接管
    .shouldCancelWhenOutside(false)
    .onBegin(() => {
      'worklet';
      startY.value = translateY.value;
    })
    .onUpdate((e) => {
      'worklet';
      const next = startY.value + e.translationY;
      // 允许向下拖出，向上最多给 24px 橡皮筋阻力
      translateY.value = next > 0 ? next : next * 0.2;
    })
    .onEnd((e) => {
      'worklet';
      if (translateY.value > CLOSE_DISTANCE) {
        // 拖过阈值：滑出屏幕，动画结束后回 JS 线程通知关闭
        translateY.value = withTiming(
          SCREEN_HEIGHT,
          { duration: 220 },
          (finished) => {
            'worklet';
            if (finished) runOnJS(onClose)();
          },
        );
      } else {
        // 未过阈值：用松手速度做惯性衰减，clamp 限制在可拖区间
        translateY.value = withDecay({
          velocity: e.velocity.y,
          deceleration: 0.995,
          clamp: [-24, CLOSE_DISTANCE],
        });
      }
    });

  const style = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <Pressable style={styles.backdrop} onPress={onClose}>
      <GestureDetector gesture={gesture}>
        <Animated.View style={[styles.card, style]}>
          <View style={styles.handle} />
          <Text style={styles.title}>详情</Text>
          <Text>往下拖这张卡片试试——松手会回弹，拖过三分之一屏直接划走。</Text>
        </Animated.View>
      </GestureDetector>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' },
  card: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 20,
    paddingBottom: 40,
  },
  handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: '#ddd', alignSelf: 'center', marginBottom: 16 },
  title: { fontSize: 18, fontWeight: '700', marginBottom: 8 },
});