Flutter之内置动画（转）

AnimatedContainer
AnimatedCrossFade
Hero
AnimatedBuilder
DecoratedBoxTransition
FadeTransition
PositionedTransition/RelativePositionedTransition
RotationTransition
ScaleTransition
AlignTransition
SizeTransition
SlideTransition
AnimatedDefaultTextStyle
AnimatedListState
AnimatedModalBarrier
AnimatedOpacity
AnimatedPhysicalModel
AnimatedPositioned
AnimatedSize
AnimatedWidget
AnimatedWidgetBaseState

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不同属性使用动画

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的动画版本，它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置。

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~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使用缩放动画

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

宽度或者高度缩放

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,
        ),
      )
  )
]),

AnimatedSize

动画widget，当给定的孩子的大小变化时，它自动地在给定时间内转换它的大小。

AnimatedWidget

当给定的Listenable改变值时，会重新构建该widget

AnimatedWidgetBaseState

具有隐式动画的widget的基类

原文：https://blog.csdn.net/weixin_43929882/article/details/88531433