flutter 动画
AnimatedCrossFade
AnimatedCrossFade让俩个子widget 交替淡入淡出。
class AnimatedCrossFade1 extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return new AnimatedCrossFade2(); } } class AnimatedCrossFade2 extends State<AnimatedCrossFade1> { var _first = false; @override Widget build(BuildContext context) { new Timer(new Duration(seconds: 3), () { setState(() { _first = !_first; }); }); return AnimatedCrossFade( duration: const Duration(seconds: 3), firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0), secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0), crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond, ); } }
AnimatedBuilder
AnimatedBuilder构建动画最常用的控件。AnimatedBuilder 由 animation,child,builder 三个参数。
class AnimatedBuilder1 extends StatefulWidget { @override State<StatefulWidget> createState() { return new AnimatedBuilder2(); } } class AnimatedBuilder2 extends State<AnimatedBuilder1> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { var controller = AnimationController(duration: Duration(seconds: 3), vsync: this) ..forward(); return new AnimatedBuilder( animation: controller, child: Container(width: 200.0, height: 200.0, color: Colors.green), builder: (BuildContext context, Widget child) { print(controller.value); return Transform.scale( scale: controller.value, child: child, ); }); } }
当创建一个AnimationController时,需要传递一个vsync
参数,存在vsync
时会防止屏幕外动画(译者语:动画的UI不在当前屏幕时)消耗不必要的资源。 通过将SingleTickerProviderStateMixin添加到类定义中,可以将stateful对象作为vsync
的值。你可以在GitHub的animate1中看到这个例子 。
2.3 DecoratedBoxTransition
DecoratedBoxTransition 装饰widget边界的动画。核心是Animation<Decoration>对象和Child。Animation<Decoration>通过DecorationTween.animate(controller) 得到。
属性:position 代表绘制边框是在widget前还是后。
demo如下:
class DecoratedBoxTransition1 extends StatefulWidget { @override State<StatefulWidget> createState() { return new DecoratedBoxTransition2(); } } class DecoratedBoxTransition2 extends State<DecoratedBoxTransition1> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { DecorationTween decorationTween = DecorationTween( begin: BoxDecoration( color: Colors.blue,//子widget背景颜色 border: Border.all( color: Colors.blue,//边界颜色 style: BorderStyle.solid, width: 1.0, ), borderRadius: BorderRadius.all(Radius.circular(20)), shape: BoxShape.rectangle, boxShadow: const <BoxShadow>[ BoxShadow( color: Colors.amberAccent, blurRadius: 5.0, spreadRadius: 5.0, ) ], ), end: BoxDecoration( color: Colors.green, border: Border.all( color: Colors.green, style: BorderStyle.solid, width: 1.0, ), shape: BoxShape.rectangle, boxShadow: const <BoxShadow>[ BoxShadow( color: Colors.blueGrey, blurRadius: 5.0, spreadRadius: 5.0, ) ], borderRadius: BorderRadius.all(Radius.circular(30)), ), ); var controller = AnimationController(duration: Duration(seconds: 3), vsync: this) ..forward(); Animation<Decoration> d = decorationTween.animate(controller); return new DecoratedBoxTransition( decoration: d, position: DecorationPosition.background, child: new Container( width: 200, height: 200, )); } }
ps: DecoratedBoxTransition 的child 背景色最好是无色的。不然会影响效果
2.3 FadeTransition 淡入淡出动画
FadeTransition 淡入淡出动画。opacity 属性需要指定一个Animation<double>,child属性指定widget。
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: new FadeTransition( opacity: new AnimationController( duration: Duration(seconds: 3), vsync: this, )..repeat(), child: FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0), alwaysIncludeSemantics: true, ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }
2.4 PositionedTransition 定位动画
PositionedTransition动画很麻烦,主要由俩个重要的属性:
- rect
规定子widget 离 Stack边距的值。由RelativeRectTween.animate(AnimationController)获得。 - child
顾名思义将被施加动画的widget
ps:PositionedTransition 必须作为Stack 控件的子View,否则就会报错。
class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{ @override Widget build(BuildContext context) { Animatable animatable= RelativeRectTween(begin: new RelativeRect.fromLTRB(75.0, 75, 75, 75.0), end: new RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0), ); Animation frontRelativeRect = animatable.animate(new AnimationController( duration: Duration(seconds: 3), vsync: this, )..repeat()); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Stack( alignment: Alignment.center, fit: StackFit.loose, children: <Widget>[ Container( width: 200, height: 200, color: Colors.blue), Container( width: 100, height: 100, color: Colors.red, ), PositionedTransition( rect: frontRelativeRect, child: Container( width: 50, height: 50, color: Colors.orange, ) , ) ], ), // This trailing comma makes auto-formatting nicer for build methods. ); } }
Stack 控件
Stack层叠控件。其childWidget 可以层叠到一起,层叠顺序:Widget越后创建,层级越靠上
可以控制没有定位的childWidget的布局策略。
可以控制没有定位的childWidget的布局策略
Stack({ this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List<Widget> children = const <Widget>[], })
-
alignment
决定如何去对齐没有定位(没有使用Positioned)或部分定位的子widget。所谓部分定位,在这里特指没有在某一个轴上定位:left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位 -
textDirection
和Row、Wrap的textDirection功能一样,都用于决定alignment对齐的参考系即:textDirection的值为TextDirection.ltr,则alignment的start代表左,end代表右;textDirection的值为TextDirection.rtl,则alignment的start代表右,end代表左。 -
fit
此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小,StackFit.expand表示扩伸到Stack的大小。 -
overflow
此属性决定如何显示超出Stack显示空间的子widget,值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会。
2.5 RotationTransition 旋转动画
旋转动画RotationTransition。核心属性child和turns。
class RotationTransitionState extends State<RotationTransition1> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { return new RotationTransition( child: Container( width: 100, height: 100, color: Colors.orange, ), turns: AnimationController( duration: Duration(seconds: 1), vsync: this, lowerBound: 0, upperBound: 0.1, )..forward(), ); } }
2.6 ScaleTransition缩放动画
ScaleTransition 核心属性child 和scale。scale类型是Animation<double>。Animation<double>可以根据Tween.animate 生成。
demo:是由1缩小到0
class ScaleTransitionState extends State<ScaleTransition1> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { Animation<double> t = Tween(begin: 1.0, end: 0.0).animate(AnimationController( duration: Duration(seconds: 3), vsync: this, )..forward()); return new ScaleTransition( child: Container( width: 100, height: 100, color: Colors.orange, ), scale: t, ); } }
2.6 SlideTransition移动动画
SlideTransition 动画最重要的属性是position和child。position是Animation<Offset>。可以通过Tween.animate 生成。
class SlideTransition1State extends State<SlideTransition1> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { var t = Tween<Offset>( begin: const Offset(0.0, 2.0), end: const Offset(0.0, 1.0), ).animate(AnimationController( duration: Duration(seconds: 3), vsync: this, )..forward()); return new SlideTransition( child: Container( width: 100, height: 100, color: Colors.orange, ), position: t, ); } }
end: const Offset(0.0, 1.0) 表示的意思是:动画结束后,x轴坐标不变,y轴坐标是(1+1)* y