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

要实现这样一套组合动画,您可以使用AnimatedBuilderAnimationController结合使用,并结合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.scaleTransform.translate实现缩放和平移效果,并使用Opacity小部件控制透明度变化。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A HandSome Man

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值