动画

在flutter中，如果想让某个widget执行动画，需要用一个动画类的widget封装一下，比如一个图片

Center(child: Image.asset(xxxxxx),
),

想实现透明度动画，使用FadeTransition，如下

Center(child: FadeTransition(opacity: _speakAnimation,child: Image.asset(R.assetsLiveSpeak),),
),

关键是opacity，是一个Animation，要想实现一个动画，还需要一个Tween和一个AnimationController。

Tween就是Animation。Tween还需要一个AnimationController，他们的创建及定义如下：

class _XXX extends State<XXXX>  with SingleTickerProviderStateMixin{AnimationController _speakController;Animation _speakAnimation;@overridevoid initState() {super.initState();_speakController = AnimationController(vsync: this,duration: Duration(seconds: 2),);_speakAnimation = Tween(begin: 1.0,end: 0.0,).animate(_speakController);_speakAnimation.addStatusListener((status) {   //监听动画if(status == AnimationStatus.completed){//todo}});}...

可以看到Tween定义的是动画的起始和结束状态（这里就是透明度的值）。而AnimationController主要是定义时长。

另外Tween可以添加动画监听（addStatusListener），一共有四种状态

enum AnimationStatus {/// The animation is stopped at the beginning.dismissed,/// The animation is running from beginning to end.forward,/// The animation is running backwards, from end to beginning.reverse,/// The animation is stopped at the end.completed,
}

但是这样还差最后一步，启动动画，因为我们需求是页面一展示即播放，所以在build函数中forward一下即可（当然还可以在其他时机播放），代码如下：

class _XXX extends State<XXXX>  with SingleTickerProviderStateMixin{AnimationController _speakController;Animation _speakAnimation;@overridevoid initState() {super.initState();_speakController = AnimationController(vsync: this,duration: Duration(seconds: 2),);_speakAnimation = Tween(begin: 1.0,end: 0.0,).animate(_speakController);_speakAnimation.addStatusListener((status) {if(status == AnimationStatus.completed){//todo}});}...Widget build(BuildContext context) {_speakController.forward(); //播放动画return Stack(children: <Widget>[Center(child: FadeTransition(opacity: _speakAnimation,child: Image.asset(R.assetsLiveSpeak),),),...

动画卡顿

从今天的一个需求说起吧，实现一个按钮呼吸效果，很简单，就是使用一个缩放动画即可，如下：

class _xxx extends State<xxx> with SingleTickerProviderStateMixin{AnimationController _animationController;Animation _animation;@overridevoid initState() {super.initState();_animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 800),);_animation = Tween(begin: 0.8,end: 1.0,).animate(_animationController);}@overridevoid dispose() {_animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {_animationController.repeat(reverse: true);return Stack(alignment: Alignment.center,children: [...Column(children: [...ScaleTransition(scale: _animation,child: TextButton(onPressed: widget.onOpen,child: Container(width: 120,height: 60,padding: EdgeInsets.only(bottom: 8),alignment: Alignment.center,decoration: BoxDecoration(image: DecorationImage(image: AssetImage(R.assetsLiveRedPackageBtn))),child: Text("领取",style: TextStyle(fontSize: 22,fontWeight: FontWeight.bold,color: Color(0xFFB34D35)),),),),),...],)],);}
}

动画效果是从0.8倍扩大到1.0，然后reverse，一直repeat即可。

但是运行后发现动画出现了异常，动画扩大到1.0后会快速小幅度缩放一次，然后才会还原到0.8
这明显不是我们想要的动画效果，后来我们尝试了其他动画，都有类似的效果。

但是在其他页面上的动画就不会出问题，所以最后排查发现是该页面的定时器影响到了动画。

这个页面里有一个倒计时，通过Timer来更新其中倒计时的文字，而更新使用了setState进行重绘，这样在动画执行到1秒的时候（扩大到1.0又缩回一点的时候）倒计时更新了，由于是setState，所以动画widget也重绘了（这样又变回1.0大小了），然后才缩回0.8

解决方法就是新增一个StatefulWidget类，将Timer和倒计时相关的组件放到这个类中实现，这样倒计时更新只会刷新这一部分，不会刷新动画组件，如下：

class TimerText extends StatefulWidget{int time;TimerText(this.time);@overrideState<StatefulWidget> createState() {return _TimerText();}
}class _TimerText extends State<TimerText>{Timer timer;@overridevoid initState() {super.initState();timer = Timer.periodic(Duration(seconds: 1), (timer) {setState(() {if(widget.time <= 0){timer.cancel();}else{widget.time--;}});});}@overridevoid dispose() {timer.cancel();super.dispose();}@overrideWidget build(BuildContext context) {return Text("${widget.time}s",style: TextStyle(fontSize: 14,color: Color(0xFFF9D873)),);}}

关注公众号：BennuCTech，获取更多干货！

Flutter入门：动画相关相关推荐

Unity快速入门之四 - Unity模型动画相关
最近要给公司的小伙伴做Unity入门,针对几个常用的知识进行快速入门介绍. Unity快速入门之一 3D基础概念.Camera.Canvas RenderMode的几种方式对比_翕翕堂 Unity快速 ...
Flutter 入门指北(Part 9)之弹窗和提示(SnackBar、BottomSheet、Dialog)
该文已授权公众号「码个蛋」,转载请指明出处前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示.Flutter 中的操作提示主要有这么几种 SnackBar.Botto ...
Flutter InkWell 动画浅析
背景最近在开发 Flutter 项目过程中遇到了一个很有意思的 bug,如果页面在 InkWell 动画期间弹出一个 Dialog,那么 InkWell 的动画效果不会消失,如下图右上角所示.以此为 ...
UE4 C++入门——动画蒙太奇学习笔记
UE4 C++入门--动画蒙太奇_哔哩哔哩_bilibili 1.创建动画蒙太奇 2.选择角色的骨架 SK_Mannequin(模型)_Skeleton(骨骼) 3.蒙太奇组视频中可以看出ExoG ...
Flutter入门——创建第一个Flutter项目
Flutter入门--创建第一个Flutter项目一.创建项目第一个项目使用Android Studio创建,步骤如下: 先打开Android Studio,会有一个创建新的Flutter应用的选 ...
Flutter入门实战：从0到1仿写web版掘金App
2018曾埋下一粒种子,今年一定要写一本小册... 前言立贴的方向曾今是分析react源码并实现react mini...的确亚历山大,后因团队技术方向探索以及业务压力,没有太多时间来学习源码.当然 ...
Flutter 入门经典
Flutter是Google公司推出的新一代前端框架,最初目标只是为了满足移动端跨平台的应用开发, 开发人员可使用 Flutter 在 iOS 和 Android 上快速构建高质量的原生用户界面.但如 ...
Flutter入门进阶之旅（十二）Flutter 数据存储
前言之前的章节我们基本上把Flutter中基础部分的东西都做了简单的讲解,通过前面章节的循序学习读者也基本能完成一些简单的UI绘制并能利用Flutter处理一些简单的用户交互,读者可能也留意到,我们 ...
Flutter入门系列（二）---Flutter的原理及美团的实践
转载自:美团技术团队导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发 ...
flutter 透明度动画_Flutter中的动画填充+不透明度动画✨
flutter 透明度动画 Flutter SDK provides us with many widgets which help us in animating elements on scree ...

Flutter入门：动画相关

动画

动画卡顿

Flutter入门：动画相关相关推荐

最新文章

热门文章