AnimatedOpacity

用于实现透明度动画的组件

AnimatedOpacity是Flutter中用于实现透明度动画的组件，它继承自ImplicitlyAnimatedWidget，能够平滑地过渡到目标透明度值。其主要用途是通过改变子组件的透明度(opacity属性)来创建淡入、淡出或渐变效果，而无需手动管理动画控制器。核心逻辑基于隐式动画机制: 当opacity值发生变化时，组件自动在指定时间内完成动画过渡。

使用场景:

页面切换: 在路由切换时淡入新页面或淡出旧页面。
交互反馈: 用户点击按钮后，通过透明度变化提示操作成功或加载状态。
动态UI: 列表项删除时的淡出动画，或条件显示组件时的平滑过渡。

示例

基础淡入效果

import 'package:flutter/material.dart';

class SimpleFadeDemo extends StatefulWidget {
  @override
  _SimpleFadeDemoState createState() => _SimpleFadeDemoState();
}

class _SimpleFadeDemoState extends State<SimpleFadeDemo> {
  double _opacity = 0.0; // 初始透明度为0（完全透明）

  void _toggleOpacity() {
    setState(() {
      _opacity = _opacity == 0.0 ? 1.0 : 0.0; // 切换透明度值
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              opacity: _opacity,
              duration: Duration(seconds: 1), // 动画时长1秒
              child: Text(
                'Hello Flutter!',
                style: TextStyle(fontSize: 24),
              ),
            ),
            ElevatedButton(
              onPressed: _toggleOpacity,
              child: Text('切换显示'),
            ),
          ],
        ),
      ),
    );
  }
}

结合交互的加载状态

AnimatedOpacity(
  opacity: _isLoading ? 1.0 : 0.0, // 加载时显示，否则隐藏
  duration: Duration(milliseconds: 500),
  child: CircularProgressIndicator(), // 加载动画组件
);

适配主题的淡出删除

AnimatedOpacity(
  opacity: _isDeleted ? 0.0 : 1.0, // 删除时透明度变为0
  duration: Duration(seconds: 2),
  curve: Curves.easeInOut, // 使用缓动曲线使动画更自然
  child: ListTile(
    title: Text('可删除项'),
    tileColor: Theme.of(context).cardColor,
  ),
);

注意点

性能优化：

避免在频繁重建的组件(如ListView.builder的项)中直接使用AnimatedOpacity，可能导致不必要的动画重启。建议对静态内容使用，或通过Key控制动画触发。
若需高性能动画（如游戏），考虑使用 AnimationController 显式管理动画。

兼容性警告：

在旧版Flutter(<1.12)中，AnimatedOpacity可能需配合RepaintBoundary避免重绘整个子树。当前版本已优化，但复杂UI中仍需测试性能。

最佳实践：

始终设置duration参数，避免默认值(0)导致无动画效果。
使用curve属性(如Curves.easeIn)让动画更符合交互逻辑。
通过onEnd回调监听动画完成事件，用于触发后续操作(如页面跳转)。

构造函数

AnimatedOpacity({
  Key? key,
  required this.opacity,        // 必需参数：目标透明度值（0.0-1.0）
  this.duration = const Duration(milliseconds: 200), // 动画时长，默认200ms
  this.curve = Curves.linear,   // 动画曲线，默认线性
  this.onEnd,                   // 可选回调：动画结束时触发
  this.alwaysIncludeSemantics = false, // 是否始终包含语义信息（用于无障碍）
  required Widget child,        // 必需参数：要应用动画的子组件
})

属性

属性名	属性类型	说明
`opacity`	`double`	必需。透明度值，范围0.0（完全透明）到1.0（完全不透明）。
`duration`	`Duration`	动画持续时间，默认200毫秒。
`curve`	`Curve`	动画速度曲线（如 `Curves.easeIn`），默认线性。
`onEnd`	`VoidCallback`	动画结束时的回调函数，可选。
`alwaysIncludeSemantics`	`bool`	若为true，即使透明度为0也保留语义标签（用于屏幕阅读器），默认false。
`child`	`Widget`	必需。要应用透明度动画的子组件。

关键属性详解:

opacity: 这是核心属性，其变化触发动画。注意：若值未改变(如从1.0到1.0)，动画不会执行。需通过setState更新值以启动动画。
duration: 动画时长直接影响用户体验。短时长(如200ms)适合微交互，长时长(如2秒)适合醒目过渡。避免设为0，否则失去动画效果。
curve: 使用非线性的曲线(如Curves.elasticOut)可增加动画生动性，但需确保符合应用整体交互风格。

AnimatedModalBarrier

AnimatedPhysicalModel