0

I am creating an iPad application in Swift that doesn't use AutoLayout. My viewDidLoad method is empty, and I placed my animation code inside of my IBAction, as shown below:

@IBAction func nextStep(sender: AnyObject) {
        UIView.animateWithDuration(1, animations: { () -> Void in
            self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)
        })
        comparisonLabel.text = "Speed Reading"
        comparisonLabel.center = CGPointMake(comparisonLabel.center.x + 800, comparisonLabel.center.y)
        UIView.animateWithDuration(1, animations: { () -> Void in
            self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)
        })
}

The first UIView enclosure does not animate the label. Rather, it just instantly removes the label from the screen. For some reason, the second UIView works exactly as it should, gradually sliding the label from the right side of the screen. (I didn't use the viewDidAppear function because I only need the animations to take place when the user clicks a button.)

Would anyone happen to know why this is happening, and how I can make the first UIView animation perform the same as the second?

Thanks in advance to all who reply.

1 Answer 1

1

Use UIView.animateKeyframesWithDurationinstead.

Example

UIView.animateKeyframesWithDuration(2, delay: 0, options: nil, animations: { () -> Void in

        UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.5, animations: {

            //Move left animation
            self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)


        })

        UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.1, animations: {

            //Hiding animation
            self.comparisonLabel.alpha = 0

        })

        UIView.addKeyframeWithRelativeStartTime(0.6, relativeDuration: 0.1, animations: {

            //Move to right animation
            self.comparisonLabel.text = "Speed Reading"
            self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x + 800, self.comparisonLabel.center.y)

        })

        UIView.addKeyframeWithRelativeStartTime(0.6, relativeDuration: 0.4, animations: {

            //Moving back into screen animation
            self.comparisonLabel.alpha = 1
            self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)

        })

        }, completion: nil)

Try to play with relativestarttime and relativeduration to get your desire effect.

Or use

class func animateWithDuration(_ duration: NSTimeInterval,
                animations animations: () -> Void,
                completion completion: ((Bool) -> Void)?)

Example

UIView.animateWithDuration(1, animations: { () -> Void in

        //Your first animation
        self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)

        }) { (finish:Bool) -> Void in

            self.comparisonLabel.text = "Speed Reading"
            self.comparisonLabel.center = CGPointMake(comparisonLabel.center.x + 800, comparisonLabel.center.y)

            UIView.animateWithDuration(1, animations: { () -> Void in
                //Your second animation
                self.comparisonLabel.center = CGPointMake(self.comparisonLabel.center.x - 400, self.comparisonLabel.center.y)
            })
    }
3
  • When I tried using the first example you made in a different area of my program, the objects would just snap back to their original positions. Is there a reason for this? I'm not using auto layout...
    – iProgramIt
    Jul 24, 2015 at 20:59
  • My guess is your relativeDuration of third keyframe animation (moving label from right back into screen) might be too short to be noticed. Key frame animation works in a way that each animation will be executed at relative start time for relative duration that you set. So, it didn't work well in this case. Since hiding and moving thing are happening in the same time, you can see label fly and disappear to the right. So, I suggest you to use the second example or put another key frame animation just for hiding. (But that will be quite messy, see my edited answer). Jul 25, 2015 at 16:04
  • For the snapping back to original position issue, try to increase the relative duration of the moving from right back to screen animation. Jul 25, 2015 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.