React Native 中如何实现动画？

推荐答案

在 React Native 中实现动画主要有两种方式：使用 Animated API 和使用 LayoutAnimation API。

使用 Animated API

Animated API 是 React Native 中最常用的动画实现方式，适用于复杂的、可交互的动画。以下是一个简单的示例：

// www.javascriptcn.com code example
import React, { useRef, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

const FadeInView = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // 初始透明度为 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1, // 最终透明度为 1
      duration: 2000, // 动画持续 2 秒
      useNativeDriver: true, // 使用原生驱动
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{ ...styles.container, opacity: fadeAnim }}>
      <View style={styles.box} />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default FadeInView;

使用 LayoutAnimation API

LayoutAnimation API 适用于简单的布局变化动画，如视图的添加、删除或重新排列。以下是一个简单的示例：

// www.javascriptcn.com code example
import React, { useState } from 'react';
import { View, Button, LayoutAnimation, StyleSheet } from 'react-native';

const LayoutAnimationExample = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setExpanded(!expanded);
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Expand" onPress={toggleExpand} />
      <View style={[styles.box, expanded && { height: 200 }]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
});

export default LayoutAnimationExample;

本题详细解读

Animated API

Animated API 提供了丰富的动画类型和配置选项，适用于需要精细控制的动画场景。它支持以下动画类型：

• Animated.timing()：基于时间的动画，可以设置 duration 和 easing。
• Animated.spring()：弹簧动画，模拟物理效果。
• Animated.decay()：衰减动画，模拟速度逐渐减慢的效果。

Animated API 还支持组合动画、插值、事件处理等功能，适合实现复杂的动画效果。

LayoutAnimation API

LayoutAnimation API 主要用于处理布局变化时的动画效果，如视图的添加、删除或重新排列。它通过自动处理布局变化来实现动画效果，适合简单的布局动画场景。

LayoutAnimation API 的优势在于使用简单，只需调用 LayoutAnimation.configureNext() 并传入预设的动画配置即可。常用的预设配置包括：

• LayoutAnimation.Presets.spring：弹簧效果。
• LayoutAnimation.Presets.linear：线性效果。
• LayoutAnimation.Presets.easeInEaseOut：缓入缓出效果。

选择依据

• 如果需要实现复杂的、可交互的动画，推荐使用 Animated API。
• 如果只是简单的布局变化动画，推荐使用 LayoutAnimation API，因为它更简单且性能更好。