要实现这样一套组合动画,您可以使用AnimatedBuilder
和AnimationController
结合使用,并结合TweenSequence
来定义不同的阶段动画。
以下是一个示例代码,展示如何实现所描述的组合动画效果:
late AnimationController _controller; late Animation<double> _animationSize; late Animation<Offset> _animationPosition; late Animation<double> _animationOpacity; @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(seconds: 4), ); final Animatable<double> sizeTween = Tween<double>(begin: 0.0, end: 1.0); final Animatable<Offset> positionTween = Tween<Offset>( begin: Offset.zero, end: const Offset(200.0, 100.0), ); final Animatable<double> opacityTween = Tween<double>(begin: 1.0, end: 0.0); final Animation<double> sizeCurve = _controller.drive( CurveTween(curve: Interval(0.0, 0.5, curve: Curves.easeInOut)), ); final Animation<Offset> positionCurve = _controller.drive( CurveTween(curve: Interval(0.5, 0.75, curve: Curves.easeInOut)), ); final Animation<double> opacityCurve = _controller.drive( CurveTween(curve: Interval(0.75, 1.0, curve: Curves.easeInOut)), ); _animationSize = sizeTween.animate(sizeCurve); _animationPosition = positionTween.animate(positionCurve); _animationOpacity = opacityTween.animate(opacityCurve); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: AnimatedBuilder( animation: _controller, builder: (context, child) { return Stack( alignment: Alignment.center, children: [ Positioned( top: MediaQuery.of(context).size.height / 2 - imageSize / 2, left: MediaQuery.of(context).size.width / 2 - imageSize / 2, child: Opacity( opacity: _animationOpacity.value, child: Transform.scale( scale: _animationSize.value, child: Transform.translate( offset: _animationPosition.value, child: Container( width: imageSize, height: imageSize, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/your_image.png'), fit: BoxFit.cover, ), ), ), ), ), ), ), ], ); }, ), ); }
在上述示例中,我们首先定义了三个不同阶段的动画:sizeTween(大小变化)、positionTween(位置移动)和opacityTween(透明度变化)。然后,通过
Interval
将各个阶段动画与特定时间范围绑定,并使用CurveTween
将每个动画与相应的曲线进行连接。在
builder
回调中,我们根据每个动画的值来更新图片的尺寸、位置和透明度。通过嵌套使用Transform.scale
和Transform.translate
实现缩放和平移效果,并使用Opacity
小部件控制透明度变化。请将示例代码中的
'assets/images/your_image.png'
替换为您实际使用的图像路径,并根据需要调整代码中的图片尺寸等参数。