颤动谷歌地图标记与波纹/脉冲动画

Question

我试图创建一个波纹/脉冲动画来显示当前位置颤振谷歌地图。我有一个.svg文件并尝试加载它以获取动画，但它不起作用。图像正在显示，但它的动画不起作用。

下面是我使用的代码，

Future<BitmapDescriptor> _bitmapDescriptorFromSvgAsset(BuildContext context, String assetName) async {
String svgString = await DefaultAssetBundle.of(context).loadString(assetName);
//Draws string representation of svg to DrawableRoot
DrawableRoot svgDrawableRoot = await svg.fromSvgString(svgString, null);
ui.Picture picture = svgDrawableRoot.toPicture();
ui.Image image = await picture.toImage(26, 37);
ByteData bytes = await image.toByteData(format: ui.ImageByteFormat.png);
return BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
}
BitmapDescriptor descriptor = await _bitmapDescriptorFromSvgAsset(context, 'assets/marker.svg');
Marker marker = Marker(markerId: MarkerId(id.toString()), icon: descriptor, position: LatLng(lat, lon));

它正在加载图像，但这无助于显示 svg 的动画。

我想要类似于谷歌地图(SVG/GIF 或任何其他编程方式(中下面显示的标记动画，

https://i.pinimg.com/originals/8c/55/c0/8c55c07c25fafad781765b4911c63894.gif

任何帮助将不胜感激， 谢谢。

Answer 1

对我有用，试试这个： 在 https://github.com/jogboms/flutter_spinkit 安装Spinkit Flutter插件。 创建一个全尺寸的容器覆盖小部件，并使用旋转套件代码。

class Overlay {
static Widget show(BuildContext context) {

final spinkit = SpinKitRipple(
color: Colors.red,
size: 150.0,
);
return Container(
child: spinkit,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.white.withOpacity(0),
);
}
}

有了谷歌地图...

@override
Widget build(BuildContext context) {
GoogleMap googleMap = GoogleMap(
markers: getMarkers(),
initialCameraPosition: getInitial(),
onMapCreated: onMapCreated,
onCameraMoveStarted: onCameraMoveStarted,
onCameraMove: onCameraMove,
onCameraIdle: onCameraIdle
);
return Stack(children: <Widget>[
googleMap,
Overlay.show(context);
]);
}

我通过一些调整将标记放置在中心，它就像一个魅力。

Answer 2

flutter_svg

不支持动画：

可能超出范围/非目标

SMIL动画。这似乎很疯狂。我认为可以对 SVG 进行动画处理，但可能会以更 Flutter 驱动的方式。

从 pub.dev。