我如何在Google地圖上設置GMSPolyline的動畫效果ios

Question

我使用的是Google地圖SDK，當用戶移動時我必須繪製折線，目前只是在標記移動到特定位置之前繪製路徑。我必須同時繪製路徑和移動引腳。

看看這個視頻：https://www.dropbox.com/s/q5kdjf4iq0337vg/Map_Sample.mov?dl=0

這裏是我的代碼

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() 
    } 

而且，這裏是截圖它是如何工作的，現在

Answer 1

我也嘗試了類似的事情（https://youtu.be/jej2XTwRQy8）。

嘗試以多種方式對GMSPolyline路徑進行動畫處理，但無法直接對其進行動畫處理。

如何找到替代方案來做到這一點。你所要做的就是創建一個帶有BreizerPath的CAShapeLayer，將它僞造成GMSPolyline併爲strokeEnd設置動畫。動畫完成後，顯示實際的GMSPolyline並移除CAShapelayer。不過，我必須優化它。

爲了創建一個CAShapeLayer，以及開始的幾行，你可以參考下面的代碼。

-(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; 
} 

下面是動畫代碼。

-(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"]; 
} 

如何在我的情況下，我不得不動畫整個路線。在你的情況下，你只需要動畫更新的部分。