2020-10-29

08-AnimatedPositioned

AnimatedPositioned是一个隐式的动画组件，提供动态改变位置的动画组件，用法如下：

var _top = 30.0;
Stack(
      alignment: Alignment.center,
      children: <Widget>[
        AnimatedPositioned(
          top: _top,
          duration: Duration(seconds: 2),
          child: Container(height: 50, width: 50, color: Colors.red),
        )
      ],
    )

flutter动画组件

2020-10-29

07-AnimatedContainer

Flutter中很多用于动画的控件，这篇文章介绍动画控件AnimatedContainer，我们可以通俗的理解AnimatedContainer是带动画功能的Container，关于Container的详细介绍可以查看Flutter Widgets 之 Container，这篇详细介绍了Container的用法。

AnimatedContainer只需要提供动画开始值和结束值，它就会动起来并不需要我们主动调用setState方法。变化AnimatedContainer的宽高实现变大的效果，代码如下：

bool click = false;

@override
Widget build(BuildContext context) {
return Center(
  child: GestureDetector(
    onTap: () {
      setState(() {
        click = !click;
      });
    },
    child: AnimatedContainer(
      height: click ? 200 : 100,
      width: click ? 200 : 100,
      color: Colors.blue,
      duration: Duration(seconds: 3),

    ),
  ),
);
}

flutter动画组件

2020-10-29

06-AnimatedCrossFade

AnimatedCrossFade组件让2个组件在切换时出现交叉渐入的效果，因此AnimatedCrossFade需要设置2个子控件、动画时间和显示第几个子控件，用法如下：

AnimatedCrossFade(
  duration: Duration(seconds: 1),
  crossFadeState:
      _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  firstChild: Container(
    height: 150,
    width: 150,
    alignment: Alignment.center,
    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
    child: Text('first child',style: TextStyle(color: Colors.white),),
  ),
  secondChild: Container(
    height: 150,
    width: 150,
    alignment: Alignment.center,
    decoration:
        BoxDecoration(shape: BoxShape.rectangle, color: Colors.orange,borderRadius:BorderRadius.circular(20)),
    child: Text('second child',style: TextStyle(color: Colors.white),),
  ),
)

_showFirst参数由一个按钮按住，代码如下：

bool _showFirst = true;
RaisedButton(
  child: Text('切换'),
  onPressed: () {
    setState(() {
      _showFirst = !_showFirst;
    });
  },
),

flutter动画组件

2020-10-29

05-AnimatedPadding

AnimatedPadding是一个隐式的动画组件，提供动态改变内边距的动画组件，用法如下：

var _padding = 0.0;
AnimatedPadding(
  padding: EdgeInsets.symmetric(horizontal: _padding),
  duration: Duration(seconds: 2),
  child: Container(color: Colors.red),
)

duration参数是动画执行的时间。如果仅仅是构建这样一个组件是不会有动画效果，需要让padding参数发生变化，点击按钮设置新的_padding值：

RaisedButton(
  onPressed: () {
    setState(() {
      _padding = 50;
    });
  },
)

flutter动画组件

2020-10-29

04-AnimatedAlign

AnimatedAlign组件方便我们构建位置动画

效果：

代码:


class GMExampleAnimatedAlignTest extends StatefulWidget {
  GMExampleAnimatedAlignTest({Key key}) : super(key: key);

  @override
  _GMExampleAnimatedAlignTestState createState() =>
      _GMExampleAnimatedAlignTestState();
}

class _GMExampleAnimatedAlignTestState
    extends State<GMExampleAnimatedAlignTest> {
  var _alignment = Alignment.topLeft;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.lightBlue,
      child: AnimatedAlign(
        alignment: _alignment,
        curve: Curves.bounceInOut,
        duration: Duration(seconds: 2),
        child: IconButton(
          icon: Icon(
            Icons.print,
            color: Colors.red,
            size: 30,
          ),
          onPressed: () {
            setState(() {
              _alignment = Alignment.bottomRight;
            });
          },
        ),
        onEnd: () {
          GMToast.show("动画执行完毕", context);
        },
      ),
    );
  }
}

flutter动画组件

2020-10-29

03-AnimatedOpacity

AnimatedOpacity是一个隐式的动画组件，它可以使子组件变的透明，用法如下：

var _opacity = 1.0;
AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 2),
  child: Container(
    height: 60,
    width: 150,
    color: Colors.blue,
  ),
)

duration参数是动画执行的时间，opacity参数是透明值，值的范围是0.0-1.0。如果仅仅是构建这样一个组件是不会有动画效果，需要让opacity参数发生变化，点击按钮设置新的opacity值：

RaisedButton(
  onPressed: (){
    setState(() {
      _opacity = 0;
    });
  },
)

flutter动画组件

2020-10-29

02-AlignTransition

效果：

代码:

class GMExampleAlignTransitionTest extends StatefulWidget {
  GMExampleAlignTransitionTest({Key key}) : super(key: key);

  @override
  _GMExampleAlignTransitionTestState createState() =>
      _GMExampleAlignTransitionTestState();
}

class _GMExampleAlignTransitionTestState
    extends State<GMExampleAlignTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  Animation<AlignmentGeometry> _animation;

  @override
  void initState() {
    this._animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    this._animation = Tween<AlignmentGeometry>(
            begin: Alignment.topLeft, end: Alignment.bottomRight)
        .animate(this._animationController);

    //开始动画
    this._animationController.forward();

    super.initState();
  }

  @override
  void dispose() {
    this._animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      color: Colors.blue,
      child: AlignTransition(
        alignment: _animation,
        child: Container(
          height: 30,
          width: 30,
          color: Colors.red,
        ),
      ),
    );
  }
}

flutter动画组件

2020-10-29

01-AnimatedBuilder

AnimatedBuilder可以让我们轻松的构建动画控件，下面的案例是让flutter logo图片旋转

效果：

代码如下：

class GMExampleAnimatedBuilderTest extends StatefulWidget {
  GMExampleAnimatedBuilderTest({Key key}) : super(key: key);

  @override
  _GMExampleAnimatedBuilderTestState createState() =>
      _GMExampleAnimatedBuilderTestState();
}

class _GMExampleAnimatedBuilderTestState
    extends State<GMExampleAnimatedBuilderTest> with TickerProviderStateMixin {
  AnimationController animationController;

  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    this.animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);

    this.animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        this.animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        this.animationController.forward();
      }
    });

    this.animation =
        Tween(begin: 0.0, end: 2.0 * math.pi).animate(this.animationController);

    //开始动画
    this.animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext ctx, Widget child) {
        return Transform.rotate(
          angle: animation.value,
          child: child,
        );
      },
      child: FlutterLogo(
        size: 60,
      ),
    );
  }

  @override
  void dispose() {
    this.animationController.dispose();
    super.dispose();
  }
}