我如何在谷歌地图ios中动画GMSPolyline [英] How do i animate GMSPolyline in google maps ios

问题描述

我使用谷歌地图SDK，我必须在用户移动时绘制折线，目前它只是动画标记，在针移动到特定位置之前绘制的路径。我必须同时绘制路径和移动图钉。

观看此视频：

解决方案

我也是尝试类似的事情（ https://youtu.be/jej2XTwRQy8 ）。

尝试以多种方式设置GMSPolyline路径的动画，但未能直接设置动画ly。

我怎么能找到替代方法呢。你所做的只是创建一个带有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; 
 
返回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]; 
} 
  

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

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

解决方案

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.

这篇关于我如何在谷歌地图ios中动画GMSPolyline的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！