Flutter Widget 之 FadeTransition

Flutter有一个强大的动画引擎，可以为您的Flutter应用程序添加动作和效果

但有的时候，你只需要做一些简单的事情，比如淡入一个WIdget，而Flutter可以帮你做到

Flutter有很多的专场准备放入你的Flurrer应用程序

FadeTransition允许你淡入淡出一个Widget

它需要一个child和一个animation

FadeTransition(
    opacity: animation,
    child: Text(widget.text)
)

但是animation从何而来？

首先，我们创建一个AnimationController来设置持续时间，

final controller = AnimationController(
    vsync: this,
    duration: Duration(second: 2),
);

然后我们创建一个动画——给开始和结束不透明值并通过控制器创建动画

final animation = Tween(
    begin: 0.0,
    end: 1.0
).animate(controller);

最后，我们通过在controller上调用前进来启动动画

controller.forward();

有一个好主意，将FadeTransition包装在StatefulWidget中是个好主意，这样你就可以管理其状态并在完成后进行清理。

import 'package:flutter/material.dart';

class MyFadeIn extends StatefulWidget {  
    final Widget child;  

    MyFadeIn({@required this.child});  

    @override  _MyFadeInState createState() => _MyFadeInState();
}
class _MyFadeInState extends State<MyFadeIn> 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() {    
        super.dispose();    
        _controller.dispose();    
        super.dispose();  
    } 

    @override  Widget build(BuildContext context) {    
        _controller.forward();    
        return FadeTransition(      
            opacity: _animation,      
            child: widget.child,    
        );  
    }
}

如果想了解有关FadeTransition的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址