flutter - 为什么我的 Flutter 动画复选标记不起作用？

Question

我正在尝试复制 the following来自 dribble.com 的动画:

我已经让 ScaleTransition 工作，但 SizeTransition 没有。我做错了什么或我不明白什么？

当我仅将 SizeTransition 换成 FadeTransition(并保留相同的 Controller 和动画)时，两个动画都会运行。当我将 Center 小部件从 SizeTransition 的子级移动到父级时，动画将运行。但是它没有正确居中。

import 'package:flutter/material.dart';

class AnimatedCheck extends StatefulWidget {
  @override
  _AnimatedCheckState createState() => _AnimatedCheckState();
}

class _AnimatedCheckState extends State<AnimatedCheck> with TickerProviderStateMixin {
  late AnimationController scaleController = AnimationController(duration: const Duration(milliseconds: 800), vsync: this);
  late Animation<double> scaleAnimation = CurvedAnimation(parent: scaleController, curve: Curves.elasticOut);
  late AnimationController checkController = AnimationController(duration: const Duration(milliseconds: 400), vsync: this);
  late Animation<double> checkAnimation = CurvedAnimation(parent: checkController, curve: Curves.linear);

  @override
  void initState() {
    super.initState();
    scaleController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        checkController.forward();
      }
    });
    scaleController.forward();
  }

  @override
  void dispose() {
    scaleController.dispose();
    checkController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double circleSize = 140;
    double iconSize = 108;

    return ScaleTransition(
      scale: scaleAnimation,
      child: Container(
        height: circleSize,
        width: circleSize,
        decoration: BoxDecoration(
          color: Colors.green,
          shape: BoxShape.circle,
        ),
        child: SizeTransition(
          sizeFactor: checkAnimation,
          axis: Axis.horizontal,
          axisAlignment: -1,
          child: Center(
            child: Icon(Icons.check, color: Colors.white, size: iconSize)
          )
        ),
      ),
    );
  }
}

Answer 1

当您将 Center 移到外面时，它不会将它的 child 的 child 居中，只是将它的 child 放在它占据的区域的中心。尝试使用 Container 内部的 alignment: Alignment.center, 设置 Container 对齐方式。如果它不起作用，请告诉我，我将复制代码以找出问题所在。

编辑:这是因为您看到的视觉检查周围有空间，SizeTransition 不知道这一点，所以它从 Icon 的边缘开始动画，这导致你看到的视觉错误。我建议您使用像 Rive (rive.app) 这样的工具来完成您想要的，或者，您可以使用另一个动画或使用一些笨拙的解决方法，例如在发生大小转换时为位置设置动画，使其看起来居中。