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,
    );
  }
}

　　

begin: const Offset(0.0, 2.0)表示的意思是：动画刚开始child的x轴的起点不变，y轴起点是(1+2)* y。ps:y是child的高度值
end: const Offset(0.0, 1.0) 表示的意思是:动画结束后，x轴坐标不变，y轴坐标是(1+1)* y