How Do I Animate a CALayer's Position?










0















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:



  1. The layer slowly moves from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. 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:



  1. The layer jumps from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. The layer then slowly moves to the final position.

  4. 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










share|improve this question
























  • 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 github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

    – matt
    Nov 14 '18 at 23:53











  • And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

    – matt
    Nov 14 '18 at 23:54











  • @matt U r da man! Thk u very much.

    – Verticon
    Nov 14 '18 at 23:58











  • I'll supply a full answer in a moment.

    – matt
    Nov 14 '18 at 23:59















0















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:



  1. The layer slowly moves from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. 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:



  1. The layer jumps from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. The layer then slowly moves to the final position.

  4. 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










share|improve this question
























  • 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 github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

    – matt
    Nov 14 '18 at 23:53











  • And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

    – matt
    Nov 14 '18 at 23:54











  • @matt U r da man! Thk u very much.

    – Verticon
    Nov 14 '18 at 23:58











  • I'll supply a full answer in a moment.

    – matt
    Nov 14 '18 at 23:59













0












0








0








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:



  1. The layer slowly moves from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. 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:



  1. The layer jumps from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. The layer then slowly moves to the final position.

  4. 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










share|improve this 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:



  1. The layer slowly moves from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. 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:



  1. The layer jumps from the initial position to the final position.

  2. The layer then jumps back to the initial position.

  3. The layer then slowly moves to the final position.

  4. 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







ios12 swift4.2 xcode10.1






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 23:48







Verticon

















asked Nov 14 '18 at 23:27









VerticonVerticon

1,029816




1,029816












  • 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 github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

    – matt
    Nov 14 '18 at 23:53











  • And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

    – matt
    Nov 14 '18 at 23:54











  • @matt U r da man! Thk u very much.

    – Verticon
    Nov 14 '18 at 23:58











  • I'll supply a full answer in a moment.

    – matt
    Nov 14 '18 at 23:59

















  • 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 github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

    – matt
    Nov 14 '18 at 23:53











  • And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

    – matt
    Nov 14 '18 at 23:54











  • @matt U r da man! Thk u very much.

    – Verticon
    Nov 14 '18 at 23:58











  • I'll supply a full answer in a moment.

    – matt
    Nov 14 '18 at 23:59
















Change the real position before configuring the animation, and do it with implicit animation turned off.

– matt
Nov 14 '18 at 23:50





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 github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

– matt
Nov 14 '18 at 23:53





Look at case 5 at github.com/mattneub/Programming-iOS-Book-Examples/blob/master/… to see the correct canonical structure

– matt
Nov 14 '18 at 23:53













And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

– matt
Nov 14 '18 at 23:54





And see the exposition here apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

– matt
Nov 14 '18 at 23:54













@matt U r da man! Thk u very much.

– Verticon
Nov 14 '18 at 23:58





@matt U r da man! Thk u very much.

– Verticon
Nov 14 '18 at 23:58













I'll supply a full answer in a moment.

– matt
Nov 14 '18 at 23:59





I'll supply a full answer in a moment.

– matt
Nov 14 '18 at 23:59












1 Answer
1






active

oldest

votes


















1














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")






share|improve this answer























  • Time to reread Chapter 4. Thanks again.

    – Verticon
    Nov 15 '18 at 0:07










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310295%2fhow-do-i-animate-a-calayers-position%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














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")






share|improve this answer























  • Time to reread Chapter 4. Thanks again.

    – Verticon
    Nov 15 '18 at 0:07















1














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")






share|improve this answer























  • Time to reread Chapter 4. Thanks again.

    – Verticon
    Nov 15 '18 at 0:07













1












1








1







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")






share|improve this answer













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")







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 15 '18 at 0:03









mattmatt

332k46543741




332k46543741












  • Time to reread Chapter 4. Thanks again.

    – Verticon
    Nov 15 '18 at 0:07

















  • Time to reread Chapter 4. Thanks again.

    – Verticon
    Nov 15 '18 at 0:07
















Time to reread Chapter 4. Thanks again.

– Verticon
Nov 15 '18 at 0:07





Time to reread Chapter 4. Thanks again.

– Verticon
Nov 15 '18 at 0:07



















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310295%2fhow-do-i-animate-a-calayers-position%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo