Flutter动画标记插件flutter_animarker的使用

flutter_animarker 是一个用于在 Google Maps 中平滑移动 Marker 的 Flutter 插件。它提供了多种功能，如多点线性动画、旋转、波纹效果等。

主要特性

• Marker 位置动画
• 支持同时多个 Marker 动画
• 空安全兼容
• 波纹效果
• 标记旋转或方向
• 多点线性动画（分段线性近似算法）
• 支持动画曲线和持续时间
• 基于 Widget 的自定义行为
• 动画预热以提高性能
• 提供有用的 LocationTween, AngleTween 和 PolynomialLocationInterpolator

注意事项

该插件仅用于动画 Marker 的位置变化，地理定位和 Google Maps 配置不在插件范围内，请确保您已经在地图上放置了 Marker 或获取了位置更新。

示例代码

简单 Marker 动画示例

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_animarker/flutter_map_marker_animation.dart';

// 设置虚拟值
const kStartPosition = LatLng(18.488213, -69.959186);
const kSantoDomingo = CameraPosition(target: kStartPosition, zoom: 15);
const kMarkerId = MarkerId('MarkerId1');
const kDuration = Duration(seconds: 2);
const kLocations = [
  kStartPosition,
  LatLng(18.488101, -69.957995),
  LatLng(18.489210, -69.952459),
  LatLng(18.487307, -69.952759),
];

class SimpleMarkerAnimationExample extends StatefulWidget {
  @override
  SimpleMarkerAnimationExampleState createState() => SimpleMarkerAnimationExampleState();
}

class SimpleMarkerAnimationExampleState extends State<SimpleMarkerAnimationExample> {
  final markers = <MarkerId, Marker>{};
  final controller = Completer<GoogleMapController>();
  final stream = Stream.periodic(kDuration, (count) => kLocations[count]).take(kLocations.length);

  @override
  void initState() {
    super.initState();
    stream.forEach((value) => newLocationUpdate(value));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Markers Animation Example',
      home: Animarker(
        curve: Curves.ease,
        mapId: controller.future.then<int>((value) => value.mapId), // 获取 Google Map Id
        markers: markers.values.toSet(),
        child: GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: kSantoDomingo,
          onMapCreated: (gController) => controller.complete(gController), // 完成 Future GoogleMapController
        ),
      ),
    );
  }

  void newLocationUpdate(LatLng latLng) {
    var marker = RippleMarker(
      markerId: kMarkerId,
      position: latLng,
      ripple: true,
    );
    setState(() => markers[kMarkerId] = marker);
  }
}

void main() {
  runApp(SimpleMarkerAnimationExample());
}

使用波纹效果

使用波纹效果只需将 RippleMarker 包装类中的 ripple 标志设置为 true：

Animarker(
  rippleRadius: 0.5,  // [0,1.0] 范围，圆圈大小
  rippleColor: Colors.teal, // 渐变波纹圆的颜色
  rippleDuration: Duration(milliseconds: 2500), // 波纹脉冲持续时间
  markers: <Marker>{
    RippleMarker(
      markerId: MarkerId('MarkerId1'),
      position: LatLng(0, 0),
      ripple: true,  // 波纹状态
    ),
    Marker(
      markerId: MarkerId('MarkerId2'),
      position: LatLng(0, 0),
    ),
  },
)

使用旋转

对于类似 Uber 或送货应用，可以启用 Marker 的旋转：

Animarker(
  useRotation: true, // 默认激活
  markers: <Marker>{
    Marker(
      markerId: MarkerId('MarkerId2'),
      position: LatLng(0, 0),
    ),
  },
)

使用曲线和持续时间

您可以设置动画的 Curve 和 Duration 来获得所需的效果：

Animarker(
  curve: Curves.bounceInOut,
  duration: Duration(milliseconds: 2000),
  markers: <Marker>{
    Marker(
      markerId: MarkerId('MarkerId2'),
      position: LatLng(0, 0),
    ),
  },
)