Flutter Reusable Lottie Animations技巧

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

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

正文

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

專業(yè)的事情交給專業(yè)的人，如果動(dòng)畫(huà)是設(shè)計(jì)師提供并且能拿來(lái)使用，那就太好了?。。?/p>

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

封裝相關(guān)加載數(shù)據(jù)使用的lottie動(dòng)畫(huà)

下面是我封裝的有關(guān)加載數(shù)據(jù)使用的lottie動(dòng)畫(huà)

用關(guān)鍵值在枚舉中定義動(dòng)畫(huà)，每個(gè)值都是磁盤(pán)上動(dòng)畫(huà)文件的名字。

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)建一個(gè)基類,所有其他動(dòng)畫(huà)類都從該基類派生。這個(gè)類完全負(fù)責(zé)使用磁盤(pán)上的assets來(lái)呈現(xiàn)lottie動(dòng)畫(huà)。

在build方法里面，我們通過(guò)Lottie.asset返回一個(gè)實(shí)際的小部件。

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增加一個(gè)拓展，獲取文件全路徑

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

然后定義子類，只把lottie動(dòng)畫(huà)的名字傳遞給父類，你就可以開(kāi)始是了！

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

測(cè)試一下

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(),
        );
    }
}