在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