flutter_animarker 无法关闭波纹动画答案

【问题标题】：flutter_animarker can't turn ripple animation offflutter_animarker 无法关闭波纹动画
【发布时间】：2021-05-09 19:15:42
【问题描述】：

https://pub.dev/packages/flutter_animarker

哇，这很烦人。所以Animarker 是我的 Google 地图的 Widget 父级。地图正忙于标记。当用户需要从抽屉中找到特定的标记时，他们点击该项目并在相应的标记中触发波纹效果。

问题是它永远不会停止涟漪。如果用户继续点击，它甚至会尝试为多个标记设置动画。

最初的动画很喜欢，但我现在正在爬墙！

Animarker(
      isActiveTrip: rippleAnimationActive,
      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: animatedMarkerSet,

      mapId: _mapController.future.then<int>((value) => value.mapId),
      child: GoogleMap(
      key: Key("myGoogleMap"),
      mapType: MapType.hybrid,
      initialCameraPosition: _edinburghCamera,
      markers: _markers,
      myLocationEnabled: true,
      onMapCreated: (GoogleMapController controller) {
        _mapController.complete(controller);
      },
    ),
    ),

我在一个 Drawer 项 onTap() 中触发动画：

                        onTap: () {
                      animatedMarkerSet = {
                        RippleMarker(
                            markerId: MarkerId(presentLocation.name),
                            position: presentLocation.latLng,
                            ripple: true) };

                      setState(() {
                        presentLocation = _location;
                        animatedMarkerSet;
                        rippleAnimationActive = true;
                      });
                      //setState(() => _markers.add(marker));
                      Navigator.of(context).pop();
                    },

您可以看到我创建了一个全新的标记来制作动画，并将其添加到 animatedMarkerSet。这很好用。

当用户点击标记时，任何标记都会向上滑动有关位置的详细信息。我尝试停用正在涟漪的 ANY 标记。但是，无论我尝试什么，它都不会停止：

    setState(() {
  rippleAnimationActive = false;
  animatedMarkerSet.clear(); // nuke from orbit
}

我还尝试将 animatedMarkerSet 更改为 Map，并尝试使用以下方法停用波纹：

  void newLocationUpdate(LocationDetails oldLocation) {
var marker = RippleMarker(
  markerId: MarkerId(oldLocation.name),
  position: oldLocation.latLng,
  ripple: false,
);
setState(() => animatedMarkerMap[MarkerId(oldLocation.name)] = marker);
  }

但这也不起作用。

我真的只需要打开和关闭动画。我不明白为什么 Anmarker 对setState() 如此抗拒，告诉它停止。

事实上，最好的办法可能是让它运行 5 秒钟然后关闭，在所有情况下，但我也不知道如何做到这一点。呸！

【问题讨论】：

我不清楚为什么它被否决了。我不是唯一遇到这个问题的人，还有 2 个人反馈给插件开发。但是，我的问题可能是由于缺乏洞察力引起的，因此欢迎提供帮助。令人难以置信的是，您无法关闭波纹动画。所以你可能可以......不知何故。

标签： flutter google-maps animation

【解决方案1】：

好吧，我想通了。采用动画标记集的 AniMarker 是最终的。因此，一旦您将一组 RippleMarkers 交给它，它就会为它们设置动画，但您不能通过 SetState() 调用将其关闭。

我尝试编辑 AniMarker 类，使其不是最终的，所以你可以改变它的数据集，但我认为因为它是基于 GoogleMap 的 Marker 类构建的，而且它们是最终的，所以它不会工作。

所以 AniMarker 目前的实用性有限。

我的工作只是改变 GoogleMaps marker: 选项，所以我可以通过改变它的颜色来突出显示一个标记。还可以更改 circles: GoogleMap 选项，以根据用户交互动态突出显示标记。

【讨论】：