《Flutter 控件大全》第一零零：TweenAnimationBuilder

最新推荐文章于 2024-05-22 23:31:29 发布

老孟Flutter

最新推荐文章于 2024-05-22 23:31:29 发布

阅读量1.3k

点赞数 1

分类专栏： # Flutter Widgets 文章标签： flutter TweenAnimation

本文链接：https://blog.csdn.net/mengks1987/article/details/105311162

版权

Flutter Widgets 专栏收录该内容

103 篇文章 128 订阅 ¥9.90 ¥99.00

订阅专栏

本文介绍了Flutter中的TweenAnimationBuilder组件，用于创建简单动画。通过设置动画时长、Tween对象以及动画曲线，实现自定义动画效果。并提供了一个图片放大缩小的Demo，帮助开发者理解其用法。

摘要由CSDN通过智能技术生成

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

开发App中有时需要一个简单的动画，可以通过AnimationController实现，但比较麻烦，有没有一个内置的隐式动画组件来解决这个问题？TweenAnimationBuilder可以满足你对所有自定义动画的需求，而不用关系AnimationController。

TweenAnimationBuilder用法比较简单，首先需要一个动画时长参数：

TweenAnimationBuilder<double>(
	duration: Duration(seconds: 2),
)

然后添加一个builder方法，用法如下：

builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      }

builder方法有3个参数，第一个是BuildContext，第二个value的类型取决于你要做动画的数据，比如：

TweenAnimationBuilder<double>(
	builder: (context, value, child) {
	}
)

value的类型就是double，如果是TweenAnimationBuilder<Color>,value的类型就是Color。
第三个就是TweenAnimationBuilder的子组件，用于优化。

设置tween（动画的值），比如需要一个100到200的差值，设置如下：

tween: Tween<double>(begin: 100.0, end: 200),

如果需要颜色值使用ColorTween,这样我们的动画组件就可以动起来了。

我们也可以设置动画曲线，设置如下：

TweenAnimationBuilder<double>(
	 curve: Curves.bounceIn,
)

通过onEnd监听动画完成通知，用法如下：

TweenAnimationBuilder<double>(
	 onEnd: () {}
)

下面写一个图片不断放大变小的demo：

double _value = 200;
  
  @override
  Widget build(BuildContext context) {
    return Center(
        child: TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 100.0, end: _value),
      duration: Duration(seconds: 2),
      curve: Curves.bounceIn,
      builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      },
      onEnd: () {
        setState(() {
          _value = _value == 200 ? 250 : 200;
        });
      },
      child: Image.network(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
        fit: BoxFit.fill,
      ),
    ));
  }

效果如下：