Flutter 动态渐现：AnimatedOpacity 助力小姐姐变身

Android

2023-12-17 03:29:25

在 Flutter 的 UI 世界中，我们经常需要元素以动态方式出现或消失。这就是 AnimatedOpacity 动画组件大显身手的地方。它允许我们通过控制透明度值来实现平滑的渐现效果，从而为我们的应用程序增添视觉吸引力和用户交互性。

了解 AnimatedOpacity

AnimatedOpacity 组件是一个接受 Widget 作为子级并将其透明度作为动画进行控制的容器。它包含两个主要属性：

opacity： 指定子级的透明度，范围从 0（完全透明）到 1（完全不透明）。
duration： 定义渐现动画的持续时间。

通过操作这些属性，我们可以创建各种渐现效果，例如：

渐入： 将透明度从 0 逐渐增加到 1，使子级从完全透明变为完全可见。
渐出： 将透明度从 1 逐渐减少到 0，使子级从完全可见逐渐消失。
交叉渐现： 同时控制两个子级的透明度，实现一个子级渐入的同时另一个子级渐出。

一个迷人的小姐姐渐现效果

为了生动地展示 AnimatedOpacity 的威力，让我们创建一个迷人的小姐姐渐现效果。在这个例子中，小姐姐将从清纯风无缝过渡到高冷风，伴随着渐现动画的视觉冲击。

import 'package:flutter/material.dart';

class AnimatedOpacityExample extends StatefulWidget {
  @override
  _AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  bool _isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Image.asset('assets/images/cute_girl.png'),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isVisible = !_isVisible;
            });
          },
          child: Text('变身'),
        ),
      ],
    );
  }
}