12、Lottie动画开发：从特性支持到React Native集成

http9protocoller

墨衍会员 · AI 创作全网分发码龄1天

关注

原创最新推荐文章于 2026-06-19 17:52:13 发布 167 阅读 AI 写同款· GEO 优化 ›

Lottie与After Effects：打造惊艳UI动画专栏收录该内容

¥69.90 ¥499.90

15篇文章

订阅专栏

超级会员免费看

Lottie动画开发：从特性支持到React Native集成

1. Lottie在不同平台的特性支持

在为iOS、Android和Web平台进行Lottie动画开发时，需要了解不同特性在各平台的支持情况。

1.1 遮罩和蒙版

可以在Lottie中使用Alpha蒙版，它的工作方式与遮罩非常相似，用于显示或隐藏另一个图层的部分内容。更多信息可参考：https://helpx.adobe.com/after-effects/using/alpha-channels-masks-mattes.html。

1.2 合并路径

合并路径在iOS设备或Web上根本无法工作。如果想直接在AE中使用布尔运算，建议忽略合并路径。不过，我们可以在XD、Figma和Sketch中将用于布尔运算的多个路径转换为单个路径，具体操作步骤如下：
- Adobe XD ：
1. 使用基本形状进行设计。
2. 添加布尔运算（相加、相减、相交或排除重叠）。
3. 转到顶部菜单，选择“对象”|“路径”|“转换为路径”。
- Figma ：
1. 进行绘图并添加布尔运算（相加、相减、相交或排除重叠）。
2. 从顶部菜单中选择“扁平化选择”。
- Sketch ：
1. 为形状添加布尔运算（相加、相减、相交或排除重叠）。
2. 在将作品导出到AE之前，转到顶部菜单，选择“图层”|“合并”|“扁平化”。

1.3 图层效果

目前，Android和iOS都不支持在AE中创建的任何图层效果。但如果仅在Web上使用动画，则可以使用图层效果。

1.4 文本

在AE中使用文本、对其进行变换或更改填充和描边没有问题。不过，如果想在LottieFiles平台上直接编辑动画中的文本，不建议这样做，因为可能会出现文本显示不正确的问题。

1.5 其他特性

AE表达式 ：AE表达式不支持Android或iOS，但如果为Web进行动画制作，建议深入了解，它可以节省大量时间和精力。表达式是一段小型JavaScript代码，可以插入图层属性中为动画添加特定行为。更多信息可参考：https://helpx.adobe.com/after-effects/using/expression-basics.html。
图像：Android和iOS支持图像，但使用图像会增加文件大小且不具有响应性，可根据需求选择是否使用。

2. 键盘快捷键提高工作效率

Adobe AE的选项、面板和新关键词众多，一开始可能会让人感到不知所措。但习惯快捷键后，工作会变得轻松很多，尤其是在为Lottie进行动画制作时，可以专注于部分功能，忽略大部分面板和工具。以下是一些节省时间的快捷键：
- 通用快捷键
- 变换属性快捷键
- 帧和关键帧快捷键
- 图层快捷键

3. 免费图形资源和UX/UI灵感

在创建动画时，以下是一些免费的图形资源网站：
| 资源类型 | 网站名称 | 网站链接 | 说明 |
| ---- | ---- | ---- | ---- |
| 插图 | Freepik | https://www.freepik.com/ | 可搜索数千种不同风格和概念的插图，大部分文件可作为矢量图下载，也可付费订阅获取高级文件。 |
| 插图 | DrawKit | https://drawkit.com/ | 可免费搜索和下载精美的手工插图包和图标集。 |
| 颜色 | Coolors | https://coolors.co/ | 只需按空格键即可轻松创建独特的调色板，可用于获取灵感或搜索颜色趋势。 |
| 图标 | Flaticon | https://www.flaticon.com/ | 搜索数千个图标集进行下载，付费订阅可下载动画Lottie图标为.ae和.json文件。 |
| 图标 | Font Awesome | https://fontawesome.com/ | 下载图标套件，可像使用常规字体一样在设计中使用图标。 |
| 免费图片 | Unsplash | https://unsplash.com/ | 提供高质量免费图片。 |
| 免费图片 | Pexels | https://www.pexels.com/ | 提供高质量免费图片。 |
| 字体 | Google Fonts | https://fonts.google.com/ | 多平台可用，可用于网站设计。 |
| 字体 | Free Fonts | https://www.freefonts.io/ | 离线项目或需要更多创意时，可查找特定字体。 |
| 动画灵感 | LottieFiles | https://lottiefiles.com/ | 寻找Lottie动画灵感的最佳场所。 |

同时，以下网站可提供UX/UI灵感：
- Behance（https://www.behance.net/）：Adobe在线社区平台，用于展示和发现创意作品。
- Dribbble（https://dribbble.com/）：获取灵感的好地方。
- UX Movement（https://uxmovement.com/）：通过技巧、技术和最佳实践教你如何改善应用和网站的用户体验。
- Collect UI（https://collectui.com/）：基于精心挑选的Dribbble作品，为你提供日常灵感。
- UI Garage（https://uigarage.net/）：为Web、移动和桌面设备找到特定的设计灵感。
- User Interface Design patterns（https://ui-patterns.com/）：提供解决常见设计问题的重复解决方案，是经验丰富的用户界面设计师的标准参考点。
- Mobbin（https://mobbin.design/）：数千张移动应用截图可节省UI和UX研究时间。

4. lottie-react-native库介绍

lottie-react-native是一个用于在React Native应用中渲染和播放Lottie动画的库。以下将详细介绍它的诞生背景、基本概念和使用原因。

4.1 lottie-react-native的诞生

2015年，Facebook为了加速移动开发团队，发布了React Native，其具有跨平台开发能力和重用成熟库与工具的优势。Airbnb受此吸引，组建团队研究使用React Native进行跨平台开发。他们发现不仅移动团队能从中受益，还能重用大量Web知识，创建多学科团队。在这个过程中，他们需要一个能在React Native代码中渲染Lottie动画的工具，于是在2017年初，由iOS、Android和Web开发者组成的小团队成功在GitHub上发布了lottie-react-native：https://GitHub.com/lottie-react-native/lottie-react-native。

4.2 lottie-react-native的定义

lottie-react-native项目主要由两部分组成：
- 开源项目 ：托管在GitHub上，是开发社区的中心，所有开发、改进请求、问题报告和代码托管都在此进行，有助于更新和改进整个库。
- npm包 ：托管库的所有新可下载版本，开发者通常使用这个npm仓库将lottie-react-native包含在React Native项目中。

lottie-react-native严重依赖lottie-ios和lottie-android，并作为这两个库的包装器。在2021年，它成为React Native生态系统中最受欢迎的库之一，在GitHub上有超过14,500颗星，即使没有Airbnb的参与，每年仍会有多个版本发布。

4.3 为何不使用Animated或Reanimated

对于React Native初学者来说，常见问题是选择哪个库来显示应用中的动画。搜索后会出现三种方式：Animated API、Reanimated或lottie-react-native。Animated和Reanimated与lottie-react-native的用途不同，它们擅长对iOS和Android上的React和原生组件进行动画处理，基于转换移动UI组件（如文本、容器、视图或列表），不适合创建复杂动画或视觉图标，而Lottie可以轻松处理设计师用Adobe After Effects创建的复杂动画。

4.4 lottie-react-native项目基础

了解lottie-react-native项目的结构有助于更好地利用资源，将Lottie动画集成到React Native项目中。
- 开源项目 ：访问其GitHub仓库（https://github.com/lottie-react-native/lottie-react-native），开发者可以阅读API文档、请求修复特定问题、通过拉取请求（PR）提交代码，或浏览代码了解库的工作原理。自2018年起，由单一维护者维护，会定期发布新版本以修复漏洞、适应React Native和lottie-ios或lottie-android的变化。
- README.md文件 ：包含如何集成和使用库的基本说明、代码示例（https://github.com/lottie-react-native/lottie-react-native/tree/master/example）、常用属性和方法的API参考，以及Lottie动画示例和获取更多信息的说明。
- 版本控制 ：不同版本的React Native只能与特定版本的lottie-react-native配合使用，这与构建系统的工作方式有关。
- 其他文档 ：仓库中还包含API文档、TypeScript声明、各支持平台上支持的After Effects特性列表和示例文件夹。
- 问题页面 ：当文档不够有用时，可在问题页面搜索帮助，尤其是在新的React Native、lottie-ios或lottie-android版本发布出现问题时。
- 社区贡献 ：lottie-react-native社区提交PR非常活跃，新功能或漏洞修复通常会先在社区中出现，然后通过新版本在npm仓库中正式发布。新用户可以从自己的分支创建新PR，但需要满足以下要求才能将PR合并到主分支：
- 提供文档。
- 在示例文件夹中添加示例。
- 正确填写PR模板。
- 在PR线程中解决所有问题和评论。

一旦PR合并到主分支，维护者会根据仓库的紧急程度和时间安排准备发布版本，用户的更改将作为补丁发布，可能是小版本或大版本更新。

Lottie动画开发：从特性支持到React Native集成

5. lottie-react-native的安装与使用

在了解了lottie-react-native的基本信息后，接下来我们将探讨如何安装该库以及如何将其集成到我们的React Native项目中。

5.1 安装lottie-react-native

要在React Native项目中使用lottie-react-native，首先需要安装它。可以通过npm或yarn进行安装，以下是具体的安装命令：

# 使用npm安装
npm install lottie-react-native

# 使用yarn安装
yarn add lottie-react-native

安装完成后，还需要根据不同的平台进行一些额外的配置。

iOS平台 ：
1. 进入项目的iOS目录： cd ios
2. 运行 pod install 来安装相关的依赖。
Android平台 ：
通常情况下，安装完成后无需额外的配置，但如果遇到问题，可以检查项目的 android/settings.gradle 和 android/app/build.gradle 文件，确保正确引入了lottie-react-native。

5.2 集成第一个Lottie动画

安装并配置好lottie-react-native后，就可以开始集成第一个Lottie动画了。以下是一个简单的示例代码：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('./path/to/your/animation.json')}
        autoPlay
        loop
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

在上述代码中，我们首先导入了 LottieView 组件，然后在 App 组件中使用它来显示Lottie动画。 source 属性指定了动画的JSON文件路径， autoPlay 属性表示动画是否自动播放， loop 属性表示动画是否循环播放。

6. 控制Lottie动画

在实际应用中，我们可能需要对Lottie动画进行更精细的控制，例如暂停、播放、跳转到特定帧等。lottie-react-native提供了一些方法来实现这些功能。

6.1 基本控制方法

以下是一些常用的控制方法：
- play() ：开始播放动画。
- pause() ：暂停动画。
- reset() ：重置动画到初始状态。
- setProgress(value) ：将动画跳转到指定的进度， value 的范围是0到1。

以下是一个使用这些方法的示例代码：

import React, { useRef } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  const animationRef = useRef(null);

  const playAnimation = () => {
    animationRef.current.play();
  };

  const pauseAnimation = () => {
    animationRef.current.pause();
  };

  const resetAnimation = () => {
    animationRef.current.reset();
  };

  const setProgress = () => {
    animationRef.current.setProgress(0.5);
  };

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={require('./path/to/your/animation.json')}
        autoPlay={false}
        loop={false}
      />
      <View style={styles.buttonContainer}>
        <Button title="Play" onPress={playAnimation} />
        <Button title="Pause" onPress={pauseAnimation} />
        <Button title="Reset" onPress={resetAnimation} />
        <Button title="Set Progress" onPress={setProgress} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '80%',
  },
});

export default App;

在上述代码中，我们使用 useRef 来获取 LottieView 的引用，然后通过引用调用相应的控制方法。

6.2 监听动画事件

除了控制动画的播放，我们还可以监听动画的事件，例如动画开始、结束等。lottie-react-native提供了一些事件回调函数，以下是一些常用的事件：
- onAnimationFinish ：动画播放结束时触发。
- onAnimationStart ：动画开始播放时触发。

以下是一个监听动画事件的示例代码：

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

const App = () => {
  const handleAnimationStart = () => {
    console.log('Animation started');
  };

  const handleAnimationFinish = () => {
    console.log('Animation finished');
  };

  return (
    <View style={styles.container}>
      <LottieView
        source={require('./path/to/your/animation.json')}
        autoPlay
        loop={false}
        onAnimationStart={handleAnimationStart}
        onAnimationFinish={handleAnimationFinish}
      />
      <Text style={styles.message}>Check console for animation events</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  message: {
    marginTop: 20,
  },
});

export default App;

在上述代码中，我们定义了 handleAnimationStart 和 handleAnimationFinish 函数，并将它们分别传递给 onAnimationStart 和 onAnimationFinish 属性，当动画开始或结束时，相应的函数将被调用。

7. lottie-react-native常见问题解答

在使用lottie-react-native的过程中，可能会遇到一些问题。以下是一些常见问题及解答：

7.1 动画不显示

原因：
- 动画文件路径错误。
- 动画文件损坏。
- 缺少必要的依赖。
解决方法 ：
- 检查动画文件的路径是否正确。
- 尝试使用其他动画文件，确保文件没有损坏。
- 检查项目的依赖是否安装正确，特别是iOS平台要确保 pod install 执行成功。

7.2 动画播放卡顿

原因：
- 动画文件过于复杂。
- 设备性能不足。
解决方法 ：
- 简化动画文件，减少不必要的元素和效果。
- 在性能较低的设备上，适当降低动画的帧率或复杂度。

7.3 版本兼容性问题

原因：
- 不同版本的React Native、lottie-ios或lottie-android之间存在兼容性问题。
解决方法 ：
- 查看lottie-react-native的文档，确保使用的版本与当前的React Native和其他依赖版本兼容。
- 如果遇到兼容性问题，可以尝试升级或降级相关的库版本。

8. 总结

通过本文，我们全面了解了Lottie在不同平台的特性支持，掌握了使用键盘快捷键提高工作效率的方法，获取了免费的图形资源和UX/UI灵感。同时，深入学习了lottie-react-native库，包括它的诞生背景、基本概念、安装使用、动画控制以及常见问题解答。

在实际的开发中，合理利用Lottie和lottie-react-native可以帮助我们快速创建出高质量的动画效果，提升应用的用户体验。希望本文能为你在Lottie动画开发和React Native集成方面提供有价值的参考。

下面是一个简单的mermaid流程图，展示了使用lottie-react-native集成Lottie动画的基本流程：

graph LR
    A[创建React Native项目] --> B[安装lottie-react-native]
    B --> C{选择平台}
    C -->|iOS| D[iOS平台配置]
    C -->|Android| E[Android平台配置]
    D --> F[集成Lottie动画]
    E --> F
    F --> G[控制动画播放]
    G --> H[处理动画事件]
    H --> I[解决常见问题]

这个流程图清晰地展示了从创建项目到最终解决常见问题的整个过程，帮助你更好地理解和应用lottie-react-native。