Flutter地图动画插件gg_map_animation的使用

gg_map_animation 是一个用于在 Flutter 中实现地图动画的扩展库。它通过为 Animation 类添加 .map(...) 方法，允许开发者将动画值映射到不同的目标值（例如角度）。本文将详细介绍如何使用该插件，并提供完整的示例代码。

Getting Started（开始使用）

要使用 gg_map_animation，首先需要安装该插件。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  gg_map_animation: ^版本号

然后运行 flutter pub get 安装依赖。

基本用法

假设你已经有一个动画实例 animation，可以使用 .map(...) 函数将其值映射到另一个值，例如角度。

final mappedAnimation = animation.map((i) => 2 * pi * i);

上述代码将输入动画值 i 映射为从 0 到 2π 的角度。

示例代码

以下是一个完整的示例，展示如何使用 gg_map_animation 创建一个旋转动画。

示例代码解释

文件结构

example/
├── lib/
│   └── main.dart

示例代码 (main.dart)

// [@license](/user/license)
// Copyright (c) 2019 - 2021 Dr. Gabriel Gatzsche. All Rights Reserved.
//
// Use of this source code is governed by terms that can be
// found in the LICENSE file in the root of this package.

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:gg_map_animation/gg_map_animation.dart'; // 引入 gg_map_animation 插件

// 主程序入口
void main() {
  runApp(MyApp());
}

// 应用程序根组件
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GgMapAnimationExample', // 应用名称
      theme: ThemeData(primarySwatch: Colors.blue), // 主题颜色
      home: GgMapAnimationExample(), // 主页面
    );
  }
}

// 自定义动画示例页面
class GgMapAnimationExample extends StatefulWidget {
  GgMapAnimationExample({Key? key}) : super(key: key);

  [@override](/user/override)
  _GgMapAnimationExampleState createState() => _GgMapAnimationExampleState();
}

// 状态管理类
class _GgMapAnimationExampleState extends State<GgMapAnimationExample>
    with TickerProviderStateMixin {
  // 初始化动画控制器
  late AnimationController _animation;
  late Animation<double> _mappedAnimation;

  [@override](/user/override)
  void initState() {
    super.initState();
    _animation = AnimationController(
      vsync: this, // 绑定到当前状态
      duration: Duration(seconds: 3), // 动画持续时间
    );

    // 将动画值映射为角度（0 到 2π）
    _mappedAnimation = _animation.map((inVal) => 2 * pi * inVal);
  }

  // 按钮点击事件
  void _buttonPressed() {
    if (_animation.status == AnimationStatus.forward ||
        _animation.status == AnimationStatus.completed) {
      _animation.reverse(); // 如果正在播放，则反转动画
    } else {
      _animation.forward(); // 否则开始动画
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GgMapAnimationExample'), // 页面标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 子元素居中对齐
          children: [
            // 使用 AnimatedBuilder 构建旋转动画
            AnimatedBuilder(
              animation: _mappedAnimation, // 使用映射后的动画
              child: Container(
                width: 100, // 容器宽度
                height: 100, // 容器高度
                color: Colors.blue, // 容器颜色
              ),
              builder: (context, child) {
                return Transform.rotate( // 旋转动画
                  angle: _mappedAnimation.value, // 当前动画值
                  child: child, // 被旋转的子组件
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _buttonPressed, // 点击按钮触发动画
        tooltip: 'Go', // 悬停提示
        child: Icon(Icons.rotate_left_outlined), // 图标
      ),
    );
  }
}