Flutter-视频系列--图解动画小插曲之-Lottie-动画

本文介绍了在Flutter中使用Lottie动画的详细步骤,包括如何准备和控制动画,如设置重复次数和模式,以及如何在Widget中显示。此外,还讨论了dispose()和stopAndReset()的区别,强调在页面销毁时释放资源的重要性。
摘要由CSDN通过智能技术生成
  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 大小;

whaleController = await instance.prepareAnimation(
whaleLottie,
repeatCount: const RepeatCount.infinite()
);

  1. 开启动画即可准备好动画的基本要素;

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

  1. 将动画绘制在 Widget 即可初步成功;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container( width: 280.0, height: 200.0,
child: FluttieAn

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值