动画

这一课你将能做到

1. 用 Animated API 实现淡入淡出、位移、缩放动画，并正确开启原生驱动
2. 用插值让一个动画值同时驱动多个样式属性，做出「卡片入场」效果
3. 用 LayoutAnimation 一行代码搞定布局过渡，并说清楚 Reanimated 3 解决什么问题、什么时候必须用它

为什么要学

没有动画的 App 像 PPT 翻页——功能都在，但每个状态切换都是「瞬移」，用户感知不到界面之间的关联。好的动画是产品的「高级感」主要来源：点赞时爱心弹跳一下、弹窗从屏幕底部升起、列表项依次滑入，这些细节让界面从「能用」变成「好用」。

对开发者来说，RN 动画还有一个特殊关注点：性能。动画每秒钟要更新 60 帧，如果每一帧都要「JS 线程计算 → 跨桥通知原生 → 原生渲染」，一旦 JS 线程繁忙（比如在解析大 JSON），动画立刻掉帧卡顿。所以 RN 动画的核心知识不是「怎么动」，而是「怎么让动画跑在正确的线程上」。

人话：动画不是让元素「瞬移」，而是告诉系统「从 A 状态花 300 毫秒滑到 B 状态」，中间每一帧长什么样由系统自动补出来。你只需要管三件事：起点、终点、时长。而 useNativeDriver 就是决定「补帧」这件事交给谁做——交给原生线程做，就算 JS 在忙动画也流畅；交给 JS 做，JS 一卡动画就定格。

先建立图像

一个最小可运行的淡入动画，先感受全貌：

import { useRef } from 'react';
import { Animated, Button, StyleSheet, View } from 'react-native';

export default function App() {
  // 动画值必须放 useRef，不能放 useState
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,           // 终点
      duration: 500,        // 时长 500ms
      useNativeDriver: true, // 交给原生线程执行
    }).start();
  };

  return (
    <View style={styles.container}>
      {/* 必须用 Animated.View，普通 View 不认识动画值 */}
      <Animated.View style={[styles.box, { opacity }]} />
      <Button title="淡入" onPress={fadeIn} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 20 },
  box: { width: 100, height: 100, backgroundColor: '#007bff', borderRadius: 12 },
});

点按钮，蓝色方块在 0.5 秒内从完全透明渐变到不透明。Animated.Value 就是一个「会自己爬坡的数值」——你告诉它「从 0 爬到 1，用 500 毫秒」，它每帧更新一次当前值，绑在样式上的组件就跟着每帧重绘。

整个动画的执行模型：

Animated.timing(起点 0 → 终点 1, 500ms)
  ↓ 开启 useNativeDriver 时
动画声明一次性发给原生线程
  ↓
原生线程每帧计算当前值并渲染（JS 线程忙也不影响）
  ↓
屏幕上看到平滑过渡

跟着做

步骤 1：Animated 三板斧——位移入场

把淡入升级成「从屏幕下方滑入 + 淡入」的卡片入场效果：

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

export default function EntryCard() {
  const translateY = useRef(new Animated.Value(60)).current; // 初始在下方 60dp
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // parallel：位移和淡入同时执行
    Animated.parallel([
      Animated.timing(translateY, { toValue: 0, duration: 400, useNativeDriver: true }),
      Animated.timing(opacity, { toValue: 1, duration: 400, useNativeDriver: true }),
    ]).start();
  }, []);

  return (
    <Animated.View style={[styles.card, { opacity, transform: [{ translateY }] }]}>
      <Text style={styles.title}>欢迎回来</Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  card: { margin: 24, padding: 24, backgroundColor: '#fff', borderRadius: 16, elevation: 4 },
  title: { fontSize: 20, fontWeight: 'bold' },
});