flutter动画FadeTransition

今天要说的是flutter fadeIn 和fadeOut的动画的实现，其实就是AnimatedOpacity组件的实现原理。

示例代码如下：

import 'package:flutter/material.dart';

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

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

class _FadeTranstionScreenState extends State<FadeTranstionScreen> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() { 
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2)
    );

    _animation = Tween(
      begin: 0.0,
      end: 1.0
    ).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return Scaffold(
      appBar: AppBar(title: Text("FadeTranstion")),
      body: Container(
        alignment: Alignment.center,
        child: FadeTransition(
          opacity: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

效果动画如图所示：

fade-transition.gif

FadeTransition可设置的属性示例基本已经完全展示了（alwaysIncludeSemantics在这一篇有介绍）。

首先要注意的是class需要混合（Mixin）SingleTickerProviderStateMixin，因为AnimationController需要调用TickerProvider里的createTicker方法（感兴趣可以查看flutter源码）。

其次，Animation需要定义开始和结束对应的值。并且在build方法里手动开始动画

最后，在dispose的生命周期里，AnimationController对象要调用dispose方法，以免造成内存泄漏。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。