我如何在谷歌地图 ios 中为 GMSPolyline 设置动画

Question

我使用的是谷歌地图 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"];
}

在我的情况下，我不得不为整条路线制作动画。在您的情况下，您只需为更新的部分设置动画。