flutter 的lottie执行一次动画后关闭

复制代码
flutter_gen  管理静态资源,包含lottile的管理

CBAnimationBuilder 自动管理controller

Dart 复制代码
import 'package:flutter/material.dart';

typedef CBAnimationWidgetBuilder = Widget Function(
  BuildContext context,
  Widget? child,
  Animation animation,
  AnimationController controller,
);

typedef CBAnimationEndCallback = void Function(
    Animation animation, AnimationController controller);

class CBAnimationBuilder extends StatefulWidget {
  final Duration duration;
  final bool repeat;
  final Widget? child;
  final CBAnimationWidgetBuilder builder;
  final CBAnimationEndCallback? onEnd;

  const CBAnimationBuilder({
    super.key,
    this.duration = const Duration(milliseconds: 300),
    this.repeat = false,
    this.child,
    required this.builder,
    this.onEnd,
  });

  @override
  State<StatefulWidget> createState() => _CBAnimationBuilderState();
}

class _CBAnimationBuilderState extends State<CBAnimationBuilder>
    with TickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    );
    animation = Tween<double>(begin: 0, end: 1).animate(controller);
    controller.forward();
    if (widget.repeat) {
      controller.repeat();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      child: widget.child,
      builder: (context, child) {
        if (animation.isCompleted || animation.isDismissed) {
          widget.onEnd?.call(animation, controller);
        }
        return widget.builder(context, child, animation, controller);
      },
    );
  }
}

使用

Dart 复制代码
import 'package:bcf/app/bc_widget/animation_builder.dart';
import 'package:bcf/app/bc_widget/bc_widgets.dart';
import 'package:bcf/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

enum LottieType {
  peach,
  eggplant,
  fire,
  rainbow,
  chili;

  Widget get lottie {
    return switch (this) {
      LottieType.peach => CBAnimationBuilder(
        repeat: false,
        duration: const Duration(seconds: 1),
        builder: (ctx, Widget? w, a, c) {
          return Assets.lottie.commentAnimatPeach.lottie(controller: c);
        },
        onEnd: (a, c) => Get.back(),
      ),
      LottieType.eggplant => CBAnimationBuilder(
        repeat: false,
        duration: const Duration(seconds: 1),
        builder: (ctx, Widget? w, a, c) {
          return Assets.lottie.commentAnimatEggplant.lottie(controller: c);
        },
        onEnd: (a, c) => Get.back(),
      ),
      LottieType.fire => CBAnimationBuilder(
        repeat: false,
        duration: const Duration(seconds: 1),
        builder: (ctx, Widget? w, a, c) {
          return Assets.lottie.commentAnimatFire.lottie(controller: c);
        },
        onEnd: (a, c) => Get.back(),
      ),
      LottieType.rainbow => CBAnimationBuilder(
        repeat: false,
        duration: const Duration(seconds: 1),
        builder: (ctx, Widget? w, a, c) {
          return Assets.lottie.commentAnimatRainbow.lottie(controller: c);
        },
        onEnd: (a, c) => Get.back(),
      ),
      LottieType.chili => CBAnimationBuilder(
        repeat: false,
        duration: const Duration(seconds: 1),
        builder: (ctx, Widget? w, a, c) {
          return Assets.lottie.commentAnimatChili.lottie(controller: c);
        },
        onEnd: (a, c) => Get.back(),
      ),
    };
  }
}

class CommentLottiePanel extends StatelessWidget {
  const CommentLottiePanel({super.key, this.onComplete});

  final Function(LottieType)? onComplete;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 22.w, vertical: 10.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          DefaultInWell(onTap: () => openShowLottie(LottieType.peach), child: Assets.images.icPeach.image(height: 49.h)),
          DefaultInWell(onTap: () => openShowLottie(LottieType.eggplant), child: Assets.images.icEggplant.image(height: 49.h)),
          DefaultInWell(onTap: () => openShowLottie(LottieType.fire), child: Assets.images.icFire.image(height: 49.h)),
          DefaultInWell(onTap: () => openShowLottie(LottieType.rainbow), child: Assets.images.icRainbow.image(height: 49.h)),
          DefaultInWell(onTap: () => openShowLottie(LottieType.chili), child: Assets.images.icChili.image(height: 49.h)),
        ],
      ),
    );
  }

  openShowLottie(LottieType type) async {
    await Get.dialog(
        barrierDismissible: false,
        SizedBox(height: 1.sh, width: 2.sw, child: type.lottie));
    onComplete?.call(type);
  }
}
相关推荐
Villiam_AY1 小时前
Redis 缓存机制详解:原理、问题与最佳实践
开发语言·redis·后端
UQWRJ1 小时前
菜鸟教程R语言一二章阅读笔记
开发语言·笔记·r语言
岁忧3 小时前
macOS配置 GO语言环境
开发语言·macos·golang
朝朝又沐沐4 小时前
算法竞赛阶段二-数据结构(36)数据结构双向链表模拟实现
开发语言·数据结构·c++·算法·链表
魔尔助理顾问4 小时前
系统整理Python的循环语句和常用方法
开发语言·后端·python
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
遇见尚硅谷5 小时前
C语言:*p++与p++有何区别
c语言·开发语言·笔记·学习·算法
SkyrimCitadelValinor5 小时前
c#中让图片显示清晰
开发语言·c#
艾莉丝努力练剑6 小时前
【数据结构与算法】数据结构初阶:详解排序(二)——交换排序中的快速排序
c语言·开发语言·数据结构·学习·算法·链表·排序算法
狐小粟同学6 小时前
JavaEE--3.多线程
java·开发语言·java-ee