Flutter的菜鸟教程十八:动画-AnimatedWidget简化

本文开始学习Flutter动画

1. 渲染动画
2. AnimatedWidget简化
3. 监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）
4. 用AnimatedBuilder重构
5. 并行动画
   将分为五文来学习

/**
 * 动画实例2- AnimatedWidget简化
 */
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() {
  runApp(new LogoApp());
}

/**
 * AnimatedWidget会自动调用addlistener和setState
 */
class AnimatedLogo extends AnimatedWidget{
  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }

  AnimatedLogo({Key key ,Animation<double> animation}):
        super(key:key,listenable:animation);
}

class LogoApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LogoAppState();
  }
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = new AnimationController(vsync: this,
        duration: const Duration(milliseconds: 2000));
    animation = new Tween(begin: 0.0,end: 300.0).animate(controller);
    controller.forward();
  }

  @override
  build(dynamic ) {
    return new AnimatedLogo(animation: animation);
  }

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

新内容都添加了注释 如果有不明白的地方可以问,也可以参考官方文档

由于不是静态图这里就不给效果图了,请自行脑补，hia hia hia(一种笑声 很难模仿)