如何在React Native中实现元素连续下落动画？

问题描述 #

我有一个大型对象数组，想要实现数组内元素逐个带动画下落展示的效果。思路是先展示单个元素，动画结束后更新状态再展示新元素。作为React Native新手，尝试用两个元素实现但效果未达预期，以下是我的尝试代码，也希望能得到新的实现方案。

尝试代码 #

import { useState, useEffect } from 'react';
import { View, Text, Animated, Easing } from 'react-native';

const YourComponent = () => {
  const [list, setList] = useState([
    { a: '元素1', b: '内容1', c: '备注1' },
    { a: '元素2', b: '内容2', c: '备注2' },
    // 更多元素...
  ]);

  const animated1 = new Animated.Value(0);
  const animated2 = new Animated.Value(0);

  const [buf1, setBuf1] = useState(0);
  const [buf2, setBuf2] = useState(1);
  const [delay, setDelay] = useState(1000);
  // 补充原代码中未声明的状态
  const [inAnimationA, setinAnimationA] = useState(false);
  const [inAnimationB, setinAnimationB] = useState(false);

  useEffect(() => {
    Animated.sequence([
      Animated.timing(animated1, {
        toValue: 300,
        duration: 2000,
        useNativeDriver: true,
        easing: Easing.linear,
      }),
    ]).start(() => {
      setinAnimationA(true);
      if (inAnimationA) {
        setinAnimationA(false);
        setBuf1(prev => prev + 1);
        if (delay > 0) setDelay(0);
      }
    });
  }, [animated1]);

  useEffect(() => {
    Animated.sequence([
      Animated.timing(animated2, {
        toValue: 300,
        duration: 2000,
        useNativeDriver: true,
        easing: Easing.linear,
        delay: delay,
      }),
    ]).start(() => {
      setinAnimationB(true);
      if (inAnimationB) {
        setinAnimationB(false);
        setBuf2(prev => prev + 1);
      }
    });
  }, [animated2]);

  return (
    <View>
      <Animated.View style={{ top: 0, transform: [{ translateY: animated1 }] }}>
        <Text>{list[buf1]?.a}</Text>
      </Animated.View>
      <Animated.View style={{ top: 0, transform: [{ translateY: animated2 }] }}>
        <Text>{list[buf2]?.a}</Text>
      </Animated.View>
    </View>
  );
};

export default YourComponent;

优化方案：单元素循环动画 #

原方案用两个元素交替的方式容易出现状态不同步问题，推荐用单个元素循环展示数组内容，动画结束后切换下一个元素并重新触发动画：

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

const DropDownList = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const translateY = useRef(new Animated.Value(-300)).current; // 初始在屏幕上方
  const list = [
    { a: '元素1', b: '内容1', c: '备注1' },
    { a: '元素2', b: '内容2', c: '备注2' },
    { a: '元素3', b: '内容3', c: '备注3' },
    // 更多元素...
  ];

  // 触发下落动画
  const startDropAnimation = () => {
    translateY.setValue(-300); // 重置位置到上方
    Animated.timing(translateY, {
      toValue: 0, // 落到目标位置
      duration: 2000,
      useNativeDriver: true,
      easing: Easing.out(Easing.ease), // 更自然的下落曲线
    }).start(({ finished }) => {
      if (finished) {
        // 动画结束后延迟切换下一个元素
        setTimeout(() => {
          setCurrentIndex(prev => (prev + 1) % list.length);
          startDropAnimation(); // 重新触发下一个元素的动画
        }, 1000); // 元素停留时间
      }
    });
  };

  useEffect(() => {
    startDropAnimation();
  }, []);

  return (
    <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
      <Animated.View style={{ transform: [{ translateY }] }}>
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{list[currentIndex].a}</Text>
        <Text>{list[currentIndex].b}</Text>
        <Text style={{ color: '#666' }}>{list[currentIndex].c}</Text>
      </Animated.View>
    </View>
  );
};

export default DropDownList;

方案说明 #

• 用useRef保存动画值，避免组件重渲染时重置动画状态
• 每次动画结束后切换到下一个元素，循环展示数组内容
• 调整动画曲线为Easing.out(Easing.ease)，模拟真实下落的加速度效果
• 可通过修改duration和延迟时间控制动画节奏
• 支持大型数组，无需额外维护多个动画实例

内容的提问来源于stack exchange，提问作者Nelah