Flutter小球弹跳动画

举报
IT编程技术学习栈 发表于 2023/04/14 11:19:23 2023/04/14
【摘要】 Flutter 的动画系统可以帮助开发者实现生动的游戏效果,例如物理效果、平移动画、旋转动画等等。以下是一个使用 Flutter 动画系统实现小球弹跳的示例代码:import 'package:flutter/material.dart';void main() { runApp(MaterialApp( home: Scaffold(body: GameWidget()), ))...

Flutter 的动画系统可以帮助开发者实现生动的游戏效果,例如物理效果、平移动画、旋转动画等等。以下是一个使用 Flutter 动画系统实现小球弹跳的示例代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(body: GameWidget()),
  ));
}

class GameWidget extends StatefulWidget {
  @override
  _GameWidgetState createState() => _GameWidgetState();
}

class _GameWidgetState extends State<GameWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    animation = Tween<double>(begin: 0, end: 200).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return CustomPaint(
          painter: BallPainter(animation.value),
        );
      },
    );
  }
}

class BallPainter extends CustomPainter {
  final double height;

  BallPainter(this.height);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blue;
    final ballSize = 50.0;
    final ballPosition = Offset(0, size.height - height - ballSize / 2);
    canvas.drawCircle(ballPosition, ballSize / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    final oldPainter = oldDelegate as BallPainter;
    return oldPainter.height != height;
  }
}

以上代码演示了一个通过 Flutter 动画系统实现小球弹跳效果的示例。在该示例中,使用 AnimationController 控制动画时间和方向,并使用 Tween 定义动画范围。在 AnimatedBuilder 中使用 CustomPaint 绘制小球位置。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。