flutter

Flutter之Lottie 动画

2021-03-30  本文已影响0人  习惯了_就好
/**
 *
 *
static LottieBuilder asset(
    String name, {
    Animation<double>? controller, //控制器
    bool? animate,
    FrameRate? frameRate,
    bool? repeat, //是否重复播放
    bool? reverse,//是否翻转动画
    LottieDelegates? delegates,
    LottieOptions? options,
    void Function(LottieComposition)? onLoaded,
    LottieImageProviderFactory? imageProviderFactory,
    Key? key,
    AssetBundle? bundle,
    LottieFrameBuilder? frameBuilder,
    double? width,
    double? height,
    BoxFit? fit,
    Alignment? alignment,
    String? package,
    bool? addRepaintBoundary,
  })
*/

dependencies:
lottie: ^1.0.1

class Flutter_Lottie_State extends State<Flutter_Lottie_Page>
    with TickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Container(
              child: Lottie.asset('anim/loading.json',
                  height: 100, width: 100, reverse: true),
              color: Colors.red,
            ),
            Lottie.asset(
              'anim/loading.json',
              controller: controller,
              width: 60,
              height: 100,
              repeat: true,
              onLoaded: (composition) {
                controller..duration = composition.duration;
              },
            ),
            Row(
              children: [
                ElevatedButton(
                  child: Text("开始"),
                  onPressed: () {
                    controller.reset();
                    controller.forward();
                  },
                ),
                ElevatedButton(
                  child: Text("从暂停处开始"),
                  onPressed: () {
                    controller.forward();
                  },
                ),
                ElevatedButton(
                  child: Text("停止"),
                  onPressed: () {
                    controller.stop(canceled: false);
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
上一篇下一篇

猜你喜欢

热点阅读