flutter 要实现一套组合动画,效果实现如下:图片先从屏幕中间由小变大出现,出现后停留1秒,然后移动到指定的位置,然后在移动过后的位置在进行缩小的动画直到消失

要实现这样一套组合动画,您可以使用AnimatedBuilderAnimationController结合使用,并结合TweenSequence来定义不同的阶段动画。

以下是一个示例代码,展示如何实现所描述的组合动画效果:

late AnimationController _controller;
late Animation _animationSize;
late Animation _animationPosition;
late Animation _animationOpacity;

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

  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 4),
  );

  final Animatable sizeTween = Tween(begin: 0.0, end: 1.0);
  final Animatable positionTween = Tween(
    begin: Offset.zero,
    end: const Offset(200.0, 100.0),
  );
  final Animatable opacityTween = Tween(begin: 1.0, end: 0.0);

  final Animation sizeCurve = _controller.drive(
    CurveTween(curve: Interval(0.0, 0.5, curve: Curves.easeInOut)),
  );
  final Animation positionCurve = _controller.drive(
    CurveTween(curve: Interval(0.5, 0.75, curve: Curves.easeInOut)),
  );
  final Animation 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.scaleTransform.translate实现缩放和平移效果,并使用Opacity小部件控制透明度变化。

请将示例代码中的 'assets/images/your_image.png' 替换为您实际使用的图像路径,并根据需要调整代码中的图片尺寸等参数。

你可能感兴趣的:(1024程序员节)