Flutter

flutter动画FadeTransition

2020-08-14  本文已影响0人  一叠纸船

今天要说的是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来做的,欢迎大家斧正。

上一篇 下一篇

猜你喜欢

热点阅读