Lottie-Flutter 使用教程

最新推荐文章于 2024-08-31 08:37:55 发布

原创最新推荐文章于 2024-08-31 08:37:55 发布 · 567 阅读

9 ·

CC 4.0 BY-SA版权

Lottie-Flutter 使用教程

lottie-flutter项目地址:https://gitcode.com/gh_mirrors/lo/lottie-flutter

项目介绍

Lottie-Flutter 是一个用于在 Flutter 应用中渲染 Adobe After Effects 动画的开源库。它通过解析 Bodymovin 导出的 JSON 文件，实现动画的原生渲染。这个库是 Lottie-android 库的非官方 Dart 实现，支持 Android、iOS、macOS、Linux、Windows 和 Web 平台。

项目快速启动

要开始使用 Lottie-Flutter，首先需要在你的 Flutter 项目中添加依赖。在 pubspec.yaml 文件中添加以下内容：

dependencies:
  lottie: ^3.1.2

然后运行 flutter pub get 来安装依赖。

示例代码

以下是一个简单的示例，展示如何在 Flutter 应用中显示一个 Lottie 动画：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Lottie.asset('assets/LottieLogo1.json'),
        ),
      ),
    );
  }
}

应用案例和最佳实践

加载远程 Lottie 文件

你可以从远程 URL 加载 Lottie 文件：

Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
)

使用自定义 AnimationController

你可以通过提供自定义的 AnimationController 来完全控制动画：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Lottie.asset(
          'assets/LottieLogo1.json',
          controller: _controller,
          onLoaded: (composition) {
            _controller
              ..duration = composition.duration
              ..forward();
          },
        ),
      ),
    );
  }
}