How Do I Animate a CALayer's Position?
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
ios12 swift4.2 xcode10.1
add a comment |
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
ios12 swift4.2 xcode10.1
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
add a comment |
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
ios12 swift4.2 xcode10.1
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
ios12 swift4.2 xcode10.1
ios12 swift4.2 xcode10.1
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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")
Time to reread Chapter 4. Thanks again.
– Verticon
Nov 15 '18 at 0:07
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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")
Time to reread Chapter 4. Thanks again.
– Verticon
Nov 15 '18 at 0:07
add a comment |
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")
Time to reread Chapter 4. Thanks again.
– Verticon
Nov 15 '18 at 0:07
add a comment |
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")
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")
answered Nov 15 '18 at 0:03
mattmatt
332k46543741
332k46543741
Time to reread Chapter 4. Thanks again.
– Verticon
Nov 15 '18 at 0:07
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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