Flutter 动画

字体放大效果-补间动画

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "字体放大动画",
      home: FontAnimation(),
    ));

class FontAnimation extends StatefulWidget {
  _FontAnimation createState() => _FontAnimation();
}

class _FontAnimation extends State<FontAnimation>
    with SingleTickerProviderStateMixin {
  @override
  //补间动画
  Animation<double> tween;

  //动画控制对象
  AnimationController controller;

  /*初始化状态*/
  initState() {
    super.initState();
    /*
    * Duration 动画时间
    * vsync:防止动画离屏之后继续消耗资源
    * */
    controller = AnimationController(
        duration: const Duration(microseconds: 9000000), vsync: this);

    tween = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          print(tween.value);
        });
      });
    controller.forward(); //执行动画
  }

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('字体放大动画'),
      ),

      //添加手势组件
      body: GestureDetector(
        onTap: () {},
        child: Center(
          child: Text(
            '字体放大特效',
            style: TextStyle(fontSize: 60 * controller.value),
          ),
        ),
      ),

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          startAnimation();
        },
        backgroundColor: Colors.red,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  startAnimation() {
    setState(() {
      controller.forward(from: 0.0);
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    //控制器销毁对象
    controller.dispose();

    super.dispose();
  }
}

缓动动画

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

void main() => runApp(MaterialApp(
      title: "缓动动画",
      home: EasingAnimation(),
    ));

class EasingAnimation extends StatefulWidget {
  _EasingAnimation createState() => _EasingAnimation();
}

class _EasingAnimation extends State<EasingAnimation>
    with TickerProviderStateMixin {
  @override
  //补间动画
  Animation _animation;

  //动画控制对象
  AnimationController _controller;

  /*初始化状态*/
  initState() {
    super.initState();
    /*
    * Duration 动画时间
    * vsync:防止动画离屏之后继续消耗资源
    * */
    _controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);

    _animation = Tween(begin: 0.0, end: 0.5).animate(

        //非线性动画
        CurvedAnimation(
      parent: _controller,
      //缓动动画,决定了运动的轨迹,快出慢进
      curve: Curves.fastOutSlowIn,
    ))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          //移除状态监听
          _animation.removeStatusListener((status) {});
          //动画重置
          _controller.reset();
          //再次创建补间对象,从0-到1进行估值

          _animation = Tween(begin: 0.0, end: 0.5).animate(
              CurvedAnimation(parent: _controller, curve: Curves.fastLinearToSlowEaseIn))
            ..addStatusListener((status) {
              if (status == AnimationStatus.completed) {}
            });

          //执行动画
          _controller.forward();
        }
      });

    //执行动画
    _controller.forward();
  }

  Widget build(BuildContext context) {
    //计算当前页面宽度
    final double width = MediaQuery.of(context).size.width;

    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('缓动动画'),
        ),

        //添加手势组件
        body: AnimatedBuilder(
          //动画控制器
          animation: _controller,
          builder: (context, child) {
            return Transform(
              transform:
                  Matrix4.translationValues(_animation.value * width, 0.0, 0.0),
              child: Center(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.greenAccent,
                ),
              ),
            );
          },
        ));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    //控制器销毁对象
    _controller.dispose();

    super.dispose();
  }
}

3.遮罩动画

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

void main() => runApp(MaterialApp(
      title: "遮罩动画",
      home: MaskAnimation(),
    ));

//遮罩动画
class MaskAnimation extends StatefulWidget {
  @override
  _MaskAnimation createState() => _MaskAnimation();
}

class _MaskAnimation extends State<MaskAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;

  //容器宽高值补间对象
  Animation<double> transitionTween;

  //容器边框弧度补间对象
  Animation<BorderRadius> borderRadius;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _controller =
        AnimationController(duration: Duration(seconds: 10), vsync: this)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              print("动画完成喽");
            }
          });

    //补间对象
    transitionTween = Tween<double>(begin: 50.0, end: 200.0)
        .animate(CurvedAnimation(parent: _controller, curve: Curves.ease));

    borderRadius = BorderRadiusTween(
      begin: BorderRadius.circular(75.0),
      end: BorderRadius.circular(0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.ease,
    ));

    //执行动画
//    _controller.forward();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('遮罩动画'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              _controller.forward();
            },
          ),
          body: Center(
            //使用组件
            child: Stack(
              children: <Widget>[
                Center(
                  child: Container(
                    width: 200,
                    height: 200,
                    color: Colors.lightGreen,
                  ),
                ),
                Center(
                  child: Container(
//                alignment: Alignment.bottomCenter,
                    width: transitionTween.value,
                    height: transitionTween.value,
                    decoration: BoxDecoration(
                      color: Colors.black26,
                      borderRadius: borderRadius.value,
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

4.数字动画

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

void main() => runApp(MaterialApp(
      title: "数字动画",
      home: ValueAnimation(),
    ));

//遮罩动画
class ValueAnimation extends StatefulWidget {
  @override
  _ValueAnimation createState() => _ValueAnimation();
}

class _ValueAnimation extends State<ValueAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;

  //容器宽高值补间对象
  Animation _animation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _controller =
        AnimationController(duration: Duration(seconds: 10), vsync: this)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              print("动画完成喽");
            }
          });

    //补间动画-IntTween
    final Animation curve =
        CurvedAnimation(parent: _controller, curve: Curves.easeInOut);

    _animation = IntTween(begin: 0, end: 30).animate(curve)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          //当动画完成后,执行翻转动画,如0-10,10-1

          _controller.reverse();
        }
      });

    //执行动画
//    _controller.forward();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('数字变化'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              _controller.forward();
            },
          ),
          body: Center(
            child: Text(
              _animation.value.toString(),
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      },
    );
  }
}

5.图表动画

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

void main() => runApp(MaterialApp(
      title: "图标动画",
      home: ChartsAnimation(),
    ));

class ChartsAnimation extends StatefulWidget {
  @override
  _ChartsAnimation createState() => _ChartsAnimation();
}

class _ChartsAnimation extends State<ChartsAnimation> {
  //定义图标高度
  var height = 100.0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('图标动画'),
      ),
      body: Center(
        child: Container(
          height: 400,
          alignment: AlignmentDirectional.bottomStart,
          child: InkWell(
            onTap: () {
              setState(() {
                height = 320;
              });
            },
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                AnimatedContainer(
                  //动画时长
                  duration: Duration(seconds: 1),
                  width: 40,
                  height: height - 40,
                  color: Colors.red,
                ),
                AnimatedContainer(
                  //动画时长
                  margin: EdgeInsets.only(left: 10),
                  duration: Duration(seconds: 1),
                  width: 40,
                  height: height - 10,
                  color: Colors.orange,
                ),
                AnimatedContainer(
                  //动画时长
                  margin: EdgeInsets.only(left: 10),
                  duration: Duration(seconds: 1),
                  width: 40,
                  height: height - 50,
                  color: Colors.greenAccent,
                ),
                AnimatedContainer(
                  //动画时长
                  margin: EdgeInsets.only(left: 10),
                  duration: Duration(seconds: 1),
                  width: 40,
                  height: height - 20,
                  color: Colors.yellow,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}