Flutter19.Animation-color

最新推荐文章于 2024-10-29 00:09:10 发布

augfun

最新推荐文章于 2024-10-29 00:09:10 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/augfun/article/details/106977661

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文通过一个具体的Flutter应用示例，展示了如何使用AnimationController和ColorTween实现颜色渐变动画。该示例详细介绍了AnimationController的初始化、状态监听及生命周期管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ex:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: HomePage(),
));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  Animation<Color> _doubleAnim;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
    AnimationController(vsync: this, duration: const Duration(seconds: 1))..forward();
    _doubleAnim = ColorTween(begin: Colors.red, end: Colors.blue)
        .animate(_animationController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _animationController.forward();
        }
      });
//    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200.0,
          height: 200.0,
          color: _doubleAnim.value,
          child: FlutterLogo(),
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: null),
    );
  }
}

输出：