文章目錄
PositionedTransition/RelativePositionedTransition
----------------------------------------------------------------
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