Native Animation in Flutter Google Maps Plugin does not work

Question

I try to make animatable marker (pulse animation) in flutter app with google_maps_flutter plugin. Because the only way to create custom markers for now is via marker.icon = BitmapDescription

So I edit plugin source code. Its possible to add own UIView and it works properly. But when I add any kind of animation then that view appear on the map in its final state with no any animations.

For example in file 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;

Result

I guess the same will be with Android either.

So how can fix this behavior?

score 0 · Answer 1 · answered May 03 '21 at 01:22

Try this package: https://github.com/gauris26/flutter_animarker

It has ripple animation support.

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
)

Native Animation in Flutter Google Maps Plugin does not work

1 Answers1