12

I was using google maps SDK and I have to draw polyline when user moves, currently it just animates the marker only, path drawn before pin moves to specific location. I have to draw path and move pin at same time.

Check this video : https://www.dropbox.com/s/q5kdjf4iq0337vg/Map_Sample.mov?dl=0

Here is my code

func locationManager(manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        let location = locations.last!
        userPath.addCoordinate(location.coordinate) //userPath -> GMSMutablePath
        let polyline = GMSPolyline(path: userPath)
        polyline.strokeColor = UIColor(red: 0, green: 191/255.0, blue: 1, alpha: 0.8)
        polyline.strokeWidth = 5
        CATransaction.begin()
        CATransaction.setAnimationDuration(2.0)
        self.userMarker.position = location.coordinate
        self.userMarker.rotation = location.course
        polyline.map = self.googleMapView
        CATransaction.commit()
    }

Also here is the screenshot how it works now Sample Image

Leojin Bose
  • 161
  • 1
  • 9

1 Answers1

6

I was also trying a similar thing (https://youtu.be/jej2XTwRQy8).

Tried animating the GMSPolyline path in a number of ways and failed to animate it directly.

How ever i found an alternative to do this. All you got it do is create a CAShapeLayer with a BreizerPath, fake it to look like a GMSPolyline and animate the strokeEnd. Once the animation is completed, show the actual GMSPolyline and remove the CAShapelayer. However i have to optimise it.

In order to create an CAShapeLayer, and the point of start, lines you can refer the below code.

-(CAShapeLayer *)layerFromGMSMutablePath:(GMSMutablePath *)path{
    UIBezierPath *breizerPath = [UIBezierPath bezierPath];

    CLLocationCoordinate2D firstCoordinate = [path coordinateAtIndex:0];
    [breizerPath moveToPoint:[_mapView.projection pointForCoordinate:firstCoordinate]];

    for(int i=1; i<path.count; i++){
        CLLocationCoordinate2D coordinate = [path coordinateAtIndex:i];
        [breizerPath addLineToPoint:[_mapView.projection pointForCoordinate:coordinate]];
    }

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [[breizerPath bezierPathByReversingPath] CGPath];
    shapeLayer.strokeColor = [[UIColor whiteColor] CGColor];
    shapeLayer.lineWidth = 4.0;
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.cornerRadius = 5;

    return shapeLayer;
}

Below is the code to animate.

-(void)animatePath:(CAShapeLayer *)layer{
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3;
    pathAnimation.delegate = self;
    [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [layer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

How ever in my case i had to animate the entire route. In your case you have to animate only the updated part.

Srinivasan
  • 504
  • 6
  • 8