Flutter/Dart - 圆形头像中的资产图像颤动

在Flutter中，我们可以轻松地创建具有响应式动画的UI元素。本文将演示如何创建一个圆形头像，在其中添加一个跳动的资产图像。

我们将使用Flutter SDK和Dart语言，该平台支持响应式开发。

资源准备

为了创建此效果，我们需要两个文件：

1. 头像的PNG或JPG图像
2. 资产图像，可用于跳动。

对于头像，您可以在互联网上找到许多高分辨率图像。在Flutter中，您可以将此文件保存在项目的“asset”目录中。

对于跳动的资产图像，您可以使用Flutter的内置动画库来创建。它允许我们轻松创建一系列基于时间的动画效果，如果您需要创建自定义动画，可以使用Flutter的动画API。

创建圆形头像

首先，我们将创建一个圆形头像。 每个Flutter小部件都有属性可以调整其外观和行为。在这里，我们将使用“CircleAvatar”小部件来创建一个圆形图像视图。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('颤动的头像'),
    ),
    body: Center(
      child: CircleAvatar(
        radius: 75,
        backgroundImage: AssetImage('assets/avatar.png'),
      ),
    ),
  );
}

CircleAvatar 小部件有许多属性，例如半径.radius，背景图像.backgroundImage。适当设置这些属性将使我们的头像看起来很棒。

创建跳动的资产图像

现在，我们将为圆形头像添加跳动的资产图像。 我们需要在一个AnimatedContainer中创建一个跳动的容器，并使用一个Tween循环来创建一个无限循环动画。

class ShakyImage extends StatefulWidget {
  @override
  _ShakyImageState createState() => _ShakyImageState();
}

class _ShakyImageState extends State<ShakyImage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 1))
          ..repeat(reverse: true);

    _animation = Tween(begin: 0.0, end: 10.0).animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return Container(
          margin: EdgeInsets.only(top: _animation.value),
          child: Image.asset(
            'assets/shaky.png',
            width: 150,
            height: 150,
          ),
        );
      },
    );
  }
}

在这里，我们创建了一个ShakyImage状态小部件，它继承了SingleTickerProviderStateMixin以生成一个AnimationController。 我们还定义了一个无限反向重复的AnimationController，该动画在1秒钟内从0到10循环。 我们还定义了一个Tween，它控制振幅，以产生颤抖效果。

在build()方法中，我们使用AnimatedBuilder来生成一个基于Animation实例的动画，该动画具有loop()方法，并使用一个容器来包装此动画以产生随时间变化的动态效果。

结合头像和跳动的资产图像

现在，我们将两者结合起来，并在Stack中显示它们，以便我们的跳动资产图像可以在头像上方正确显示。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('颤动的头像'),
    ),
    body: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          CircleAvatar(
            radius: 75,
            backgroundImage: AssetImage('assets/avatar.png'),
          ),
          ShakyImage(),
        ],
      ),
    ),
  );
}

在build()方法中，我们创建一个带有Stack小部件的中央部分小部件，以便我们的头像和资产图像位于屏幕中央。由于Stack大小是动态的，因此我们可以为其添加自适应性。

现在启动应用程序，您的应用程序应该显示一个跳动的资产图像在静态头像上方。通过对此代码进行调整，您可以自由定制头像和资产图像，以实现您的标志性自定义UI元素。