Flutter Tips之 - Reusable Lottie Animations in Fluttter

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

你是否想要在app里面新增一些炫酷的动画，但是呢？虽然Flutter提供了很多的动画，但是自己绘制吧，要么效果调整上过于耗费时间了，要么效果不尽人意。

专业的事情交给专业的人，如果动画是设计师提供并且能拿来使用，那就太好了！！！

曾经使用过gif，现在发现lottie动画，太香了～

下面是我封装的有关加载数据使用的lottie动画

用关键值在枚举中定义动画，每个值都是磁盘上动画文件的名字。

enum LottieAnimation {
    dataNotFound(name: 'data_not_found'),
    empty(name: 'empty'),
    loading(mame: 'loading'),
    error(name: 'error'),
    smallError(name: 'small_error');
    
    final String name;
    const LottieAnimation({
        required this.name,
    });
}

创建一个基类,所有其他动画类都从该基类派生。这个类完全负责使用磁盘上的assets来呈现lottie动画。

在build方法里面，我们通过Lottie.asset返回一个实际的小部件。

class LottieAnimationView extends StatelessWidget {
    final LottieAnimation animation;
    final bool repeat;
    final bool reverse;
    const LottieAnimationView({
        super.key,
        required this.animation,
        this.repeat = true,
        this.reverse = false,
    });
    
    @override
    Widget build(BuildContext context) => Lottie.asset(
        animation.fullPath,
        reverse: reverse,
        repeat: repeat,
    );
}

给LottieAnimation增加一个拓展，获取文件全路径

extension GetFullPath on LottieAnimation {
    String get fullPath => 'assets/animationss/$name.json';
}

然后定义子类，只把lottie动画的名字传递给父类，你就可以开始是了！

class EmptyContentsAnimationView extends LottieAnimationView {
    const EmptyContentssAnimationView({super.key}) : super(
        animation: LottieAnimation.empty,
    );
}

哈哈 测试一下

class HomePage extends StatelessWidget {
    const HomePage({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Home Page'),
            ),
            body: const EmptyCOntentsAnimationView(),
        );
    }
}

搞定，接下来我得研究研究 如何制作一个lottie动画了