RN Lottie：动画完成后调用.then()及TouchableOpacity包裹下的操作实现

当然可以实现！而且完全能用.then()来串联后续逻辑，我来给你一步步拆解怎么做。

核心思路是利用Lottie组件提供的onAnimationFinish回调，把动画播放的过程封装成一个Promise，这样就能像处理异步请求一样用.then()或者async/await来等待动画结束。

具体实现步骤 #

1. 获取Lottie组件的引用
   用React的useRef钩子拿到Lottie实例，这样我们才能手动控制动画播放，同时监听它的完成事件。

2. 封装播放动画的Promise函数
   写一个返回Promise的函数，在里面调用Lottie的play()方法，并在onAnimationFinish回调里resolve这个Promise。如果需要处理异常，也可以在这里reject。

3. 在TouchableOpacity的点击事件中调用
   点击按钮时先执行动画播放函数，通过.then()或者await等待动画完成，再执行后续操作。

完整代码示例 #

import React, { useRef } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const AnimatedActionButton = () => {
  // 保存Lottie组件的引用
  const lottieAnimationRef = useRef(null);

  // 封装动画播放为Promise
  const triggerAnimation = () => {
    return new Promise((resolve, reject) => {
      if (!lottieAnimationRef.current) {
        reject(new Error('无法获取Lottie动画实例'));
        return;
      }

      // 重置动画状态，确保每次点击都从头播放
      lottieAnimationRef.current.reset();
      // 播放动画，完成时resolve Promise
      lottieAnimationRef.current.play(() => {
        resolve('动画播放完成');
      });
    });
  };

  const handleButtonPress = () => {
    // 使用.then()链式调用
    triggerAnimation()
      .then((message) => {
        console.log(message);
        // 这里写动画完成后要执行的操作：比如导航、提交表单、更新状态等
        alert('动画结束啦！可以执行后续操作了');
      })
      .catch((error) => {
        console.error('动画播放出错:', error);
      });

    // 也可以用async/await写法
    // const handleButtonPress = async () => {
    //   try {
    //     await triggerAnimation();
    //     alert('动画结束啦！可以执行后续操作了');
    //   } catch (error) {
    //     console.error(error);
    //   }
    // };
  };

  return (
    <TouchableOpacity
      onPress={handleButtonPress}
      style={styles.buttonContainer}
      activeOpacity={0.8}
    >
      <LottieView
        ref={lottieAnimationRef}
        source={require('./assets/your-animation.json')} // 替换成你的动画文件路径
        loop={false} // 必须关闭循环，否则onAnimationFinish不会触发
        autoPlay={false} // 禁止自动播放，由点击事件触发
        style={styles.animation}
      />
      <Text style={styles.buttonText}>点击触发动画</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    alignItems: 'center',
    padding: 16,
  },
  animation: {
    width: 120,
    height: 120,
  },
  buttonText: {
    marginTop: 8,
    fontSize: 16,
  },
});

export default AnimatedActionButton;

关键注意事项 #

• 关闭动画循环：一定要把loop属性设为false，否则动画会无限循环，onAnimationFinish回调永远不会被触发。
• 重置动画状态：每次播放前调用reset()，确保动画从头开始播放，避免第二次点击时动画已经处于结束状态。
• 异常处理：加上.catch()或者try/catch来处理获取Lottie引用失败等异常情况，让代码更健壮。

这样就能完美实现“等待Lottie动画播放完成后再执行后续操作”的需求，而且完全支持.then()的链式调用写法。

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