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

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

　　

AnimatedSize

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

AnimatedWidget

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

AnimatedWidgetBaseState

具有隐式动画的widget的基类

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