Lawrence413 Lawrence413 - 3 months ago 34
Swift Question

CABasicAnimation chaining not working

I am having difficulties chaining multiple

CABasicAnimation
s. 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")

Answer

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

I tried to used 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.400
    viewScaleXAnimation.values = [1.000 as Float, 1.500 as Float, 0.500 as Float]
    viewScaleXAnimation.keyTimes = [0.000 as Float, 0.500 as Float, 1.000 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.400
    viewScaleYAnimation.values = [1.000 as Float, 1.500 as Float, 0.500 as Float]
    viewScaleYAnimation.keyTimes = [0.000 as Float, 0.500 as Float, 1.000 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.400
    viewOpacityAnimation.values = [1.000 as Float, 1.000 as Float, 0.000 as Float]
    viewOpacityAnimation.keyTimes = [0.000 as Float, 0.500 as Float, 1.000 as Float]
    viewOpacityAnimation.timingFunctions = [easeInOutTiming, easeInOutTiming]
    viewToAnimate.layer.addAnimation(viewOpacityAnimation, forKey:"Grow, Shrink and Fade out_Opacity")

}
Comments