Flutter 显式动画 FadeTransition 源代码

Flutter动画：FadeTransition实例演示

最新推荐文章于 2025-06-10 14:17:01 发布

原创最新推荐文章于 2025-06-10 14:17:01 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#源代码 #Flutter 显式动画 #FadeTransition #Flutter 源代码

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍了如何使用Flutter中的FadeTransition组件创建淡入淡出效果，通过实例代码展示了如何控制元素的透明度变化。适合初学者理解动画过渡在Flutter应用中的使用。

直接上源代码，直观可运行

import 'package:flutter/material.dart';

class FadeTransitionDemo extends StatefulWidget {
  const FadeTransitionDemo({Key? key}) : super(key: key);

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

class _FadeTransitionDemoState extends State<FadeTransitionDemo>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
      ),
    );
  }
}