Flutter实现金币收集动画（类似神庙逃亡金币收集效果）

一、利用Lottie快速实现 #

如果想快速复刻你提到的动画效果，直接用Lottie是最高效的方式：

1. 添加依赖：在pubspec.yaml中引入Lottie包

dependencies:
  flutter:
    sdk: flutter
  lottie: ^3.1.0 # 替换为最新版本

2. 将目标Lottie动画文件（你提到的金币收集动画）下载后放到项目的assets/animations目录，然后在pubspec.yaml中配置资源：

flutter:
  assets:
    - assets/animations/coin_collect.json

3. 编写代码加载并控制动画：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

  @override
  State<CoinCollectAnimation> createState() => _CoinCollectAnimationState();
}

class _CoinCollectAnimationState extends State<CoinCollectAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _playAnimation() {
    _controller.reset();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/animations/coin_collect.json',
              controller: _controller,
              fit: BoxFit.contain,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _playAnimation,
              child: const Text('触发金币收集'),
            ),
          ],
        ),
      ),
    );
  }
}

二、自定义Flutter动画实现 #

如果想完全自定义动画逻辑（比如调整金币轨迹、速度等），可以用Flutter原生动画API：

1. 核心思路：通过AnimationController配合Tween控制金币的位置、缩放、旋转属性，用CurvedAnimation添加自然的缓动效果
2. 示例代码（单个金币从屏幕随机位置飞入目标点）：

import 'package:flutter/material.dart';
import 'dart:math';

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

  @override
  State<CustomCoinAnimation> createState() => _CustomCoinAnimationState();
}

class _CustomCoinAnimationState extends State<CustomCoinAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _positionAnimation;
  late Animation<double> _scaleAnimation;
  late Animation<double> _rotationAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );

    // 位置动画：从随机位置移动到屏幕中心
    _positionAnimation = Tween<Offset>(
      begin: Offset(Random().nextDouble() * 2 - 1, Random().nextDouble() * 2 - 1),
      end: const Offset(0, 0),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOutQuad));

    // 缩放动画：从0.5放大到1.2再缩小到1
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween<double>(begin: 0.5, end: 1.2), weight: 60),
      TweenSequenceItem(tween: Tween<double>(begin: 1.2, end: 1), weight: 40),
    ]).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));

    // 旋转动画：旋转360度
    _rotationAnimation = Tween<double>(begin: 0, end: 2 * pi)
        .animate(CurvedAnimation(parent: _controller, curve: Curves.linear));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _playAnimation() {
    setState(() {
      // 重置位置为新的随机点
      _positionAnimation = Tween<Offset>(
        begin: Offset(Random().nextDouble() * 2 - 1, Random().nextDouble() * 2 - 1),
        end: const Offset(0, 0),
      ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOutQuad));
    });
    _controller.reset();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 用SlideTransition、ScaleTransition、RotationTransition组合动画
            SlideTransition(
              position: _positionAnimation,
              child: ScaleTransition(
                scale: _scaleAnimation,
                child: RotationTransition(
                  turns: _rotationAnimation,
                  child: const Icon(Icons.monetization_on, size: 40, color: Colors.yellow),
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _playAnimation,
              child: const Text('收集金币'),
            ),
          ],
        ),
      ),
    );
  }
}

三、参考资源方向 #

• Flutter官方动画文档：重点学习AnimationController、Tween、CurvedAnimation及各类Transition组件的用法，掌握基础动画逻辑
• GitHub社区示例：搜索关键词“Flutter coin collect animation”，能找到不少开发者分享的自定义金币动画实现片段，可以参考他们的轨迹设计和动画组合方式

内容的提问来源于stack exchange，提问作者Faiz Hashmi