Flutter-实现头像叠加动画效果

在Flutter中，要实现头像叠加动画效果，可以使用Stack来叠加头像，并使用AnimatedPositioned来控制重叠头像的位置以实现动画效果。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StackAvatarAnimation(),
        ),
      ),
    );
  }
}
 
class StackAvatarAnimation extends StatefulWidget {
  @override
  _StackAvatarAnimationState createState() => _StackAvatarAnimationState();
}
 
class _StackAvatarAnimationState extends State<StackAvatarAnimation> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
 
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });
    animation = Tween<double>(begin: 0, end: 1).animate(controller);
    controller.forward();
  }
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        AnimatedPositioned(
          left: 50.0,
          top: 50.0,
          duration: const Duration(milliseconds: 500),
          child: Container(
            width: 100.0,
            height: 100.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: AssetImage('assets/avatar1.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        AnimatedPositioned(
          left: 70.0,
          top: 70.0,
          duration: const Duration(milliseconds: 500),
          child: Container(
            width: 50.0,
            height: 50.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: AssetImage('assets/avatar2.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

在这个例子中，我们使用了AnimatedPositioned小部件来控制重叠头像的动画。AnimationController负责控制动画的进度，通过Tween来计算两个头像位置的动画值。在initState方法中，我们启动了动画并在\`dispose