前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter 专题】50 图解动画小插曲之 Lottie 动画

【Flutter 专题】50 图解动画小插曲之 Lottie 动画

作者头像
阿策小和尚
发布2019-08-12 16:34:35
1.5K0
发布2019-08-12 16:34:35
举报
文章被收录于专栏:阿策小和尚

和尚在一年前整理过一点 LottieAndroid 中的应用,现在 Flutter 也有相关的插件帮助我们快速简单的应用场景复杂的 Lottie 动画;

和尚在官网查询之后发现官网推荐了两个开源的 Lottie 插件,和尚对其中的 https://github.com/simolus3/fluttie 进行学习尝试;

和尚首先在 lottiefiles 中下载了两个酷炫的动画 json,我们也可以选择合适的动画进行编辑调整;跟原生一样,可以随心设计,当然这项重任还是要交给视觉设计的小姐姐比较好;

集成方式

集成方式都是统一的三大步骤;再此之前可以将下载的 json 文件添加到本地 images 资源文件夹中;

1. 在 pubspec.yaml 中添加依赖库
代码语言:javascript
复制
dependencies:
    fluttie: ^0.3.2
2. 在文件中添加引用库
代码语言:javascript
复制
import 'package:fluttie/fluttie.dart';
3. 根据 API 调用
  1. 通过 loadAnimationFromAsset 异步加载本地 json 资源,或通过 loadAnimationFromJson 直接加载 json 内容;
代码语言:javascript
复制
void prepareLottie() async {
  var instance = Fluttie();
  var whaleLottie = await instance.loadAnimationFromAsset('images/animation_demo01.json');
}
  1. 设置 FluttieAnimationController 控制器,绑定动画资源,并设置动画的基本属性;

a. prepareAnimation 的固定参数是动画资源,不可缺少;

b. repeatCount 可设置动画重复的频率;RepeatCount.nTimes(n) 重复 n+1 次;RepeatCount.infinite() 无限循环播放;RepeatCount.dontRepeat() 仅一次,播放完停止;

c. repeatMode 可设置动画播放模式,START_OVER 播放完从头再次播放,REVERSE 从无到有从有到无;

d. duration 可设置动画播放时长;当设置无限重复时不生效;其余根据重复频率使单次动画时长均分;

e. preferredSize 可设置动画预加载大小,并不直接控制 Widget 大小;

代码语言:javascript
复制
whaleController = await instance.prepareAnimation(
    whaleLottie,
    repeatCount: const RepeatCount.infinite()
);
  1. 开启动画即可准备好动画的基本要素;
代码语言:javascript
复制
setState(() { whaleController.start(); });
  1. 将动画绘制在 Widget 即可初步成功;
代码语言:javascript
复制
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
    Container( width: 280.0, height: 200.0,
        child: FluttieAnimation(whaleController))
    )
  ])));
}
  1. 我们也可以动态监听动画状态并进行处理;

a. start() 从头开启动画;

b. pause() 暂停动画;

c. unpause() 从暂停处继续播放动画;

d. stopAndReset() 停止动画,rewindtrue 时结束动画并到动画开始时第一帧;false 为技术动画并到动画最后一帧;

代码语言:javascript
复制
Row(children: <Widget>[
  Expanded( flex: 1,
      child: FlatButton(
          onPressed: () { starController.start(); },
          child: Text('start'))),
  Expanded( flex: 1,
      child: FlatButton(
          onPressed: () { starController.pause(); },
          child: Text('pause'))),
  Expanded( flex: 1,
      child: FlatButton(
          onPressed: () { starController.unpause(); },
          child: Text('resume'))),
  Expanded( flex: 1,
      child: FlatButton(
          onPressed: () { starController.stopAndReset(rewind: true); },
          child: Text('stop')))
])

注意事项

1. dispose() 动画

动画对应用内存占用较大,建议在页面销毁或关闭时将动画销毁;

代码语言:javascript
复制
@override
void dispose() {
  super.dispose();
  whaleController?.dispose();
  starController?.dispose();
}
2. dispose() 与 stopAndReset() 区别

stopAndReset() 方法用来控制动画的停止状态,资源依然存在内存中,之后可继续操作动画的状态;

dispose() 方法用来停止动画并释放资源,之后不能再操作动画状态;

代码语言:javascript
复制
class _LottieStatePage extends State<LottieStatePage> {
  FluttieAnimationController whaleController, starController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
      Container(
          width: 280.0,
          height: 200.0,
          child: FluttieAnimation(whaleController)),
      Container(child: FluttieAnimation(starController)),
      Row(children: <Widget>[
        Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  starController.start();
                },
                child: Text('start'))),
        Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  starController.pause();
                },
                child: Text('pause'))),
        Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  starController.unpause();
                },
                child: Text('resume'))),
        Expanded(
            flex: 1,
            child: FlatButton(
                onPressed: () {
                  starController.stopAndReset(rewind: false);
                },
                child: Text('stop')))
      ])
    ])));
  }

  @override
  void dispose() {
    super.dispose();
    whaleController?.dispose();
    starController?.dispose();
  }

  @override
  void initState() {
    super.initState();
    prepareLottie();
  }

  void prepareLottie() async {
    var instance = Fluttie();
    var whaleLottie =
        await instance.loadAnimationFromAsset('images/animation_demo01.json');
    whaleController = await instance.prepareAnimation(
      whaleLottie,
      repeatCount: const RepeatCount.nTimes(2));

    var starLottie = await instance.loadAnimationFromAsset('images/star.json');
    starController = await instance.prepareAnimation(starLottie,
        repeatCount: const RepeatCount.infinite(),
        repeatMode: RepeatMode.START_OVER);

    setState(() {
      whaleController.start();
      starController.start();
    });
  }
}

Lottie 动画大大降低了我们的开发成本,且内存状态良好,但并非可以替代原生动画,只是丰富了动画开发的多样性;如有错误请多多指导!

来源:阿策小和尚

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿策小和尚 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 集成方式
    • 1. 在 pubspec.yaml 中添加依赖库
      • 2. 在文件中添加引用库
        • 3. 根据 API 调用
        • 注意事项
          • 1. dispose() 动画
            • 2. dispose() 与 stopAndReset() 区别
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档