flutter動畫經常使用組件使用方法

時間 2019-11-07

標籤 flutter 動畫經常使用組件使用方法简体版

原文原文鏈接

AnimatedContainer

屬性改變, 根據設定的時間過渡大小顏色位移等, 相似transitionbash

屬性變化的動畫ide

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

用於構建動畫的通用小部件。spa

用它包裹能夠實現根據animation變化而變化的動畫code

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

針對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

對透明度使用動畫的widgetci

透明度的包裝動畫, 比直接用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,
        ),
      )
  )
]),
複製代碼