Morphing animation

From the beginning of this project we wanted to implement smooth transformation between shapes. Ability to morph paths into other arbitrary paths provides a way to create complex effects. We introduced a new member of the animation’s family — Morphing Animation.

Let’s start with a simple transformation of one shape into another:

let form1 = Rect(x: 50.0, y: 50.0, w: 200.0, h: 200.0)
let form2 = Circle(cx: 150.0, cy: 150.0, r: 100.0)
        
let shape = Shape(form: form1, stroke: Stroke(width: 3.0))
let animation = shape.formVar.animation(to: form2, during: 1.5, delay: 2.0)
animation.autoreversed().cycle().play()

Other shape’s properties can be animated the same way:

let shape1 = Shape(form: Rect(x: 50.0, y: 50.0, w: 100.0, h: 100.0), stroke: Stroke(width: 3.0))
let animation1 = shape1.fillVar.animation(to: Color.red)

animation1.autoreversed().cycle().play()

let shape2 = Shape(form: Circle(cx: 250.0, cy: 100.0, r: 50.0), stroke: Stroke(width: 3.0,  dashes: [5, 20]))
let animation2 = shape2.strokeVar.animation(to: Stroke(fill: Color.green, width: 6.0,  dashes: [15, 5]))

animation2.autoreversed().cycle().play()

In real cases, a single shape is not enough — we are happy to introduce optimized animation for group contents:

let stroke = Stroke(width: 15.0, cap: .round)

let contents1 = [
  Shape(form: Line(x1: 150.0, y1: 150.0, x2: 175.0, y2: 125.0), stroke: stroke),
  Shape(form: Line(x1: 150.0, y1: 150.0, x2: 225.0, y2: 150.0), stroke: stroke),
  Shape(form: Line( x1: 150.0, y1: 150.0, x2: 175.0, y2: 175.0), stroke: stroke),
]

let contents2 = [
  Shape(form: Line(x1: 130.0, y1: 110.0, x2: 245.0, y2: 110.0), stroke: stroke),
  Shape(form: Line(x1: 130.0, y1: 150.0, x2: 245.0, y2: 150.0), stroke: stroke),
  Shape(form: Line(x1: 130.0, y1: 190.0, x2: 245.0, y2: 190.0), stroke: stroke),
]

let group = contents1.group()
let animation = group.contentsVar.animation(to: contents2).autoreversed().cycle()
animation.play()

With some imagination you can create really wonderful transformations

let examples = try! SVGParser.parse(path: "examples")
let elephant = examples.nodeBy(tag: "elephant")!
let hippo    = examples.nodeBy(tag: "hippo")!

let rootGroup = [elephant].group()
rootGroup.contentsVar.animation(to: [hippo], during: 3.0).autoreversed().cycle().play()