Kodeco Forums

Video Tutorial: Intermediate iOS Animations Part 1: Basic Layer Animations

Learn how to create your first layer animation and how to send it off for rendering on screen.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3270-intermediate-ios-animation/lessons/2

Sorry
Because of its privacy settings, this video cannot be played here.

Video seems to be unavailable.

EDIT: after reloading several times the video appeared. Strange.

1 Like

Working perfectly for me. :blush:

video working great…

so one habit I’ve gotten into after my first couple months of learning iOS is that whenever I am trying any new thing, like CABasicAnimation, I like to right click and jump to the definition, where apple actually looks like the’ve been doing a relatively good job documenting… so I read their explanation of the properties, fromValue, toValue and byValue… and two things stood out.

  1. only up to 2 of those properties should be non-nil
  2. if 2 are nil, then CABasicAnimation will assume the current position of the object being animated as either the From or To.

so I figured that i wouldn’t need a from and to value and yes the animation works just fine, bringing the objects to their toValue locations, wherever they are…

so my version reads:

let flyRight = CABasicAnimation(keyPath: “position.x”) //the property being animated.

flyRight.fromValue = -view.bounds.size.width/2
//    flyRight.toValue = view.bounds.width/2
    flyRight.duration = 0.5
    heading.layer.addAnimation(flyRight, forKey: nil)

of course, who knows, maybe I’ll need a toValue later but for now at least I’ve kept it commented out…

that is correct - you don’t always need to set both from and to values :slight_smile: I just always set from and to as a good practice so the code always looks the same and it’s easier to read (especially if there’s lots of code for a complicated animation)

ah… but what if the final locations could move around and you just want it to come from wherever to the current location?

anyway that was really nice… now I’m wondering how to add a spring using CABasicAnimation… but where are the other parts after part 1? have they been made yet? there are no links and i can’t find any on the site…so i’m guessing not?

The parts usually come one or two days apart :slight_smile: part 1 just came out yesterday

heh it’s i think my first time watching a tutorial so fresh that it hasn’t all come out yet :slight_smile:

but since you’re here, may I ask you a question? when the app first comes up either on my iPhone 6+, an iPad air, or the simulator, the animation of the menus coming in from the left skips a beat… it kinds pauses for a fraction of a second then jerks forward… what causes that and how do i get rid of it? I’ve made a video of this phenomenon in slow motion…

I’m not sure which menus you mean, can post a screenshot?

sure… I actually made a video and put it in slow motion so you can see it happen clearly…

@dkliman, if you’re going to be clicking anyway, use command-left- instead of right-click, and you’ll get to the definition faster.

I only do command-click if Force Click (same result as option-click) doesn’t tell me enough.

actually, i’m using the track pad and use a two finger click… but I just said command click for clarity. :wink:

It seems to me that a convenience initializer might be in order, based on three CABasicAnimations that we end with after the challenge. It also seems to me that fromValue and toValue need to always be of the same type (called Interpolable below); do you think that’s accurate?

let fadeIn = CABasicAnimation(
    keyPath: "opacity",
    values: (from: 0, to: 1),
    duration: 2
)
public extension CABasicAnimation {
    convenience init<Interpolable>(
        keyPath: String,
        values: (
            from: Interpolable?,
            to: Interpolable?
        ),
        duration: CFTimeInterval
    ) {
        self.init(keyPath: keyPath)
        
        fromValue = values.from as? AnyObject
        toValue = values.to as? AnyObject
        
        self.duration = duration
    }
}

that’s a nice convenience init :+1:

1 Like

I’m not sure really - have never noticed that … I’ll have to poke around some time and see if I can find what the issue is …

did you ever figure out what the glitch was from? I can’t remember seeing a glitch like that in too many shipping apps, but maybe it’s in all of them lol

hi again,

so I learned that there is CASpringAnimation(keyPath: “position.x”), which i think looks really cool… i added this:

    spring = CASpringAnimation(keyPath: "position.x")
    spring.damping = 8
    spring.fromValue =  -view.bounds.size.width/2
    spring.beginTime = CACurrentMediaTime() + 2.0
    //        spring.duration = spring.settlingDuration
    spring.duration = 2

but when i set the beginTime t be 2 seconds from now, what happens is everything starts in its final position, disappears then animates back to its final position… i tried fiddling around with hiding, then animating, or starting the .layer.position.x property off screen but i think i’m doing it wrong… how would i put a 1-2 second delay in or any arbitrary delay for that matter, onto each or optionally all of the items being animated in?

hey, it looks like the glitch is present only in the Simulator - I ran the app on the device and there everything is smooth. That being said - this must be a problem that was introduced recently in the Simulator because I don’t rememeber seeing it in previous versions of Xcode

Just keep watching the videos - you will learn about time delay and spring animations :slight_smile:

1 Like