Lottie

1- 什么是 Lottie？

Lottie 是由 Airbnb 开发的一个开源动画库，旨在简化动画的创建和集成过程。

Lottie 动画文件基于 JSON 格式，可以在多种平台上使用，包括 Web、Android、iOS、React Native 和 Windows 等。

2- Lottie 的主要特点

1- 小巧高效

文件体积小：Lottie 动画文件通常比 GIF 文件小 600%，这使得它们加载速度更快，节省了带宽。
高质量：由于 Lottie 使用矢量图形，动画在任何设备上都不会像素化，无论放大或缩小都能保持高质量。

2- 跨平台支持

多平台兼容：Lottie 支持 Web、Android、iOS、React Native 和 Windows 等多种平台，这意味着开发者只需编写一次动画文件，即可在多个平台上无缝运行。
实时渲染：通过 Bodymovin 插件，设计师可以将 Adobe After Effects 动画导出为 JSON 文件，并在这些平台上实时渲染。

3- 易于集成

简单的 API：Lottie 提供了简单易用的 API，开发者可以用最少的代码在应用中实现复杂的动画效果。
丰富的控制选项：开发者可以控制动画的播放、暂停、进度、速度等，还可以设置动画的循环、反转等效果。

3- 安装和引入

1- 在 Web 中使用 Lottie

1.1- 安装和引入

首先，通过 npm 安装 Lottie-web 库：

npm install lottie-web

然后，在你的 JavaScript 文件中引入 Lottie：

import lottie from 'lottie-web';

1.2- 基本使用示例

以下是一个简单的示例，展示如何在网页中加载和播放 Lottie 动画：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Lottie 动画示例</title>
</head>
<body>
    <div id="lottie-container" style="width: 400px; height: 400px;"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
    <script>
        // 获取动画容器
        const container = document.getElementById('lottie-container');

        // 加载动画
        lottie.loadAnimation({
            container: container, // 动画容器
            renderer: 'svg', // 渲染方式，可选 'svg', 'canvas', 'html'
            loop: true, // 是否循环播放
            autoplay: true, // 是否自动播放
            path: 'path/to/your/animation.json' // 动画文件路径
        });
    </script>
</body>
</html>

1.3- 注释

container：指定动画的容器元素。
renderer：指定动画的渲染方式，常用的有 ‘svg’、‘canvas’ 和 ‘html’。
loop：设置动画是否循环播放。
autoplay：设置动画是否自动播放。
path：指定动画 JSON 文件的路径。

2- 在 Android 中使用 Lottie

2.1- 安装和引入

在 build.gradle 文件中添加 Lottie 依赖：

dependencies {
    implementation 'com.airbnb.android:lottie:3.7.0'
}

2.2- 基本使用示例

在 XML 布局文件中添加 LottieAnimationView：

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

在 Java 代码中控制动画：

LottieAnimationView animationView = findViewById(R.id.lottieAnimationView);

// 开始播放动画
animationView.playAnimation();

// 停止播放动画
animationView.cancelAnimation();

2.3- 注释

LottieAnimationView：Lottie 提供的动画视图控件。
app:lottie_rawRes：指定动画 JSON 文件的资源路径。
app:lottie_loop：设置动画是否循环播放。
app:lottie_autoPlay：设置动画是否自动播放。

3- 在 iOS 中使用 Lottie

3.1- 安装和引入

通过 CocoaPods 安装 Lottie：

pod 'lottie-ios'

3.2- 基本使用示例

在 Swift 代码中使用 Lottie：

import Lottie

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建动画视图
        let animationView = AnimationView(name: "animation")
        animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        animationView.play()

        // 添加动画视图到当前视图
        self.view.addSubview(animationView)
    }
}

3.3- 注释

AnimationView：Lottie 提供的动画视图类。
name：指定动画 JSON 文件的名称（不需要文件扩展名）。
loopMode：设置动画的循环模式，可以是 .loop、.playOnce 等。
play：开始播放动画。

4- 在 Vue 项目中使用 Lottie

4.1- 安装和引入

通过 npm 安装 vue-lottie：

npm install --save vue-lottie

4.2- 基本使用示例

在 Vue 组件中使用 Lottie：

<template>
  <div>
    <lottie :options="defaultOptions" :height="400" :width="400" @animCreated="handleAnimation" />
  </div>
</template>

<script>
import lottie from 'vue-lottie';
import animationData from '@/assets/animation.json';

export default {
  components: {
    lottie
  },
  data() {
    return {
      defaultOptions: {
        container: null,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
      }
    };
  },
  methods: {
    handleAnimation(anim) {
      this.anim = anim;
      console.log(anim); // 打印动画对象的所有属性
    }
  }
};
</script>

4.3- 注释

defaultOptions：Lottie 动画的配置选项。
handleAnimation：动画创建时的回调函数，可以获取动画对象并进行进一步控制。

4- 创建动画

1- 使用 Adobe After Effects 和 Bodymovin

创建动画：在 Adobe After Effects 中创建你的动画。
安装 Bodymovin 插件：在 After Effects 中安装 Bodymovin 插件。
导出动画：使用 Bodymovin 插件将动画导出为 JSON 文件。

2- 使用 LottieFiles

上传动画：将导出的 JSON 文件上传到 LottieFiles 平台。
预览和测试：在 LottieFiles 平台上预览和测试动画效果。
下载动画：下载优化后的动画文件，并嵌入到你的项目中。

5- 控制动画

1- Web 控制示例

const animation = lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'path/to/your/animation.json'
});

// 控制动画播放
animation.play();

// 控制动画暂停
animation.pause();

// 设置动画进度
animation.goToAndStop(50, true);

2- Android 控制示例

LottieAnimationView animationView = findViewById(R.id.lottieAnimationView);

// 开始播放动画
animationView.playAnimation();

// 停止播放动画
animationView.cancelAnimation();

// 设置动画进度
animationView.setProgress(0.5f);

3- iOS 控制示例

let animationView = AnimationView(name: "animation")

// 开始播放动画
animationView.play()

// 停止播放动画
animationView.stop()

// 设置动画进度
animationView.currentProgress = 0.5

通过这些详细的示例和注释，希望能帮助你更好地理解和使用 Lottie 动画库来创建和集成高质量的动画，从而提升用户体验。

#编程

#lottie

Reflections on the AI Era 上一篇

Plex 下一篇