flutter动画常用组件使用方法-优快云博客

本文深入探讨了Flutter中的多种动画组件，包括AnimatedContainer、AnimatedCrossFade、Hero、AnimatedBuilder、DecoratedBoxTransition、FadeTransition等，详细解析了它们的特性和用法，以及如何通过动画控制器实现复杂的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AnimatedContainer

属性改变, 根据设定的时间过渡大小颜色位移等, 类似transition

属性变化的动画

GestureDetector(
  onTap: () {
    setState(() {
      widget.width = 100.0;
    });
  },
  child: AnimatedContainer(
    duration: Duration(seconds: 2),
    width: widget.width,
    height: 200.0,
    color: Colors.red,
    child: Text('test'),
    padding: EdgeInsets.only(bottom: 100.0),
    curve: Curves.bounceOut,
  ),
)
复制代码

AnimatedCrossFade

一个widget，在两个孩子之间交叉淡入，并同时调整他们的尺寸, firstChild 在一定时间逐渐变成 secondChild

整个元素变化的动画

AnimatedCrossFade(
  firstChild: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.green,
    child: Text('123'),
  ),
  secondChild: Container(
    width: 200.0,
    height: 100.0,
    color: Colors.red,
    child: Text('456'),
  ),
  crossFadeState: widget.first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  duration: Duration(seconds: 2)
)
复制代码

Hero

https://flutterchina.club/animations/hero-animations/

AnimatedBuilder

用于构建动画的通用小部件。

用它包裹可以实现根据animation变化而变化的动画

AnimatedBuilder(
  animation: animation2,
  builder: (BuildContext ctx, Widget child) {
    return Container(
      transform:
          Matrix4.translationValues(0, animation2.value, 0),
      alignment: Alignment.topLeft,
      padding: EdgeInsets.fromLTRB(40.0, 30.0, 40.0, 0.0),
      child: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              '我是标题',
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 10.0),
            alignment: Alignment.topLeft,
            child: Text('我是内容啦啦啦啦'),
          )
        ],
      ),
    );
  },
)
复制代码

DecoratedBoxTransition

DecoratedBox的动画版本，可以给它的Decoration不同属性使用动画

针对Decoration的属性变化的动画

Animation<Decoration> animationTest;
AnimationController controllerTest;

controllerTest = new AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);

animationTest = DecorationTween(
  begin: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(0.0)),
    color: Colors.red
  ),
  end: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(20.0)),
      color: Colors.green
  )
).animate(controllerTest);

DecoratedBoxTransition(
    decoration: animationTest,
    child: Container(
      width: 100.0,
      height: 100.0,
    )
)

复制代码

FadeTransition

对透明度使用动画的widget

透明度的包装动画, 比直接用Opacity封装简单, 不如AnimatedOpacity方便

Animation<double> animationTest;
AnimationController controllerTest;
  
controllerTest = new AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);
animationTest = new Tween(begin: 1.0, end: 0.0).animate(controllerTest);

FadeTransition(
    opacity: animationTest,
    child: Container(
      width: 100.0,
      height: 100.0,
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(color: Colors.green, width: 10.0),
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
    )
)
复制代码

PositionedTransition/RelativePositionedTransition

Positioned的动画版本，它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置。

绝对定位的动画实现, 需要Stack包裹

Animation<RelativeRect> animationTest;
AnimationController controllerTest;
  
controllerTest = new AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);

animationTest = RelativeRectTween(
        begin: RelativeRect.fromLTRB(200.0, 200.0, 200.0, 200.0),
        end: RelativeRect.fromLTRB(20.0, 20.0, 20.0, 20.0))
    .animate(controllerTest);
        
Stack(children: <Widget>[
  PositionedTransition(
    rect: animationTest,
    child: GestureDetector(
      onTap: () {
        controllerTest.forward();
      },
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.red,
      ),
    ),
  )
]),
复制代码

RotationTransition

对widget使用旋转动画

1.0 = 360度

RotationTransition(
    turns: new Tween(begin: 0.0, end: 0.5).animate(controllerTest),
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: Text('12345678'),
    )
)
复制代码

ScaleTransition

对widget使用缩放动画

1.0为初始

ScaleTransition(
    scale: new Tween(begin: 1.0, end: 0.5).animate(controllerTest),
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: Text('12345678'),
    )
)
复制代码

AlignTransition

挪到中间

SizeTransition

宽度或者高度缩放

重点是axis控制的, 百叶窗效果可实现

SizeTransition(
    axis: Axis.horizontal, //控制宽度或者高度缩放
    sizeFactor:
        new Tween(begin: 1.0, end: 0.5).animate(controllerTest),
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: Text('12345678'),
    )
)
复制代码

SlideTransition

对相对于其正常位置的某个位置之间使用动画

Offset是相对于自己移动的百分比

SlideTransition(
    position: new Tween(
      begin: Offset(0.0, 0.0),
      end: Offset(0.5, 0.3),
    ).animate(controllerTest),
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: Text('12345678'),
    )
)
复制代码

AnimatedDefaultTextStyle

在文本样式切换时使用动画

AnimatedDefaultTextStyle(child: Text('1234567'), style: TextStyle(
    color: widget.color
  ), duration: Duration(seconds: 2)
)
复制代码

AnimatedListState

动画列表的state

AnimatedListdemo用

AnimatedModalBarrier

一个阻止用户与widget交互的widget

AnimatedOpacity

Opacity的动画版本，在给定的透明度变化时，自动地在给定的一段时间内改变孩子的Opacity

AnimatedOpacity(
    opacity: widget.opacity,
    duration: Duration(seconds: 2),
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.black,
    )
)
复制代码

AnimatedPhysicalModel

PhysicalModel的动画版本

阴影动画

AnimatedPhysicalModel(
    duration: Duration(seconds: 2),
    shape: BoxShape.rectangle,
    elevation: 20.0,
    color: Colors.transparent,
    shadowColor: widget.color,
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.black,
    )
)
复制代码

AnimatedPositioned

动画版本的Positioned，每当给定位置的变化，自动在给定的时间内转换孩子的位置。

相对于PositionedTransition简单一些, 但是功能相对单一

Stack(children: <Widget>[
  AnimatedPositioned(
      width: widget.width,
      duration: Duration(seconds: 2),
      child: GestureDetector(
        onTap: (){

          setState(() {
            widget.width = 100.0;
          });
        },
        child: Container(
          width: 100.0,
          height: 100.0,
          color: Colors.red,
        ),
      )
  )
]),
复制代码