How Do I Animate a CALayer's Position?

Question

Please have a look at the following method which I am using to move a sublayer 50 points up along the y axis. In particular, pay attention to the last line (which is commented out).

@objc func animateButtonPressed(_ sender: UIButton) {
    let initialValue = customView.sublayer.position.y
    let finalValue = customView.sublayer.position.y - 50

    let animation = CABasicAnimation(keyPath: "position.y")
    animation.fromValue = initialValue
    animation.toValue = finalValue
    animation.duration = 2
    customView.sublayer.add(animation, forKey: "Reposition")

    //customView.sublayer.position.y = finalValue
}

With the code as shown, I get the following behavior:

The layer slowly moves from the initial position to the final position.
The layer then jumps back to the initial position.
The layer remains at the initial position.

Everything I read informs me that the "jumping back" occurs because I have not updated the model to reflect the final value. So, let's update the model by uncommenting the final line. Now the behavior is:

The layer jumps from the initial position to the final position.
The layer then jumps back to the initial position.
The layer then slowly moves to the final position.
The layer remains at the final position.

The jump is apparently occurring because the final position is being set on the model. I feel like I am in a catch 22. Any help will be much appreciated.

A working project that illustrates the problem can be found on GitHub

Xcode 10.0, iOS 12.2, Swift 4.2

Change the real position _before_ configuring the animation, and do it with implicit animation turned off. — matt, Nov 14 '18 at 23:50
Look at case 5 at https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/bk2ch04p148layerAnimation/ch17p490layerAnimation/ViewController.swift to see the correct canonical structure — matt, Nov 14 '18 at 23:53
And see the exposition here http://www.apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation — matt, Nov 14 '18 at 23:54

score 4 · Accepted Answer · answered Nov 15 '18 at 00:03

Here's the canonical form as developed and explained in my book. Set the animated layer to its final value beforehand but with implicit animation turned off, like this:

@objc func animateButtonPressed(_ sender: UIButton) {
    let initialValue = customView.sublayer.position.y
    let finalValue = customView.sublayer.position.y - 50
    CATransaction.setDisableActions(true) //       <-- *
    customView.sublayer.position.y = finalValue // <-- *
    let animation = CABasicAnimation(keyPath: "position.y")
    animation.fromValue = initialValue
    animation.toValue = finalValue
    animation.duration = 2
    customView.sublayer.add(animation, forKey: "Reposition")
}

How Do I Animate a CALayer's Position?

1 Answers1