Add option make main thread rendering engine force display update on every frame

[calda]

This PR adds a workaround for a bug in the main thread rendering engine where it's possible for layer properties to be rendered with a stale, out-of-date value.

In the animation below (with colors modified for emphasis), the animation plays correctly during the first loop. But after it completes the first loop and starts playing subsequent loops, the bottom row of circles will unexpectedly flash red.

I spent a bit of time looking in to the underlying issue. This seems to be a bug in how the main thread rendering engine decides whether or not a property (in this case, a FillNode) needs to be re-rendered. This is pretty complex though because it involves all of the parent layers (which in this case includes multiple parent precomp layers) and a much of mutable state that gets modified every frame. I didn't see any obvious ways to fix the issue.

As a simple workaround, we can provide the ability to make the main thread rendering engine pass in forceUpdates: true on every frame. This guarantees that each property will be re-rendered each frame, avoiding the bug.

Before	With forceDisplayUpdateOnEachFrame

[calda]

While I was looking in to this I noticed and fixed an unrelated issue:

We were passing in a reference to the parent LottieAnimationView so this layer could delegate some callbacks to its parent.

When using LottieAnimationLayer CALayer subclass on its own, there won't be a LottieAnimationView. We should pass in the LottieAnimationLayer instead, since that's where all of the functionality is implemented anyway.

[miguel-jimenez-0529]

LGTM

[miguel-jimenez-0529]

In this context, where does forceDisplayUpdate() gets called? From the code it seems we are simply passing this bool to animationLayer.displayWithFrame(frame:, forceUpdates: )

[calda]

I described it that way because forceDisplayUpdate() is a public API on LottieAnimationView but forceUpdates: true is not.

The implementation of forceDisplayUpdate() is:

func forceDisplayUpdate() {
  for animationLayer in animationLayers {
    animationLayer.displayWithFrame(frame: currentFrame, forceUpdates: true)
  }
}

and the relevant code for forceDisplayUpdateOnEachFrame is:

for animationLayer in animationLayers {
  animationLayer.displayWithFrame(frame: currentFrame, forceUpdates: forceDisplayUpdateOnEachFrame)
}

which is equivalent to calling forceDisplayUpdate() every frame. e.g. we could have instead written the code as simply:

if forceDisplayUpdateOnEachFrame {
  forceDisplayUpdate()
} else {
  // existing frame update code
  for animationLayer in animationLayers {
    animationLayer.displayWithFrame(frame: currentFrame, forceUpdates: false)
  }
}

[miguel-jimenez-0529]

Why do we need this, asking to learn?

[calda]

There was an existing public API for this:

public var animationView: LottieAnimationView? {
    set { rootAnimationLayer?.animationView = newValue }
    get { rootAnimationLayer?.animationView }
}

I was thinking we can't remove an existing public API due to backwards compatibility, so I just changed it to a stored property.

[calda]

Technically I guess we could remove this, because there hasn't been an official release that includes LottieAnimationLayer, so we can still make breaking changes here.

@eromanc, are you using this for anything? I imagine not since Oragami just uses CALayers.

If there are no consumers of this we could just remove it completely.

[eromanc]

let me confirm with you tomorrow @calda but I assume we are not using that.

[eromanc]

Confirmed. We are not using that property in Origami.

[calda]

Great! In that case I'll just remove this API.