Flutter小球弹跳动画

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

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 绘制小球位置。

相关文章
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
122 5
|
1月前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
80 1
|
2月前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
2月前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表,示例代码展示了如何添加、删除列表项,并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例,演示了如何在Flutter中管理组件的状态。
|
4月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
109 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
5月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
77 0
|
5月前
Flutter-加载中动画
Flutter-加载中动画
46 0
|
5月前
Flutter-自定义表情雨下落动画
Flutter-自定义表情雨下落动画
43 0
|
5月前
Flutter-数字切换动画
Flutter-数字切换动画
38 0
|
5月前
|
开发者
Flutter 动画学习
Flutter 动画学习