Content animation

Let's say you'd like to change geometry and color of your shape using animation. At the time of writing this article, Macaw doesn't support geometry animation, nor color animation. It means that you can't just specify start and end color/geometry for your shape and leave the rest to Macaw. However it doesn't mean Macaw can't help you with your task.

Content animation allows you to control whole Group content during animation. API is amazingly simple: just specify a function which maps a time parameter in the range of [0, 1] to a list of nodes.

For example, let's animate a circle from zero radius to 50. If you want to stroke this circle instead of fill, you can't just scale it because the border width will be changed as well. However content animation works great for such a case:

let group = Group(place: .move(dx: 375 / 2, dy: 100))
group.contentsVar.animate { t in [Circle(r: t * 50).stroke()] }

So we just defined a circle with a time dependent radius: it will be 0 when t = 0 and 50 when t = 1. Let's do the same for circle transparency to make it feel like a circle on the water:

group.contentsVar.animate { t in
  let color = Color.rgba(r: 0, g: 0, b: 255, a: 1 - t)
  return [Circle(r: t * 50).stroke(fill: color, width: 3)]
}

Looks great! Moreover you can change animation properties to tune this effect:

group.contentsVar.animate({ t in
  let color = Color.rgba(r: 0, g: 0, b: 255, a: 1 - t)
  return [Circle(r: t * 50).stroke(fill: color, width: 3)]
}, during: 2, delay: 2)

Content animation provides the standard Animation protocol, so you can manage it like any other animations. On the example below we changed animation easing and made it play forever:

group.contentsVar.animation({ t in
  let color = Color.rgba(r: 0, g: 0, b: 255, a: 1 - t)
  return [Circle(r: t * 50).stroke(fill: color, width: 3)]
}, during: 2, delay: 1).easing(.easeInOut).cycle().play()

The real power of content animation is ability to generate any list of nodes on each animation step. It means that you can actually use different types and number of nodes during animation. Feel free to create your own great effects using content animation!