美文网首页flutter
Flutter之Lottie 动画

Flutter之Lottie 动画

作者: 习惯了_就好 | 来源:发表于2021-03-30 13:57 被阅读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);
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        );
      }
    

    相关文章

      网友评论

        本文标题:Flutter之Lottie 动画

        本文链接:https://www.haomeiwen.com/subject/rqgbhltx.html