flutter动画

动画

效果图：

1553662782051.gif

flutter中，动画可以当成一个时间内对应值的变化刷新Widget来达到动画的效果类似Android的AnimationValue，需要继承StatefulWidget来使用，在初始化方法中创建动画控制器,在initState中初始化动画控制器

AnimationController _controller;
   _controller = AnimationController(
      vsync: this, //
      lowerBound: 0.0, ///初始值
      upperBound: 1.0, ///结束值
      duration: Duration(seconds: 3),

添加动画监听

_controller
      ..addStatusListener((anim) {
        print(anim.toString());
      })
      ..addListener(() {
        setState(() {});
      });
_controller.forward();//启动动画

赋值

color: Colors.blue,
width: _controller.value*300,//上面是0.0-1.0 此处*300
height: _controller.value*300,

但是这样刷新是整个见面都刷新，这跟我们要求的有些出入，我们要求只是单个widget刷新，这是我们可以把需要执行的动画widget剥离出来写成一个单独的widget也可以借助flutter sdk内置的一个类AnimatedBuilder()来实现动画
如果是颜色变化的话可以借助

    ColorTween color =
    ColorTween(begin: Colors.blue, end: Colors.red);
    animate = color.animate(_controller);

AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return Container(
                  child: Text(
                    "动画",
                  ),
                  color: animate.value,
                  width: animation.value * 300,
                  height: animation.value * 300,
                );
              }),

如果类中有Controller的对象在销毁的时候需要调用dispose方法

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

下面是全部代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> animate;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, //
      lowerBound: 0.0, ///初始值
      upperBound: 1.0, ///结束值
      duration: Duration(seconds: 3),
    );
    _controller
      ..addStatusListener((anim) {
        print(anim.toString());
      })
      ..addListener(() {
        setState(() {});
      });
    ColorTween color =
    ColorTween(begin: Colors.blue, end: Colors.red);
    animate = color.animate(_controller);
    _controller.forward();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          child: Center(
            child: Text("动画"),
          ),
          color: animate.value,
          width: _controller.value*300,
          height: _controller.value*300,
        ),
      ),
    );
  }
}

```![1553662782051.gif](https://img.haomeiwen.com/i14297452/55dd4e351e92d13f.gif?imageMogr2/auto-orient/strip)