Flutter地图标记动画插件google_map_marker_animation的使用

Flutter地图标记动画插件google_map_marker_animation的使用

标题

Flutter地图标记动画插件google_map_marker_animation的使用

内容

• 这个包是flutter_animarker扩展包。
• 我们添加了onMarkerAnimationListener以实现从地图上平滑移除多边线的功能。

Google Maps Marker Animation - Overview

• 有时你需要在地图画布上放置一个标记📍，但你还需要平滑地通过Google Maps移动。
• 这个包将帮助你动画化标记的位置变化和更多功能。
• 版本v3.0.0包括许多有用的功能，例如：
  • 标记位置动画
  • 同时动画多个标记
  • 兼容Null-safety
  • 覆盖标记位置的涟漪效果
  • 标记的旋转或方向的角度（航向/航向）
  • 多点线性动画（分段线性近似算法）
  • 支持动画曲线和持续时间
  • 基于Widget的完全自定义行为
  • 动画预热以提高性能
  • 有用的LocationTween、AngleTween和PolynomialLocationInterpolator核心逻辑

Note

• 这个包只动画化标记的变化。地理位置和Google Maps配置超出了这个包的范围。所以在尝试这个包之前，请确保你在Google Map上放置了一个标记或者获取了位置更新。

Screenshots

Example

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

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(Duration(seconds: 2), (count) => LatLng(18.488101, -69.957995)).take(4);

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

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

  @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), // Grab Google Map Id
        markers: markers.values.toSet(),
        child: GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: CameraPosition(target: LatLng(18.488213, -69.959186), zoom: 15),
          onMapCreated: (gController) => controller.complete(gController), // Complete the future GoogleMapController
        ),
      ),
    );
  }
}

Using Ripple Effect

• 你只需要使用标记包装类RippleMarker，并设置ripple标志以便可以控制涟漪状态。

Animarker(
  rippleRadius: 0.5,  //[0,1.0] range, how big is the circle
  rippleColor: Colors.teal, // Color of fade ripple circle
  rippleDuration: Duration(milliseconds: 2500), //Pulse ripple duration
  markers: <Marker>{
    RippleMarker(
      markerId: MarkerId('MarkerId1'),
      position: LatLng(0, 0),
      ripple: true,  //Ripple state
    ),
    Marker(
      markerId: MarkerId('MarkerId2'),
      position: LatLng(0, 0),
    ),
  },
)

Using Rotation

• 标记的旋转可以用于Uber-like或送货应用。航向或航向是标记在地球上移动的方向角度。

Animarker(
  useRotation: true, // Actived by default
  markers: <Marker>{
    Marker(
      markerId: MarkerId('MarkerId2'),
      position: LatLng(0, 0),
    ),
  },
)

Using Curve and Duration

• 就像正常的Flutter动画一样，你可以设置Curve或Duration来获得期望的效果或结果。非常灵活，对吧？

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