美文网首页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