Flutter Google Maps 插件中的原生动画不起作用

Posted 2023-02-18

【中文标题】Flutter Google Maps 插件中的原生动画不起作用

【英文标题】：Native Animation in Flutter Google Maps Plugin does not work

【发布时间】：2020-09-28 06:51:03

【问题描述】：

我尝试使用 google_maps_flutter 插件在颤振应用程序中制作可动画标记（脉冲动画）。因为目前创建自定义标记的唯一方法是通过marker.icon = BitmapDescription

所以我编辑插件源代码。可以添加自己的UIView 并且可以正常工作。但是当我添加任何类型的动画时，该视图会以其最终状态出现在地图上，没有任何动画。

例如在文件GoogleMapMarkerController.m,中

    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)];
    myView.backgroundColor = [UIColor redColor];
    myView.layer.cornerRadius = 50;

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 1.5;
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.autoreverses = YES;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:0.1];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.2];

    [myView.layer addAnimation:scaleAnimation forKey:@"scale"];
    [UIView animateWithDuration:100.0 delay:0 options:UIViewAnimationOptionCurveLinear  animations:^
        myView.backgroundColor = [UIColor greenColor];
     completion:^(BOOL finished) 
        //code for completion
    ];
    _marker.iconView = myView;

结果

我想 android 也一样。

那么如何解决这个问题呢？

【参考方案1】：

试试这个包：https://github.com/gauris26/flutter_animarker

它支持波纹动画。

Animarker(
 // Other properties
 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>
  //Ripple Marker
  RippleMarker(
      markerId: MarkerId('MarkerId1'),
      position: LatLng(0, 0),
      ripple: true,  //Ripple state
 ),
 //Non-ripple marker
 Marker(
     markerId: MarkerId('MarkerId2'),
     position: LatLng(0, 0),
 ),
 ,
 // Other properties
)