【Flutter】三十七、Flutter动画组件（二）

一、AnimatedContainer

带有动画效果的Container，属性与Container类似，只不过多了curve动画曲线的设置。

示例：

import 'package:flutter/material.dart';

class AnimatedContainerRoute extends StatefulWidget{
  @override
  _AnimatedContainerRouteState createState() {
    // TODO: implement createState
    return _AnimatedContainerRouteState();
  }
}

class _AnimatedContainerRouteState extends State<AnimatedContainerRoute>{
  Size size = Size(0,0);
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainerDemo'),
      ),
      body: Center(
        child:Column(
          children: <Widget>[
            AnimatedContainer(
              duration: Duration(seconds: 2),
              curve: Curves.easeInOutQuart,
              height: size.height,
              width: size.width,
              color: Colors.blue,
              margin: EdgeInsets.all(30),
              alignment: Alignment.center,
              child: Text('AnimatedContainer', style: TextStyle(color: Colors.white),),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: (){
                setState(() {
                  size = size.width == 0 ?  Size(300, 200) : Size(0,0);
                });
              },
            )
          ],
        ),
      )
    );
  }
}

---

二、AnimatedCrossFade

在两个widget之间切换

import 'package:flutter/material.dart';

class AnimatedCrossFadeRoute extends StatefulWidget {
  @override
  _AnimatedCrossFadeRouteState createState() {
    // TODO: implement createState
    return _AnimatedCrossFadeRouteState();
  }
}

class _AnimatedCrossFadeRouteState extends State<AnimatedCrossFadeRoute> {
  bool _isFirst = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimatedCrossFade'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                constraints: BoxConstraints.tight(Size(400, 500)),
                alignment: Alignment.center,
                child: AnimatedCrossFade(
                  sizeCurve: Curves.easeInOut,
                    alignment: Alignment.topLeft,
                    firstChild: Container(
                      constraints: BoxConstraints.tight(Size(100, 100)),
                      color: Colors.red,
                    ),
                    secondChild: Container(
                        constraints: BoxConstraints.tight(Size(300, 300)),
                        color: Colors.blue),
                    crossFadeState: _isFirst
                        ? CrossFadeState.showFirst
                        : CrossFadeState.showSecond,
                    duration: Duration(seconds: 1),
                  layoutBuilder: (Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey){
                    return Stack(
                      fit: StackFit.loose,
                      alignment: Alignment.center,
                      children: <Widget>[
                        Positioned(
                          key: bottomChildKey,
                          child: bottomChild,
                        ),
                        Positioned(
                          key: topChildKey,
                          child: topChild,
                        )
                      ],
                    );
                  },
                ),
              ),
              RaisedButton(
                child: Text('change Container'),
                onPressed: () {
                  setState(() {
                    _isFirst = !_isFirst;
                  });
                },
              )
            ],
          ),
        ));
  }
}

---

三、DecoratedBoxTransition

带有动画效果的DecoratedBox。

import 'package:flutter/material.dart';

class DecoratedBoxTransitionRoute extends StatefulWidget {
  @override
  _DecoratedBoxTransitionRouteState createState() {
    // TODO: implement createState
    return _DecoratedBoxTransitionRouteState();
  }
}

class _DecoratedBoxTransitionRouteState
    extends State<DecoratedBoxTransitionRoute>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _animated = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('DecoratedBoxTransition'),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          SizedBox(height: 30.0,),
          DecoratedBoxTransition(
            decoration: DecorationTween(
                    begin: BoxDecoration(color: Colors.red),
                    end: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(300.0)))
                .animate(_controller),
            child: Container(
              constraints: BoxConstraints.tight(Size(300, 300)),
            ),
          ),
          SizedBox(height:30.0),
          RaisedButton(
            child: Text('start animate'),
            onPressed: () {
              _animated ? _controller.reverse() : _controller.forward();
              setState(() {
                _animated = !_animated;
              });
            },
          )
        ],
      )),
    );
  }
}

四、FadeTransition

渐隐渐现、透明度动画。

import 'package:flutter/material.dart';

class FadeTransitionRoute extends StatefulWidget{
  @override
  _FadeTransitionRouteState createState() {
    // TODO: implement createState
    return _FadeTransitionRouteState();
  }
}

class _FadeTransitionRouteState extends State<FadeTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('FadeTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            FadeTransition(
              opacity: Tween(begin: 1.0, end: 0.0).animate(_controller),
              child: Container(
                constraints: BoxConstraints.tight(Size(300,300)),
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 30.0),
              ),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

五、PositionedTransition

Position的动画版。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PositionedTransitionRoute extends StatefulWidget {
  @override
  _PositionedTransitionRouteState createState() {
    // TODO: implement createState
    return _PositionedTransitionRouteState();
  }
}

class _PositionedTransitionRouteState extends State<PositionedTransitionRoute>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _animate = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('PositionTranstion'),
      ),
      body: Stack(
        children: <Widget>[
          PositionedTransition(
            rect: RelativeRectTween(
                    begin: RelativeRect.fromLTRB(200.0, 200.0, 200.0, 200.0),
                    end: RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0))
                .animate(_controller),
            child: Container(
              height: 100,
              width: 100,
              color: Colors.red,
            ),
          ),
          Positioned(
            bottom: 20.0,
            left: 0,
            right: 0,
            child: Center(
              child: RaisedButton(
                child: Text('start animate'),
                onPressed: () {
                  _animate ? _controller.reverse() : _controller.forward();
                  setState(() {
                    _animate = !_animate;
                  });
                },
              ),
            )
          ),
        ],
      ),
    );
  }
}

六、RotationTransition

旋转动画。其中1.0表示360°。

import 'package:flutter/material.dart';

class RotationTransitionRoute extends StatefulWidget{
  @override
  _RotationTransitionRouteState createState() {
    // TODO: implement createState
    return _RotationTransitionRouteState();
  }
}

class _RotationTransitionRouteState extends State<RotationTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('RatationTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(curve: Curves.easeIn, parent: _controller)),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.red,
                margin: EdgeInsets.all(100.0),
              ),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

七、ScaleTransition

缩放动画。

import 'package:flutter/material.dart';

class ScaleTransitionRoute extends StatefulWidget{
  @override
  _ScaleTransitionRouteState createState() {
    // TODO: implement createState
    return _ScaleTransitionRouteState();
  }
}

class _ScaleTransitionRouteState extends State<ScaleTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ScaleTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            ScaleTransition(
              scale: Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation(curve: Curves.bounceIn, parent: _controller)),
              child: Container(
                constraints: BoxConstraints.tight(Size(300, 300)),
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 30.0),
              ),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      )
    );
  }
}

八、SlideTransition

偏移动画，偏移量为相对于本身的百分比。

import 'package:flutter/material.dart';

class SlideTransitionRoute extends StatefulWidget{
  @override
  _SlideTransitionRouteState createState() {
    // TODO: implement createState
    return _SlideTransitionRouteState();
  }
}

class _SlideTransitionRouteState extends State<SlideTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  }
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SlideTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 500,
              width: double.infinity,
              alignment: Alignment.center,
              child: SlideTransition(
                position: Tween(begin: Offset(0, 0),end: Offset(1.5,0)).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
                child: Container(
                  constraints: BoxConstraints.tight(Size(300,300)),
                  color: Colors.red,
                ),
              ),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

九、AlignTransition

对齐方式动画。

import 'package:flutter/material.dart';

class AlignTransitionRoute extends StatefulWidget{
  @override
  _AlignTransitionRouteState createState() {
    // TODO: implement createState
    return _AlignTransitionRouteState();
  }
}

class _AlignTransitionRouteState extends State<AlignTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AlignTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 500,
              color: Colors.blue,
              child: AlignTransition(
                alignment: Tween(begin: Alignment(-1, -1), end: Alignment(1,1)).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
                child: Container(
                  constraints: BoxConstraints.tight(Size(200,200)),
                  color: Colors.red,
                ),
              ),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

十、SizeTransition

尺寸缩放。

import 'package:flutter/material.dart';

class SizeTransitionRoute extends StatefulWidget{
  @override
  _SizeTransitionRouteState createState() {
    // TODO: implement createState
    return _SizeTransitionRouteState();
  }
}

class _SizeTransitionRouteState extends State<SizeTransitionRoute> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  bool _animate = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SizeTransition'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 500,
              child: SizeTransition(
                axis: Axis.horizontal,
                sizeFactor: Tween(begin: 1.0, end: 0.5).animate(CurvedAnimation(curve: Curves.easeInOut, parent: _controller)),
                child: Container(
                  constraints: BoxConstraints.tight(Size(300, 300)),
                  color: Colors.red,
                ),
              ),
            ),
            RaisedButton(
              child: Text('start aniamte'),
              onPressed: () {
                _animate ? _controller.reverse() : _controller.forward();
                setState(() {
                  _animate = !_animate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

十一、AnimatedDefaultTextStyle

文本样式切换动画。

import 'package:flutter/material.dart';

class AnimatedDefaultTextStyleRoute extends StatefulWidget{
  @override
  _AnimatedDefaultTextStyleRouteState createState() {
    // TODO: implement createState
    return _AnimatedDefaultTextStyleRouteState();
  }
}

class _AnimatedDefaultTextStyleRouteState extends State<AnimatedDefaultTextStyleRoute> {
  double _fontSize = 10.0;
  Color _color = Colors.red;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedDefaultTextStyle'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedDefaultTextStyle(
              child: Container(
                constraints: BoxConstraints.tight(Size(300,300)),
                alignment: Alignment.center,
                child: Text(
                    'AnimatedDefaultTextStyle'
                ),
              ),
              style: TextStyle(
                fontSize: _fontSize,
                color: _color
              ),
              duration: Duration(seconds: 1),
              curve: Curves.easeIn,
            ),
            FlatButton(
              child: Text('start animate'),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                setState(() {
                  _fontSize = (_fontSize == 20.0 ? 10.0 : 20.0);
                  _color = (_color == Colors.blue ? Colors.red : Colors.blue);
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

十二、AnimatedOpacity

Opacity的动画版本，在给定的透明度变化时，自动地在给定的一段时间内改变孩子的Opacity。

import 'package:flutter/material.dart';

class  AnimatedOpacityRoute extends StatefulWidget{
  @override
  _AnimatedOpacityRouteState createState() {
    // TODO: implement createState
    return _AnimatedOpacityRouteState();
  }
}

class _AnimatedOpacityRouteState extends State<AnimatedOpacityRoute> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedOpacity'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedOpacity(
              child: Container(
                constraints: BoxConstraints.tight(Size(300,300)),
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 30.0),
              ),
              opacity: _opacity,
              curve: Curves.easeOutSine,
              duration: Duration(seconds: 1),
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: () {
                setState(() {
                  _opacity = (_opacity == 1.0 ? 0.0 : 1.0);
                });
              },
            )
          ],
        ),
      )
    );
  }
}

十三、AnimatedPhysicalModel

PhysicalModel的动画版。

import 'package:flutter/material.dart';

class AnimatedPhysicalModelRoute extends StatefulWidget{
  @override
  _AnimatedPhysicalModelRouteState createState() {
    // TODO: implement createState
    return _AnimatedPhysicalModelRouteState();
  }
}

class _AnimatedPhysicalModelRouteState extends State<AnimatedPhysicalModelRoute>{
  BorderRadius _radius = BorderRadius.circular(10.0);
  Color _color = Colors.red;
  bool _animate = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('PhysicalModel'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedPhysicalModel(child:
                Container(
                  constraints: BoxConstraints.tight(Size(300, 300)),
                ),
                shape: BoxShape.rectangle,
                borderRadius: _radius,
                elevation: 4.0,
                color: _color,
                shadowColor: _color,
                duration: Duration(seconds: 1)
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: (){
                setState(() {
                  _animate = !_animate;
                  _radius = (_animate ? BorderRadius.circular(300.0) : BorderRadius.circular(10.0));
                  _color = (_animate ? Colors.blue : Colors.red);
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

十四、AnimatedPositioned

Positioned的动画版，每当给定位置的变化，自动在给定的时间内转换孩子的位置。

import 'package:flutter/material.dart';
import 'dart:ui';
class AnimatedPositionedRoute extends StatefulWidget {
  @override
  _AnimatedPositionedRouteState createState() {
    // TODO: implement createState
    return _AnimatedPositionedRouteState();
  }
}

class _AnimatedPositionedRouteState extends State<AnimatedPositionedRoute> {
  GlobalKey _key = GlobalKey();
  double _top = 0;
  double _left = 0;
  bool _animate = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        key: _key,
        title: Text('AnimatedPositioned'),
      ),
      body: Container(
        child: Stack(
          children: <Widget>[
            AnimatedPositioned(
                top: _top,
                left: _left,
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                ),
                curve: Curves.bounceOut,
                duration: Duration(seconds: 1)
            ),
            Center(
              child: RaisedButton(
                child: Text('start animate'),
                onPressed: () {
                  setState(() {
                    _animate = !_animate;
                    if (_animate) {
                      _left = MediaQuery.of(context).size.width - 200;
                      _top = MediaQuery.of(context).size.height - 200 - _key.currentContext.size.height;
                    } else {
                      _left = 0;
                      _top = 0;
                    }
                  });
                },
              ),
            )
          ],
        ),
      )
    );
  }
}

十五、AnimatedSize

当给定的孩子的大小变化时，它自动地在给定时间内转换它的大小。

import 'package:flutter/material.dart';

class AnimatedSizeRoute extends StatefulWidget{
  @override
  _AnimatedSizeRouteState createState() {
    // TODO: implement createState
    return _AnimatedSizeRouteState();
  }
}

class _AnimatedSizeRouteState extends State<AnimatedSizeRoute> with SingleTickerProviderStateMixin{
  double _size = 100.0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSize'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            AnimatedSize(
              child: Container(
                height: _size,
                width: _size,
                color: Colors.red,
              ),
              curve: Curves.bounceOut,
              duration: Duration(seconds: 1),
              vsync: this,
            ),
            RaisedButton(
              child: Text('start animate'),
              onPressed: (){
                setState(() {
                  _size = (_size == 100.0 ? 300.0 : 100.0);
                });
              },
            )
          ],
        ),
      ),
    );
  }
}