如何将After Effects中的文件上传动画正确迁移至React Native？

核心方案：用Lottie实现 #

之前用MP4/GIF的问题很明确：MP4很难实现透明背景（WebM虽支持但RN兼容性差），GIF画质压缩严重且无法精细控制动画进度/状态。Lottie是专门解决这类AE动画迁移的工具，支持矢量动画、透明背景，还能完全控制动画的播放、暂停、进度同步等操作。

具体步骤： #

1. 从AE导出Lottie JSON文件

   • 安装AE插件「Lottie Export」（原Bodymovin），打开你的上传动画项目。
   • 导出时勾选「Transparent」保留透明通道，选择导出格式为JSON，确保导出的文件包含所有动画关键帧信息。

2. 在React Native项目中集成Lottie

   • 安装依赖：

     npm install lottie-react-native lottie-ios --save
     # 或者用yarn
     yarn add lottie-react-native lottie-ios
     

   • RN 0.60+版本自动链接已生效，无需额外配置；旧版本需手动执行react-native link lottie-react-native。

3. 渲染并控制动画

   • 将导出的JSON文件放到RN项目的assets目录下，用LottieView组件渲染：

     import React, { useRef } from 'react';
     import LottieView from 'lottie-react-native';
     
     const UploadAnimation = () => {
       const animationRef = useRef(null);
     
       // 播放动画
       const playAnimation = () => {
         animationRef.current?.play();
       };
     
       // 暂停动画
       const pauseAnimation = () => {
         animationRef.current?.pause();
       };
     
       // 同步上传进度到动画进度（比如上传50%时动画走到50%）
       const setAnimationProgress = (progress) => {
         animationRef.current?.progress = progress;
       };
     
       return (
         <LottieView
           ref={animationRef}
           source={require('../assets/upload-animation.json')}
           autoPlay={false}
           loop={false}
           style={{ width: 200, height: 200 }}
         />
       );
     };
     
     export default UploadAnimation;
     

4. 进阶控制技巧

   • 触发动画特定片段（比如从「等待上传」到「上传中」的过渡），用play(from, to)指定播放区间：

     animationRef.current?.play(0.2, 0.8); // 播放从20%到80%的片段
     

   • 监听动画完成事件：

     <LottieView
       onAnimationFinish={() => console.log('动画播放完成')}
       // 其他属性...
     />
     

为什么Lottie是最优解？ #

• 矢量动画：文件体积远小于GIF/MP4，缩放不失真
• 原生支持透明背景，完美适配RN的UI层级
• 提供完整的动画控制API：播放、暂停、进度同步、片段播放等
• 跨平台兼容，iOS/Android表现一致

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