Flutter以內置動畫（轉）

時間 2019-12-09

標籤 flutter 內置動畫简体版

原文原文鏈接

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

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 整個元素變化的動畫ui

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/this

AnimatedBuilder

用於構建動畫的通用小部件。用它包裹能夠實現根據animation變化而變化的動畫spa

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不一樣屬性使用動畫.net

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方便code

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的動畫版本，它須要一個特定的動畫來將孩子的位置從動畫的生命週期的起始位置移到結束位置。orm

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°blog

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