CODEWITHSUNDEEP
swiftcabasicanimation
Lawrence413
Lawrence413

Reputation: 2016

CABasicAnimation chaining not working

I am having difficulties chaining multiple CABasicAnimations. I just want to make a button scale to 1.5 times it's size, then to 0.5 and fade away (while scaling down).

The problem is that only the scaling up works then the button goes back to the original state.

I would have used CGAffineTransformMakeScale but it creates a bug in iOS 7. On iOS 8 & 9 it works fine

I tried using a CAAnimationGroup but same result.

Here's the code:

    let scaleUp = CABasicAnimation(keyPath: "transform.scale")
    scaleUp.fromValue = 1
    scaleUp.toValue = 1.5
    scaleUp.duration = 0.2
    scaleUp.beginTime = 0
    scaleUp.removedOnCompletion = true
    self.myButton.layer.addAnimation(scaleUp, forKey: "up")

    let scaleDown = CABasicAnimation(keyPath: "transform.scale")
    scaleDown.fromValue = 1
    scaleDown.toValue = 0.5
    scaleDown.duration = 0.2
    scaleDown.beginTime = scaleUp.beginTime + scaleDown.duration
    scaleDown.removedOnCompletion = true
    self.myButton.layer.addAnimation(scaleDown, forKey: "down")

    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1
    fade.toValue = 0
    fade.duration = 0.2
    fade.beginTime = scaleUp.beginTime + scaleDown.duration
    fade.removedOnCompletion = false
    self.myButton.layer.addAnimation(fade, forKey: "fade")

Upvotes: 1

Views: 1149

Answers (2)

holex
holex

Reputation: 24031

that works for me quite well, feel free to play with the duration times, or other animation properties.

I tried to use your instructions for the animation, but it does not mean I have set all properties correctly for your expectations.

Swift (2.x)

func addGrowShrinkAndFadeOutAnimationToView(viewToAnimate: UIView) {

    let easeInOutTiming = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

    let viewScaleXAnimation = CAKeyframeAnimation(keyPath: "transform.scale.x")
    viewScaleXAnimation.duration = 0.4
    viewScaleXAnimation.values = [1.0 as Float, 1.5 as Float, 0.5 as Float]
    viewScaleXAnimation.keyTimes = [0.0 as Float, 0.5 as Float, 1.0 as Float]
    viewScaleXAnimation.timingFunctions = [easeInOutTiming, easeInOutTiming]
    viewToAnimate.layer.addAnimation(viewScaleXAnimation, forKey:"Grow, Shrink and Fade out_ScaleX")

    let viewScaleYAnimation = CAKeyframeAnimation(keyPath: "transform.scale.y")
    viewScaleYAnimation.duration = 0.4
    viewScaleYAnimation.values = [1.0 as Float, 1.5 as Float, 0.5 as Float]
    viewScaleYAnimation.keyTimes = [0.0 as Float, 0.5 as Float, 1.0 as Float]
    viewScaleYAnimation.timingFunctions = [easeInOutTiming, easeInOutTiming]
    viewToAnimate.layer.addAnimation(viewScaleYAnimation, forKey:"Grow, Shrink and Fade out_ScaleY")

    let viewOpacityAnimation = CAKeyframeAnimation(keyPath: "opacity")
    viewOpacityAnimation.duration = 0.4
    viewOpacityAnimation.values = [1.0 as Float, 1.0 as Float, 0.0 as Float]
    viewOpacityAnimation.keyTimes = [0.0 as Float, 0.5 as Float, 1.0 as Float]
    viewOpacityAnimation.timingFunctions = [easeInOutTiming, easeInOutTiming]
    viewToAnimate.layer.addAnimation(viewOpacityAnimation, forKey:"Grow, Shrink and Fade out_Opacity")

}

Upvotes: 3

Manali
Manali

Reputation: 573

Is there a specific reason you want to use CA animations? I find manipulating constraints easier. I have added a button in storyboard and created outlets for the height and width constraints of the button.

@IBOutlet weak var okButton: UIButton!
@IBOutlet weak var widthConstraint: NSLayoutConstraint!
@IBOutlet weak var heightConstraint: NSLayoutConstraint!
var buttonWidth : CGFloat?
var buttonHeight : CGFloat?

override func viewDidLoad() {
    super.viewDidLoad()
    self.buttonHeight = self.heightConstraint.constant
    self.buttonWidth = self.widthConstraint.constant
}

@IBAction func okButtonTapped(button: UIButton) {
    let animationDuration = 2.0
    self.heightConstraint.constant = self.buttonWidth! * 2.0
    self.widthConstraint.constant = self.buttonHeight! * 2.0
    UIView.animateWithDuration(animationDuration, animations: {
       button.layoutIfNeeded()
    }) { (finished) in
            self.heightConstraint.constant = self.buttonWidth! * 0.5
            self.widthConstraint.constant = self.buttonHeight! * 0.5
            UIView.animateWithDuration(animationDuration, animations: {
                button.alpha = 0.0
                button.layoutIfNeeded()
                }, completion: { (finished) in
                   button.hidden = true
            })
    }
}

Upvotes: 1

Related Questions