Animation for drawings

Question

I'm wondering is there are some available animations exist for changing MapPolyline and MapPolygon on the fly".

For now, I'm able to draw both of them and edit them via geometry property, but without any animations:

let geoPolyline = try! GeoPolyline(vertices: option3Geo)
let lineColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
mapPolyline = MapPolyline(geometry: geoPolyline,
                                        widthInPixels: 30,
                                        color: lineColor)
mapView.mapScene.addMapPolyline(mapPolyline!)
// and later to update without any animations    
mapPolyline?.geometry = newPoints

same for polygon:

let geoPolygon = try! GeoPolygon(vertices: option3Geo)

let fillColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
mapPolygon = MapPolygon(geometry: geoPolygon, color: fillColor)
        
mapView.mapScene.addMapPolygon(mapPolygon!)

// later
mapPolygon.geometry = geometry

It would be great, if some animation can be added to this change - in my case, user change the polygon "on the fly", and without animation it looks a bit ugly.

score 0 · Accepted Answer · answered Jun 21 '21 at 07:35

As of now, with HERE SDK 4.7.5.0, such animations are not available for MapPolyline <-> MapPolygon on SDK-side. It may be a reasonable request to add animations and maybe it's planned for a future release, but in your case, the best solution would be to apply animations on app-level. Then you have full control on the behavior you would like to see. You can either apply animations to a MapPolyline to drag them on screen, or morph between different shapes. This only requires a little bit of math. You may also look for some existing animation libraries, like Spring.

Since the HERE SDK allows to update the geometry on the next rendered frame, this could be used to set slightly modified polylines animated over time by using a display link.

Define a loop that is synchronized with the display rendering:

private lazy var displayLink = CADisplayLink(target: self,
                                                 selector: #selector(animatorLoop))

Start the render loop:

displayLink.isPaused = false
displayLink.add(to: .current, forMode: .common)

Animate:

// Called periodically.
@objc private func animatorLoop() {
   // Change the geometry ... 
}

There is actually an HERE SDK example that makes use of this to change the zoom level over time in the Gestures example app. I slightly modified it above to show how it generally works.

thanks for response - yes, animation using alternative methods can be used of cause, but before doing this, I just want to be sure, that such functionality is not supported by the sdk. Thanks for response — hbk, Jun 21 '21 at 07:39

Animation for drawings

1 Answers1