Flutter AnimatedWidget,AnimatedBuilder动画(2.4)

最新推荐文章于 2024-05-16 22:48:29 发布
最新推荐文章于 2024-05-16 22:48:29 发布
阅读量469 收藏
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44819566/article/details/109675475
版权

Flutter学习之动画篇,理解有限,各位看客多多指点,多多包涵~

普通动画

在Flutter当中设置动画,需要使用动画控制器(AnimationController),使用它来控制动画的时间,开始,反向,暂停,等操作,


	 AnimationController _mAnimationController;
	 
	 _mAnimationController = new AnimationController(
	      vsync: this,
	      duration: Duration(seconds: 5),
	    );

AnimationController 参数介绍:

  • 参数一: vsync参数，存在vsync时会防止屏幕外动画（动画的UI不在当前屏幕时）消耗不必要的资源,通常情况使用with SingleTickerProviderStateMixin即可

class _AnimationPageState extends State with SingleTickerProviderStateMixin {

}

补充:
如果项目中只有一个动画使用的是 SingleTickerProviderStateMixin,项目中有2个以上的动画则使用TickerProviderStateMixin

  • 参数二:duration参数:用来设置动画执行时间
  • _mAnimationController.forward() //开始执行动画
  • _mAnimationController.reverse() //反向执行动画
  • _mAnimationController.reset() //重置
  • _mAnimationController.dispose() //删除/停止动画
  • _mAnimationController.repeat();//重复执行

Animation实例有2中状态:

  • Animation<double>改变的是帧状态
  • Animation<Color>改变的是颜色状态

接下来介绍的是 Animation<double>,设置动画,最后会为大家带来改变Animation<Color>的例子,大家可以尝试的写一下~,

Animation<double>:Tween补间动画:

	Animation<double> _mAnimation;

	_mAnimation = new Tween<double>(begin: 0, end: 200)
        //添加动画控制器
        .animate(_mAnimationController)
        ..addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          })
          ..addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });

Tween参数:

  • begin 开始
  • end 结束

然后通过animate()将动画控制器(AnimationController)添加到Tween参数当中.这里结合起来可以理解为,5秒内从0,变化到200,_mAnimation.value就是每秒获取的状态

细心的同学可能会发现,这里的…addListener()是什么意思

..addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          })
          ..addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });

其实啊,这是Dart中的语法,叫做联级符号,和这样写是一样的效果:

   _mAnimation = new Tween<double>(begin: 0, end: 200)
        //添加动画控制器
        .animate(_mAnimationController);

    _mAnimation.addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          });
    _mAnimation.addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });
  • addListener() 他可以为Animation添加帧监听,每一帧都会被调用,通过setState()来触发
  • addStatusListener() 他可以为Animation添加’动画状态改变’监听
addStatusListener 用來监听动画当前状态
     *  dismissed  动画在开始处停止。
     *  forward,   动画从头到尾都在运行。
     *  reverse     动画正在向后运行，从头到尾。
     *  completed   动画在结尾处停止。

还有一种方式:

 //创建动画控制器
 AnimationController _mAnimationController;
	 
 _mAnimationController = new AnimationController(
	      vsync: this,
	      duration: Duration(seconds: 5),
	    );
  //执行动画
 _mAnimationController.forward();


 @override
  Widget build(BuildContext context) {
    return FadeTransition(
		 //设置渐变动画
        opacity: _tweenAnimation,
		child: ;
	 );
  }

Curve:

Curve官方给的是’曲线’,但我感觉它类似于android的插值器(Interpolator)
Curve事例:Curve参考文档
_mAnimation通过chain()方法来添加Curve()

来看看完整代码吧:

建议在initState()初始化时来创建对象;


@override
  void initState() {
    //初始刷Controller设置执行时间
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );
    //设置变化区间 并监听
    _mAnimation = new Tween<double>(begin: 0, end: 200)
     	//执行曲线 类似于android中的插值器Interpolator 默认Curves.linear
        .chain(new CurveTween(curve: Curves.bounceIn))
        //添加动画控制器
        .animate(_mAnimationController);

    _mAnimation.addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          });
    _mAnimation.addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });
    /**
     * addStatusListener 用來监听动画当前状态
     *  dismissed  动画在开始处停止。
     *  forward,   动画从头到尾都在运行。
     *  reverse     动画正在向后运行，从头到尾。
     *  completed   动画在结尾处停止。
     */

    super.initState();
  }

Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                //重置
                _mAnimationController.reset();
                //开始
                _mAnimationController.forward();
              },
              child: Text("开始",style: TextStyle(fontSize: 25),),
            ),
            Container(
              width: _mAnimationValue,
              height: _mAnimationValue,
              child: FlutterLogo(),
            )
          ],
        ),
      )

最后需要在页面消失的时候将动画控制器也给销毁掉,这样能更好的资源回收.

  @override
  void dispose() {
    // TODO: implement dispose
    //资源回收
    _mAnimationController.dispose();
    super.dispose();
  }

效果图(1.1):

在这里插入图片描述

AnimatedWidget

AnimatedWidget其实就是简化了addListener()方法,只需要继承自AnimatedWidget()就可以实现动画效果


  AnimationController _mAnimationController;
  Animation<double> _mAnimation;

@override
  void initState() {
    //初始刷Controller设置执行时间
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );
    //设置变化区间 并监听
    _mAnimation = new Tween<double>(begin: 0, end: 200)
        //执行曲线 类似于android中的插值器Interpolator 默认Curves.linear
        .chain(new CurveTween(curve: Curves.bounceIn))
        //添加动画控制器
        .animate(_mAnimationController);
        //不用在写addListener()监听方法监听帧变化了!
    super.initState();
  }

继承自AnimatedWidget,将Animation<double>参数传进来,然后给到父类的listenable,在获取到value设置给布局即可.

class AnimationWidget extends AnimatedWidget {
  AnimationWidget({Key key, Animation<double> animaiton})
      : super(key: key, listenable: animaiton);

  @override
  Widget build(BuildContext context) {
    //通过父类方法listenable来获取Animation<double>对象
    Animation<double> _mAnimation = listenable;
    return Container(
      width: _mAnimation.value,
      height: _mAnimation.value,
      child: FlutterLogo(),
    );
  }
}

资源回收:

  @override
  void dispose() {
    // TODO: implement dispose
    //资源回收
    _mAnimationController.dispose();
    super.dispose();
  }

Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                //重置
                _mAnimationController.reset();
                //开始
                _mAnimationController.forward();
              },
              child: Text("开始",style: TextStyle(fontSize: 25),),
            ),
            //调用AnimationWidget将Animaiton传给他即可~!
            AnimationWidget(animaiton: _mAnimation),

          ],
        ),
      ),

效果图(1.2):
在这里插入图片描述

AnimatedBuilder

AnimatedBuilder也是简化了addListener()方法,直接将布局和动画给到AnimatedBuilder,就可以实现动画效果

动画条件不变:


  AnimationController _mAnimationController;
  Animation<double> _mAnimation;

@override
  void initState() {
    //初始刷Controller设置执行时间
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );
    //设置变化区间 并监听
    _mAnimation = new Tween<double>(begin: 0, end: 200)
        //执行曲线 类似于android中的插值器Interpolator 默认Curves.linear
        .chain(new CurveTween(curve: Curves.bounceIn))
        //添加动画控制器
        .animate(_mAnimationController);
        //不用在写addListener()监听方法监听帧变化了!
    super.initState();
  }

创建AnimatedBuilder必填参数是:
builder: (BuildContext context, Widget child) {} ); 返回的是动画
animation也是必填参数

	AnimatedBuilder(
              child: Container(
                color: Colors.yellow,
                width: 100,
                height: 100,
                child: FlutterLogo(),
              ),
              builder: (BuildContext context, Widget child) {
                return Container(
                //这次不从0开始显示,从100开始显示看看效果~
                  width: _mAnimation.value + 100,
                  height: _mAnimation.value + 100,
                  //这里的child就是上边给的FlutterLogo()
                  child: child,
                );
              },
              //必填参数将动画给导布局图片
              animation: _mAnimation,
            )

效果图(1.3):
在这里插入图片描述

Animation<Color>事例:

我是采用的AnimatedWidget办法

第一步还是不会变的,还是设置动画控制器(AnimationController),然后设置Color颜色变化状态,由Colors.amber颜色变化到 Colors.tealAccent颜色

 @override
  void initState() {
    //初始刷Controller设置执行时间
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );
    
    //改变颜色状态
    _mAnimationColor =
        new ColorTween(begin: Colors.amber, end: Colors.tealAccent)
            .animate(_mAnimationController);

    super.initState();
  }

我这里的Animation<double>和Animation<Color>复用的,建议大家分开写!

class AnimationWidget extends AnimatedWidget {
  
  //isColor true是Animation<Color>类型
  //        false 是Animation<double>类型
  bool isColor;

  AnimationWidget(
      {Key key,
      Animation<Color> animaitonColor,
      Animation<double> animaitonDouble,
      @required this.isColor})
      : super(key: key, listenable:isColor == true? animaitonColor :animaitonDouble);

  Animation<Color> _mAnimationColor;
  Animation<double> _mAnimationDouble;

  @override
  Widget build(BuildContext context) {
    //通过父类方法listenable来获取Animation<double>对象
    if (isColor) {
      _mAnimationColor = listenable;
    } else {
      _mAnimationDouble = listenable;
    }

    return isColor == true
        ? Container(
            width: 100,
            height: 100,
            color: _mAnimationColor.value,
            child: FlutterLogo(),
          )
        : Container(
            width: _mAnimationDouble.value,
            height: _mAnimationDouble.value,
            child: FlutterLogo(),
          );
  }
}

资源回收

  @override
  void dispose() {
    // TODO: implement dispose
    //资源回收
    _mAnimationController.dispose();
    super.dispose();
  }

效果图(1.4):
在这里插入图片描述

完整代码

上一章:Flutter Ink,InkWell,InkResponse水波纹实现(2.3)

下一章:Flutter Hero动画(2.5)

原创不易,您的点赞就是对我最大的支持,请留下您的点赞吧~

s10g
关注
专栏目录
【Flutter】Flutter 动画深入解析（2）：掌握 AnimatedBuilder 将动画的逻辑和 UI 代码分离
Code Metaverse
11-04 312
在移动应用开发中，动画无疑是增强用户体验的一个重要手段。它不仅可以使应用看起来更加生动有趣，还可以为用户提供更加直观的反馈。在 Flutter 中，我们有很多工具可以帮助我们创建动画，其中一个非常强大的工具就是 AnimatedBuilder。
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 )
03-28
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 ) | https://hanshuliang.blog.csdn.net/article/details/115275397 | 博客源码示例
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-28 1445
AnimatedBuilder 动画使用流程 : ① 创建动画控制器、 ② 创建动画、 ③ 创建动画作用的组件、 ④ 创建 AnimatedBuilder 关联动画与组件、 ⑤ 执行动画、
Flutter 中的 AnimatedBuilder 小部件：全面指南
smileKH的博客
05-16 590
是一个自动监听动画值变化并重新构建其子组件的小部件。它对于实现依赖于动画值的动态 UI 非常有帮助，例如，根据滑动位置变化的 UI 元素或随动画变化的样式。opacity: _animationController.value, // 使用动画值设置透明度},),
Flutter开发——动画封装类AnimatedBuilder
Memory_of_the_wind的博客
06-04 649
【代码】Flutter开发——动画封装类AnimatedBuilder。
flutter导航栏动画资源
05-08
动画的实现主要依赖于Flutter的`Animated`包，其中包括`AnimatedBuilder`、`AnimatedCrossFade`、`AnimatedIcon`等组件。例如，当用户点击底部导航栏的某个图标时，我们可以使用`AnimatedCrossFade`来平滑地过渡到新...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 ).zip
03-28
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 ) | https://hanshuliang.blog.csdn.net/article/details/115284564 | ...
Flutter 绘制加载动画
最新发布
08-14
绘制加载动画：由小圆组成的大圆 效果视频展示：https://live.csdn.net/v/417383 请查看我的博客Flutter进阶，有此视频的代码介绍
Flutter动画详第一篇(隐式动画)
我叫柱子哥
03-05 1117
Flutter提供了许多实现动画的API,利用这些API,我们可以制作各种酷炫的动画效果，这篇文章就是讲Flutter中动画的使用。
AnimatedBuilder
laying_1230
06-17 251
AnimatedBuilder AnimatedBuilder可以让我们轻松的构建动画控件，下面的案例是让flutter logo图片旋转，代码如下： class _TestState extends State<Test> with TickerProviderStateMixin { AnimationController animationController; @override void initState() { animationController = Anim
Flutter动画Animation开发指南
你的益达啊
04-09 2975
动画Animation开发指南 在Flutter中有哪些类型的动画？ 如何使用动画库中的基础类给widget添加动画？ 如何为动画添加监听器？ 该什么时候使用AnimatedWidget与AnimatedBuilder? 如何使用Hero动画？ 精心设计的动画会让用户界面感觉更直观、流畅，能改善用户体验。 Flutter的动画支持可以轻松实现各种动画类型。许多widget，特别是Material Design widgets， 都带有在其设计规范中定义的标准动画效果，但也可以自定义这些效果。 在
Flutter 动画设计之AnimatedBuilder
Leove的专栏
07-07 928
AnimatedBuilder是用于构建动画的通用小组件。 相对较为简单的动画组件是 AnimatedWidget。 第一步，创建一个动画， 第二步，通过build方法，将动画装入。 使用预构建的子组件可以提高效率。 视频网址为：https://www.bilibili.com/video/BV1sT4y1J7nr 下面是一个旋转的动画示例 /// Flutter code sample for AnimatedBuilder // This code defines a widget t
Flutter性能优化实践 —— UI篇
2401_84123005的博客
04-05 339
动画的使用在实际开发中很常见，但是一旦使用不当也会造成不必要的刷新，甚至会带来卡顿。举一个deer中的例子，商品列表页中有一个商品操作菜单的呼入呼出动画（这里就不谈具体的实现效果了，有兴趣的可以去看源码）。一开始的写法如下：效果如下：这个动画看起来还是比较流畅的。顶部的性能图表()中，UI花费的时间平均在7.2ms/frame。比起16ms的安全标准来说已经非常好了。
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-28 1482
◯、AnimatedWidget 组件引入、 一、创建 AnimatedWidget 动画组件、 二、创建动画控制器、 三、创建动画、 四、动画运行、 五、完整代码示例、 六、相关资源、
Flutter AnimatedWidget 实现动画的自动刷新，Android开发需要学什么
03-23 836
群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。DemoStreamBuilder 主页面。本页面实现 Demo 效果如下。//不显示 debug标签。
30、Flutter之AnimatedWidget相关动画
wywinstonwy的专栏
01-11 5165
基本的动画概念和类 Animation<double> CurvedAnimation AnimationController Tween Tween.animate 动画通知 动画示例 渲染动画 用AnimatedWidget简化 监视动画的过程 用AnimatedBuilder重构 并行动画 基本的动画概念和类 重点是什么？ Animation对象是Flutter动画库中的一个核心类，它生成指导动画的值。 Animation对象知
Flutter Animation动画
大灰狼的小绵羊哥哥的博客
11-30 2202
一，概述　　　 　　Flutter动画库的核心类是Animation对象，它生成指导动画的值，Animation对象指导动画的当前状态(例如，是开始、停止还是向前或者向后移动)，但它不知道屏幕上显示的内容。动画类型分为两类： 补简动画(Tween)，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。Tween是一个无状态(stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0
Flutter 使用 AnimatedBuilder 分离组件和动画实现动效复用
Flutter 跨平台技术研究
04-18 409
分离动画实现逻辑和 UI 组件，实现动效复用 —— 这才是 AnimatedBuilder 的正确打开方式。
Flutter PositionedTransition缩放动画详解及示例
在Flutter中，`PositionedTransition` 是一个强大的工具，用于创建平滑的界面转换效果，特别是在需要实现复杂的动画场景时。本篇文章主要关注如何利用 `PositionedTransition` 实现缩放动画，这对于提升用户体验和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

s10g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值