如何让小球在Flutter中跳跃起来：一个有趣的动画效果

嗨！这里是甜瓜看代码，今天我们要来聊聊如何使用 Flutter Animation 制作有趣的动画效果。

动画效果

 

  我们的目标是创建一个动画效果，其中一个小球会在屏幕上不停地弹跳。我们将使用 Flutter 的 Animation 和 AnimatedBuilder 组件来实现这个效果。

实现步骤

第一步：创建 Animation 控制器

我们首先需要创建一个 Animation 控制器，它将控制小球的弹跳动画。

AnimationController _animationController; 
复制代码

我们需要在 initState 函数中初始化它，并设置它的持续时间和 Tween 动画对象。

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  )..repeat();
}
复制代码

我们设置了持续时间为 2 秒，并使用了 repeat() 方法使动画无限循环。

第二步：创建 Tween 动画对象

我们需要创建一个 Tween 动画对象来定义小球弹跳的高度。

Tween<double> _tween = Tween<double>( begin: 0, end: 200, ); 
复制代码

在这里，我们设置了起始高度为 0，终止高度为 200。

第三步：创建 Animation 对象

我们需要创建一个 Animation 对象，它将处理动画控制器和 Tween 对象之间的交互。

_animation = _tween.animate(
  CurvedAnimation(
    parent: _animationController!,
    curve: Curves.bounceInOut,
  ),
);
复制代码

我们使用了 CurvedAnimation 对象来使动画具有弹跳效果，而不是线性运动。

第四步：使用 AnimatedBuilder 组件构建动画效果

我们使用 AnimatedBuilder 组件来构建小球的动画效果。

AnimatedBuilder(
  animation: _animationController!,
  builder: (context, child) {
    return Transform.translate(
      offset: Offset(0, -_animation!.value),
      child: Container(
        width: 50,
        height: 50,
        decoration: const BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
      ),
    );
  },
),
复制代码

  我们将小球放在一个容器中，使用 Transform.translate 来控制它的垂直位置。我们还使用 AnimatedBuilder 组件来将 Animation 对象与小球的位置属性连接起来。

第五步：添加交互

我们还可以添加交互效果来使动画更有趣。例如，我们可以在用户点击小球时，使其速度加倍。

GestureDetector(
      onTap: () {
        _animationController?.duration =
            Duration(seconds: 1 ~/ (_animationController!.value * 2));
      },
      child: AnimatedBuilder(
        ...
      ),
    );
复制代码

  在 onTap 事件中，我们使用了 value 属性来获取当前动画的值，并将动画持续时间减半。这将使小球的弹跳速度加倍，使动画效果更加有趣。

完整代码

    import 'package:flutter/material.dart';

class BouncingBall extends StatefulWidget {
  const BouncingBall({super.key});

  @override
  BouncingBallState createState() => BouncingBallState();
}

class BouncingBallState extends State<BouncingBall>
    with SingleTickerProviderStateMixin {
  AnimationController? _animationController;
  final Tween<double> _tween = Tween<double>(
    begin: 0,
    end: 200,
  );
  Animation<double>? _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
    _animation = _tween.animate(
      CurvedAnimation(
        parent: _animationController!,
        curve: Curves.bounceInOut,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _animationController?.duration =
            Duration(seconds: 1 ~/ (_animationController!.value * 2));
      },
      child: AnimatedBuilder(
        animation: _animationController!,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(0, -_animation!.value),
            child: Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _animationController?.dispose();
    super.dispose();
  }
}
复制代码

结论

  在本文中，我们学习了如何使用 Flutter 的 Animation 和 AnimatedBuilder 组件来创建有趣的动画效果。我们实现了一个小球在屏幕上弹跳的动画，并在用户点击小球时使其速度加倍。希望这篇文章对你学习 Flutter 动画有所帮助！如果你还有什么问题或者疑惑，欢迎在评论区留言哦！这里是甜瓜看代码，期待你的关注！

作者：甜瓜看代码
链接：https://juejin.cn/post/7226177081197756474
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。