Page Summary
-
This sample demonstrates animating the style of a polyline on a map using the Google Maps SDK for iOS.
-
The animation is achieved by dynamically updating the
GMSStyleSpansOffsetof the polylines based on position and style. -
The sample code provides implementations in both Swift and Objective-C.
-
You can clone the sample app repository, install dependencies via CocoaPods, build the project, and run it on an iOS simulator.
-
Ensure to obtain and configure your API key before building and running the sample app.
Get started
Before you can try the sample code, you must configure your development environment. For more information, see Maps SDK for iOS code samples .
View the code
Swift
import GoogleMaps import UIKit final class PolylinesViewController : UIViewController { private lazy var styles : [ GMSStrokeStyle ] = { let greenStyle = GMSStrokeStyle . gradient ( from : . green , to : UIColor . green . withAlphaComponent ( 0 )) let redStyle = GMSStrokeStyle . gradient ( from : UIColor . red . withAlphaComponent ( 0 ), to : . red ) return [ greenStyle , redStyle , GMSStrokeStyle . solidColor ( UIColor ( white : 0 , alpha : 0 ))] }() private var pathLength : Double = 0 private var pos : Double = 0 private var polylines : [ GMSPolyline ] = [] private lazy var mapView : GMSMapView = { let camera = GMSCameraPosition ( latitude : - 30 , longitude : - 175 , zoom : 3 ) return GMSMapView ( frame : . zero , camera : camera ) }() override func loadView () { view = mapView mapView . accessibilityElementsHidden = true } override func viewDidLoad () { super . viewDidLoad () var path = GMSMutablePath () path . addLatitude ( - 33.866901 , longitude : 151.195988 ) path . addLatitude ( - 18 , longitude : 179 ) path . addLatitude ( 21.291982 , longitude : - 157.821856 ) path . addLatitude ( 37.423802 , longitude : - 122.091859 ) path . addLatitude ( - 12 , longitude : - 77 ) path . addLatitude ( - 33.866901 , longitude : 151.195988 ) path = path . pathOffset ( byLatitude : - 30 , longitude : 0 ) pathLength = path . length ( of : . geodesic ) / 21 for i in 0. . < 30 { let polyline = GMSPolyline ( path : path . pathOffset ( byLatitude : Double ( i ) * 1.5 , longitude : 0 )) polyline . strokeWidth = 8 polyline . geodesic = true polyline . map = mapView polylines . append ( polyline ) } animatePath () } // Updates the path style every 0.1 seconds. private func animatePath () { polylines . forEach { if let path = $0 . path { $0 . spans = GMSStyleSpansOffset ( path , styles , [ NSNumber ( value : pathLength )], . geodesic , pos ) } } pos -= 50000 DispatchQueue . main . asyncAfter ( deadline : DispatchTime . now () + 0.1 ) { self . animatePath () } } }
Objective-C
#import "GoogleMapsDemos/Samples/PolylinesViewController.h" #import <GoogleMaps/GoogleMaps.h> static CLLocationCoordinate2D kSydneyAustralia = { -33.866901 , 151.195988 }; static CLLocationCoordinate2D kHawaiiUSA = { 21.291982 , -157.821856 }; static CLLocationCoordinate2D kFiji = { -18 , 179 }; static CLLocationCoordinate2D kMountainViewUSA = { 37.423802 , -122.091859 }; static CLLocationCoordinate2D kLimaPeru = { -12 , -77 }; static bool kAnimate = true ; @implementation PolylinesViewController { NSArray * _styles ; NSArray * _lengths ; NSArray * _polys ; double _pos , _step ; GMSMapView * _mapView ; } - ( void ) tick { for ( GMSPolyline * poly in _polys ) { poly . spans = GMSStyleSpansOffset ( poly . path , _styles , _lengths , kGMSLengthGeodesic , _pos ); } _pos -= _step ; if ( kAnimate ) { __weak id weakSelf = self ; dispatch_after ( dispatch_time ( DISPATCH_TIME_NOW , NSEC_PER_SEC / 10 ), dispatch_get_main_queue (), ^ { [ weakSelf tick ]; }); } } - ( void ) initLines { if ( ! _polys ) { NSMutableArray * polys = [ NSMutableArray array ]; GMSMutablePath * path = [ GMSMutablePath path ]; [ path addCoordinate : kSydneyAustralia ]; [ path addCoordinate : kFiji ]; [ path addCoordinate : kHawaiiUSA ]; [ path addCoordinate : kMountainViewUSA ]; [ path addCoordinate : kLimaPeru ]; [ path addCoordinate : kSydneyAustralia ]; path = [ path pathOffsetByLatitude : -30 longitude : 0 ]; _lengths = @[ @( [ path lengthOfKind : kGMSLengthGeodesic ] / 21 ) ] ; for ( int i = 0 ; i < 30 ; ++ i ) { GMSPolyline * poly = [[ GMSPolyline alloc ] init ]; poly . path = [ path pathOffsetByLatitude : ( i * 1.5 ) longitude : 0 ]; poly . strokeWidth = 8 ; poly . geodesic = YES ; poly . map = _mapView ; [ polys addObject : poly ]; } _polys = polys ; } } - ( void ) viewDidLoad { [ super viewDidLoad ]; GMSCameraPosition * camera = [ GMSCameraPosition cameraWithLatitude : -30 longitude : -175 zoom : 3 ]; GMSMapView * mapView = [ GMSMapView mapWithFrame : CGRectZero camera : camera ]; mapView . accessibilityElementsHidden = YES ; self . view = mapView ; _mapView = mapView ; CGFloat alpha = 1 ; UIColor * green = [ UIColor colorWithRed : 0 green : 1 blue : 0 alpha : alpha ]; UIColor * greenTransp = [ UIColor colorWithRed : 0 green : 1 blue : 0 alpha : 0 ]; UIColor * red = [ UIColor colorWithRed : 1 green : 0 blue : 0 alpha : alpha ]; UIColor * redTransp = [ UIColor colorWithRed : 1 green : 0 blue : 0 alpha : 0 ]; GMSStrokeStyle * grad1 = [ GMSStrokeStyle gradientFromColor : green toColor : greenTransp ]; GMSStrokeStyle * grad2 = [ GMSStrokeStyle gradientFromColor : redTransp toColor : red ]; _styles = @[ grad1 , grad2 , [ GMSStrokeStyle solidColor : [ UIColor colorWithWhite : 0 alpha : 0 ]], ] ; _step = 50000 ; [ self initLines ]; [ self tick ]; } @ end . m
