Flutter Lottie 动画引导页的实现

2023-11-07 13:22:11

Lottie 简介

Lottie 是一个动画库，可以帮助您轻松地将动画添加到您的应用程序中。它支持多种格式的动画，包括 Adobe After Effects 和 Bodymovin。Lottie 动画是矢量图形，因此它们可以很容易地缩放和旋转，而不会损失质量。

Flutter Lottie 动画引导页的实现

以下是如何使用 Flutter Lottie 在引导页中添加动画：

1. 在 pubspec.yaml 中添加依赖库

dependencies:
  lottie: ^1.0.0

2. 在文件中添加引用库

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

3. 根据 API 调用

prepareAnimation 的固定参数是动画资源，不可缺少；
repeatCount 可设置动画重复的频率；
RepeatCount.nTimes(n) 重复 n 次；
RepeatCount.indefinite 循环播放。

LottieBuilder(
  composition: LottieComposition.asset('assets/animations/intro.json'),
  repeatCount: RepeatCount.indefinite,
);

4. 完整示例

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Lottie',
      home: Scaffold(
        body: Center(
          child: LottieBuilder(
            composition: LottieComposition.asset('assets/animations/intro.json'),
            repeatCount: RepeatCount.indefinite,
          ),
        ),
      ),
    );
  }
}