Lottie-React-Native 动画库完全指南

Lottie-React-Native 动画库完全指南

lottie Lottie documentation for http://airbnb.io/lottie. 项目地址: https://gitcode.com/gh_mirrors/lo/lottie

什么是 Lottie-React-Native

Lottie-React-Native 是一个强大的动画库，它允许开发者在 React Native 应用中轻松渲染 Adobe After Effects 动画。通过解析导出的 JSON 文件，开发者可以在移动应用中实现高质量的矢量动画效果，而无需编写复杂的原生代码。

核心优势

1. 跨平台一致性：动画在 iOS 和 Android 上表现一致
2. 性能优化：矢量动画渲染，内存占用低
3. 设计协作：设计师可以独立创建动画，开发者直接使用

安装指南

基础安装

yarn add lottie-react-native

iOS 用户需要额外执行：

cd ios && pod install

版本升级注意事项

v6 版本包含重大变更，升级前请确保：

• 检查现有动画是否兼容新版本
• 预留足够测试时间
• 参考官方迁移指南进行升级

基础使用

声明式用法

import LottieView from "lottie-react-native";

function BasicAnimation() {
  return (
    <LottieView
      source={require("./animation.json")}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

命令式控制

function ControlledAnimation() {
  const animationRef = useRef(null);

  useEffect(() => {
    animationRef.current?.play();
    // 或指定帧范围
    // animationRef.current?.play(30, 120);
  }, []);

  return (
    <LottieView
      ref={animationRef}
      source={require("./animation.json")}
      style={{ width: 200, height: 200 }}
    />
  );
}

高级功能

与动画系统集成

const AnimatedLottie = Animated.createAnimatedComponent(LottieView);

function ProgressAnimation() {
  const progress = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: false,
    }).start();
  }, []);

  return (
    <AnimatedLottie
      source={require("./animation.json")}
      progress={progress}
      style={{ width: 200, height: 200 }}
    />
  );
}

动态颜色修改

<LottieView
  source={require("./animation.json")}
  colorFilters={[
    {
      keypath: "button",
      color: "#FF0000",
    },
  ]}
  autoPlay
  loop
/>

文件格式支持

.lottie 文件配置

在 metro.config.js 中添加配置：

const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, "lottie"],
  },
};

Jest 测试配置

创建 __mocks__/lottieMock.js：

module.exports = "lottie-test-file-stub";

更新 jest.config.js：

moduleNameMapper: {
  '\\.(lottie)$': '<rootDir>/__mocks__/lottieMock.js',
}

常见问题排查

1. 动画不显示：

   • 检查 JSON 文件路径是否正确
   • 确认已正确设置 style 的宽高
   • 验证动画 JSON 是否有效

2. 性能问题：

   • 避免同时播放多个复杂动画
   • 简化复杂路径动画
   • 考虑使用硬件加速

3. 平台差异：

   • Android 上某些颜色滤镜可能表现不同
   • 测试不同设备上的渲染效果

最佳实践

1. 动画优化：

   • 使用简单的形状和路径
   • 减少关键帧数量
   • 避免复杂的遮罩效果

2. 开发流程：

   • 与设计师明确 Lottie 支持的特性
   • 建立动画验收标准
   • 实施自动化测试验证动画渲染

3. 资源管理：

   • 对于常用动画考虑预加载
   • 实现动画缓存策略
   • 监控动画内存使用情况

API 核心参数

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | source | 动画源(必需) | object/string | 无 | | style | 容器样式 | ViewStyle | 必须设置 | | loop | 是否循环 | boolean | true | | autoPlay | 自动播放 | boolean | false | | speed | 播放速度 | number | 1 | | progress | 动画进度控制 | Animated.Value | 无 |

通过掌握这些核心概念和技巧，开发者可以充分发挥 Lottie-React-Native 的潜力，为应用添加令人印象深刻的动画效果，同时保持代码的可维护性和性能表现。

lottie Lottie documentation for http://airbnb.io/lottie. 项目地址: https://gitcode.com/gh_mirrors/lo/lottie