How to animate ASDisplayNode standalone

[muukii]

ASDisplayNode's frame is managed by Texture. Technically, ASDisplayLayer's layoutSublayer hooks re-layout.

So, what if I write the following code, the animation won't work.

 let animator = UIViewPropertyAnimator(duration: 2, dampingRatio: 0.9) {
  self.imageNode.frame.size.width -= 200
}

because the manipulation in the animation closure hooks ASDisplayLayer's layoutSublayer.

For now, we can do this with the following implementation. it's super tentative.

private final class AnimatableNode<Content: ASDisplayNode>: WrapperNode<Content> {

  var isAnimating: Bool = false

  override var frame: CGRect {
    get {
      super.frame
    }
    set {
      guard isAnimating == false else {
        return
      }
      super.frame = newValue
    }
  }
}

imageNode.isAnimating = true
let animator = UIViewPropertyAnimator(duration: 2, dampingRatio: 0.9) {
  self.imageNode.view.frame.size.width -= 200
}
animator.addCompletion { _ in
  self.imageNode.isAnimating = false
}
animator
  .startAnimation()

As another idea, we can use Transition API, but I think we would have some cases have to be done without using Transition API.

What do you think?

[muukii]

or manipulating transform works fine since it won't hook layout.

[muukii]

For example, can we implement methods something like:

disableLayoutSubnodes - called before starting animation relayoutSubnodes - after finish the animation to restore the actual layout.

[muukii]

This issue must be related with https://github.com/TextureGroup/Texture/issues/645