说明

动画对功能的实现用处并不大，但是对用户体验却是很多时候必不可少的。前端应用动画也是个绕不开得话题，flutter也给我们提供了多种动画实现的方式，下面就具体讨论3种常见的动画：1，淡入淡出效果AnimatedOpacity；2，隐式动画 AnimatedContainer渐变效果；3，物理模拟动画效果。这3种动画基本就可以覆盖大部场景了，这片文章先讲第一种：淡入淡出效果AnimatedOpacity。在实现 UI 设计时，我们经常需要在屏幕上显示或隐藏各种元素。如若这个过程只是让某个元素快速地出现或者消失，用户们肯定不买帐。我们一般会使用不透明动画让元素淡入淡出，以创建出更加流畅的用户体验。这个时候AnimatedOpacity就出场了，下面就开始说说它的使用。

AnimatedOpacity

AnimatedOpacity 小部件需要传入三个参数：
opacity：它的取值范围从 0.0（不可见）到 1.0（完全可见）。
duration：代表这个动画需要持续多长时间。
child：需要进行动画的小部件。在这个例子中就是那个绿色的方框。

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
)

完整示例

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Opacity Demo';
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { 
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: const Icon(Icons.flip),
      ),
    );
  }
}

淡入淡出就说到这，比较简单，就不过多说了，如有遗漏欢迎留言，如有错误欢迎指正，谢谢