Flutter Reusable Lottie Animations技巧

更新時間：2022年12月08日 14:41:50 作者：程序員界的小學生

這篇文章主要為大家介紹了Flutter Reusable Lottie Animations技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

你是否想要在app里面新增一些炫酷的動畫，但是呢？雖然Flutter提供了很多的動畫，但是自己繪制吧，要么效果調(diào)整上過于耗費時間了，要么效果不盡人意。

專業(yè)的事情交給專業(yè)的人，如果動畫是設計師提供并且能拿來使用，那就太好了?。?！

曾經(jīng)使用過gif，現(xiàn)在發(fā)現(xiàn)lottie動畫，太香了～

封裝相關加載數(shù)據(jù)使用的lottie動畫

下面是我封裝的有關加載數(shù)據(jù)使用的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,
    });
}

創(chuàng)建一個基類,所有其他動畫類都從該基類派生。這個類完全負責使用磁盤上的assets來呈現(xiàn)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 =&gt; '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(),
        );
    }
}