2016-07-06 30 views
10

Stavo usando google maps SDK e devo disegnare polilinea quando l'utente si muove, attualmente si limita a animare solo il marcatore, tracciato prima che il pin si muova in una posizione specifica. Devo disegnare il percorso e spostare il pin allo stesso tempo.Come faccio ad animare GMSPolyline in google maps ios

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

Ecco il mio codice

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

Anche qui è la screenshot come funziona ora Sample Image

+0

cosa vuoi fare? non ottenere esattamente. Puoi spiegarlo in dettaglio. –

+0

Domanda modificata, hai capito ora? devo disegnare il percorso quando si muove il pin – Bose

+0

Salve qualcuno di fronte allo stesso problema? – Bose

risposta

5

cercavo anche una cosa simile (https://youtu.be/jej2XTwRQy8).

Provato animando il percorso GMSPolyline in molti modi e non è riuscito ad animarlo direttamente.

Come mai ho trovato un'alternativa per fare questo. Tutto quello che hai da fare è creare un CAShapeLayer con un BreizerPath, fingere di sembrare un GMSPolyline e animare il tratto End. Una volta completata l'animazione, mostra l'attuale GMSPolyline e rimuovi il CAShapelayer. Tuttavia devo ottimizzarlo.

Per creare un punto CAShapeLayer e il punto di inizio, è possibile fare riferimento al codice riportato di seguito.

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

Di seguito è riportato il codice da animare.

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

Come mai nel mio caso ho dovuto animare l'intero percorso. Nel tuo caso devi animare solo la parte aggiornata.

+0

Che cos'è UIBezierPath? – Himanth

+0

UIBezierPath è fondamentalmente utilizzato per disegnare forme e linee. Trovi di più su [UIBezierPath] (https://developer.apple.com/reference/uikit/uibezierpath?language=objc) – Srinivasan

+0

Fammi controllare – Himanth