flutter經常使用內置動畫組件

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