Flutter之Lottie 动画

/**
 *
 *
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);
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容