UIButton Heartbeat Animation - swift

I've created a heart beat animation for a UIButton. However, there is no way to stop this animation as it's an endless code loop. After tinkering with numerous UIView animation code blocks I've been unable to get UIViewAnimationOptions.Repeat to produce what I need. If I could do that I could simply button.layer.removeAllAnimations() to remove the animations. What is a way to write this that allows for removal of the animation? I'm thinking a timer possibly but that could be kind of messy with multiple animations going on.
func heartBeatAnimation(button: UIButton) {
button.userInteractionEnabled = true
button.enabled = true
func animation1() {
UIView.animateWithDuration(0.5, delay: 0.0, options: [], animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(2.0, 2.0)
button.transform = CGAffineTransformIdentity
}, completion: nil)
UIView.animateWithDuration(0.5, delay: 0.5, options: [], animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(2.0, 2.0)
button.transform = CGAffineTransformIdentity
}) { (Bool) -> Void in
delay(2.0, closure: { () -> () in
animation2()
})
}
}
func animation2() {
UIView.animateWithDuration(0.5, delay: 0.0, options: [], animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(2.0, 2.0)
button.transform = CGAffineTransformIdentity
}, completion: nil)
UIView.animateWithDuration(0.5, delay: 0.5, options: [], animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(2.0, 2.0)
button.transform = CGAffineTransformIdentity
}) { (Bool) -> Void in
delay(2.0, closure: { () -> () in
animation1()
})
}
}
animation1()
}

This works perfectly. The damping and spring need to be tweaked a little bit but this solves the problem. removeAllAnimations() clears the animation and returns the button to it's normal state.
button.userInteractionEnabled = true
button.enabled = true
let pulse1 = CASpringAnimation(keyPath: "transform.scale")
pulse1.duration = 0.6
pulse1.fromValue = 1.0
pulse1.toValue = 1.12
pulse1.autoreverses = true
pulse1.repeatCount = 1
pulse1.initialVelocity = 0.5
pulse1.damping = 0.8
let animationGroup = CAAnimationGroup()
animationGroup.duration = 2.7
animationGroup.repeatCount = 1000
animationGroup.animations = [pulse1]
button.layer.addAnimation(animationGroup, forKey: "pulse")
This post was very helpful: CAKeyframeAnimation delay before repeating

Swift 5 code, works without the pause between pulses:
let pulse = CASpringAnimation(keyPath: "transform.scale")
pulse.duration = 0.4
pulse.fromValue = 1.0
pulse.toValue = 1.12
pulse.autoreverses = true
pulse.repeatCount = .infinity
pulse.initialVelocity = 0.5
pulse.damping = 0.8
switchButton.layer.add(pulse, forKey: nil)

I created something like this:
let animation = CAKeyframeAnimation(keyPath: "transform.scale")
animation.values = [1.0, 1.2, 1.0]
animation.keyTimes = [0, 0.5, 1]
animation.duration = 1.0
animation.repeatCount = Float.infinity
layer.add(animation, forKey: "pulse")

On your original question you mentioned that you want the animation to stop on command. I assume you would like it to start on command too. This solution will do both and it is quite simple.
func cutAnim(){
for view in animating {
///I use a UIView because I wanted the container of my button to be animated. UIButton will work just fine too.
(view.value as? UIView)?.layer.removeAllAnimations()
}
}
func pulse(button: UIButton, name: String){
///Here I capture that container
let container = button.superview?.superview
///Add to Dictionary
animating[name] = container
cutAnim()
UIView.animate(withDuration: 1, delay: 0.0, options:[UIViewAnimationOptions.repeat, UIViewAnimationOptions.autoreverse, .allowUserInteraction], animations: {
container?.transform = CGAffineTransform(scaleX: 1.15, y: 1.15)
///if you stop the animation half way it completes anyways so I want the container to go back to its original size
container?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
}, completion: nil)
}
Call cutAnim() anywhere to stop an animation, inside a timer if you want.
To start the animation use a regular button action
#IBAction func buttonWasTappedAction(_ sender: Any) {
pulse(button: sender as! UIButton, name: "nameForDictionary")
}
Hope this helps.

Related

How do you do successive animations?

I’m wanting to do successive animations, like one after another instead of on a loop or one at a time. What does it look like when coding that?
Example: fade in # 100% opacity, then fade out # 20% opacity, then fade in 80%, then fade out 10%... so like a pulsing then at 0% change the label text and do the inverse (basically the same as the picture only every time I try and make it progressively fade out- it disrupts the whole animation)
The gif shows it's current state, not what I've tried thus far that didnt work.
import UIKit
class Belief2ViewController: UIViewController {
#IBOutlet var negBeliefLabelGlower: UILabel!
#IBOutlet var posBeliefLabelGlower: UILabel!
#IBOutlet var labelNegBeliefFinal: UILabel!
#IBOutlet var startButton: UIButton!
//PASSING INFO
var negBeliefLabelGlowerText = String()
var posBeliefLabelGlowerText = String()
override func viewDidLoad() {
super.viewDidLoad()
//PASSING INFO
negBeliefLabelGlower.text = negBeliefLabelGlowerText
posBeliefLabelGlower.text = posBeliefLabelGlowerText
//PASSING INFO
labelNegBeliefFinal.text = negBeliefLabelGlowerText
//GLOW
labelNegBeliefFinal.UILableTextShadow(color: UIColor.systemTeal)
//AniamtionOpacityLOOP
labelNegBeliefFinal.alpha = 0.3
// UIView.animate(withDuration: 5, animations: {self.labelNegBeliefFinal.alpha = 100}, completion: { _ in self.labelNegBeliefFinal.alpha = 90;})
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.alpha = 100 })
//AnimationBreathSizeLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) })
}
#IBAction func startButtonPress(_ sender: Any) {
//self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
// UIView.animate(withDuration: 10, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText;})
UIView.animate(withDuration: 10, delay: 0, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in
self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText ;})
//
}
}
//GLOW
extension UILabel {
func UILableTextShadow1(color: UIColor){
textColor = UIColor.systemTeal
layer.shadowColor = UIColor.systemTeal.cgColor
layer.masksToBounds = false
layer.shadowOffset = .zero
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
layer.shadowRadius = 5.0
layer.shadowOpacity = 5.0
}
}
EDIT
Okay so using the keyframes as suggest was a perfect suggestion
but I am running into a bit of an issue. I cannot key in the label text to change
UIView.animateKeyframes(withDuration: 15.0,
delay: 0.0,
options: [],
animations: {
UIView.addKeyframe(withRelativeStartTime: 1,
relativeDuration: 0.0,
animations: { self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText })
},
completion: nil)
So I wasn't able to incorporate the label into the keyframe animation so I just set a delay to the bale changing and it took a little tweaking but here is what I came up with
//CHANGE LABEL ON TIMER
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 13.5)
{ [self] in
self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
}
Here is the glow loop and size loop as before, unrelated to the tween
//AniamtionGlowLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat],
animations: { self.labelNegBeliefFinal.layer.shadowOpacity = 5.0 })
//AnimationBreathSizeLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat],
animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX:
1.3, y: 1.3) })
// }
Here is the tween code I came up with thanks to Matt for the point in the right direction. Had no idea you could tween in SwiftUI. One thing that threw me off is that if the duration is 30sec, relative duration being set to 0.5 is equal to 15 seconds as it's 0.5 of 30 seconds. Some of my tweens didn't seem to work because I didn't realize that.
UIView.animateKeyframes(withDuration: 30.0,
delay: 0,
options: [ ],
animations: {
UIView.addKeyframe(withRelativeStartTime:
0,
relativeDuration: 0.5,
animations: { self.labelNegBeliefFinal.alpha = 0 })
UIView.addKeyframe(withRelativeStartTime:
0.5,
relativeDuration: 0.5,
animations: { self.labelNegBeliefFinal.alpha = 1 })
},
completion: nil)
}
}
Glow style I got from a different post
//GLOW
extension UILabel {
func UILableTextShadow1(color: UIColor){
textColor = UIColor.systemTeal
layer.shadowColor = UIColor.systemTeal.cgColor
layer.masksToBounds = false
layer.shadowOffset = .zero
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
layer.shadowRadius = 5.0
layer.shadowOpacity = 00.7
}
}

How to call a method only after another method completes in ViewDidLoad

I'm trying to make an app where at the start Object A begins to fades.
Immediately after Object A completely fades, I'd like Object B to begin to fade.
I tried putting the below code in the ViewDidLoad method but they both run at the same time. Any idea on how to make one run after the other starting after the initial load?
ObjectA.isHidden = false
UIView.animate(withDuration: 5.0, animations: { () -> Void in
self.Fader.alpha = 0
})
ObjectB.isHidden = false
UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.Intro.alpha = 0
})
You can nest them
UIView.animate(withDuration: 5.0, delay: 0.0, options: [.curveLinear,.allowUserInteraction], animations: {
self.fader.alpha = 0
}) { (fin) in
self.objectB.isHidden = false
UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.Intro.alpha = 0
})
}
Nesting an animation within the first animation's completion block is perfectly fine.
But for grouping multiple animations, it's worthwhile to consider CAAnimation Groups.
here's a ray wenderlich tutorial that goes through a simple CAAnimationGroup
Apple's documentation has a great example, but you MUST specify the beginTime for each animation (otherwise each animation will run at the same time):
let fadeOut = CABasicAnimation(keyPath: "opacity")
fadeOut.fromValue = 1
fadeOut.toValue = 0
fadeOut.duration = 1
fadeOut.beginTime = 0.0
let expandScale = CABasicAnimation()
expandScale.keyPath = "transform"
expandScale.valueFunction = CAValueFunction(name: kCAValueFunctionScale)
expandScale.fromValue = [1, 1, 1]
expandScale.toValue = [3, 3, 3]
expandScale.beginTime = fadeOut.beginTime + fadeOut.duration
let fadeAndScale = CAAnimationGroup()
fadeAndScale.animations = [fadeOut, expandScale]
fadeAndScale.duration = fadeOut.duration + expandScale.duration

Animate UIView with multiple rotations while translating up and down

I have a button called swirlButton that I'd like to have animate a jump up and down, and have it flip 3 times going up and 3 times back down. I'm using translatedBy to move it, and rotated to rotate it, although in this example I only have it animate part of a turn which goes back the other way when the animation finished.
First of all, I have no idea how to make it rotate more than once in the first place. For instance, I can't set the rotated(by:) value to .pi*3, because that seems just to equal 0 degrees and never animate. Same if I set it to .pi.
var transforms: CGAffineTransform = .identity
let jumpDuration:Double = 2.0 //0.8
let halfJumpDuration:Double = jumpDuration/2.0
UIView.animateKeyframes(withDuration: jumpDuration, delay: 0, options: [UIView.KeyframeAnimationOptions.calculationModeCubicPaced], animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: halfJumpDuration/jumpDuration, animations: {
transforms = transforms.translatedBy(x: 0, y: -60)
transforms = transforms.rotated(by: .pi/2)
swirlButton.transform = transforms
})
UIView.addKeyframe(withRelativeStartTime: halfJumpDuration/jumpDuration, relativeDuration: halfJumpDuration/jumpDuration, animations: {
transforms = .identity
transforms = transforms.translatedBy(x: 0, y: 0)
swirlButton.transform = transforms
})
},
completion: { _ in
print("animation finished")
})
Aside from going up and down, the rotation is very far from what I would like to happen. Is it difficult to make it spin counterclockwise 3 times going up and continue spinning counterclockwise 3 times going down?
I think it's easier to use CABasicAnimation for this.
Here's what I came up with:
func animateButton() {
swirlButton.layer.add(rotateAnimation(), forKey: nil)
CATransaction.begin()
let upAnimation = bounceAnimation()
CATransaction.setCompletionBlock{ () in
self.swirlButton.layer.add(self.bounceAnimation(animatingDown: true), forKey: nil)
}
swirlButton.layer.add(upAnimation, forKey: nil)
CATransaction.commit()
}
func rotateAnimation() -> CABasicAnimation {
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = 0
rotate.toValue = -6*CGFloat.pi
rotate.duration = 2
return rotate
}
func bounceAnimation(animatingDown: Bool = false) -> CABasicAnimation {
let buttonY = swirlButton.layer.position.y
let buttonX = swirlButton.layer.position.x
let translate = CABasicAnimation(keyPath: "position")
translate.fromValue = animatingDown ? [buttonX, buttonY - 200] : [buttonX, buttonY]
translate.toValue = animatingDown ? [buttonX, buttonY] : [buttonX, buttonY - 200]
translate.duration = 1
translate.fillMode = .forwards
translate.isRemovedOnCompletion = false
return translate
}
translate.fillMode = .forwards & translate.isRemovedOnCompletion = false is necesarry to prevent flicker in-between the animations and CATransaction allows us to set a completion block for when the first animation (up) finishes.

Swift, playing multiple animations consecutively from an array?

Sorry, I am new to swift. I can't get each animation to play consecutively and not all at once. I have tried using sleep(), but that then doesn't seem to allow the animation to play. This is how I find which animation to play.
for number in sequence {
switch number {
case 1:
print("blue")
animateB()
case 2:
print("green")
animateG()
case 3:
print("magenta")
animateM()
case 4:
print("orange")
animateO()
case 5:
print("yellow")
animateY()
case 6:
print("red")
animateR()
case 7:
print("purple")
animateP()
case 8:
print("cyan")
animateC()
default:
print("error")
}
}
And this is one of the functions i am using to animate. I realize this is probably very inefficient too, but wasn't sure how to make the function better.
private func animateB(){
let animation = CABasicAnimation(keyPath: "transform.scale")
animation.toValue = 1.3
animation.duration = 0.5
animation.autoreverses = true
self.pulsatingB.add(animation, forKey: "pulsing")
}
Any help would be great thanks. :)
You can use CATransaction to chain the CAAnimations:
class ViewController: UIViewController {
// The animations, to be applied in order
var animationQueue = [() -> Void]()
#IBAction func animate(_ sender: Any) {
animationQueue.removeAll()
// Build the animation queue
for number in sequence {
switch number {
case 1:
print("blue")
animationQueue.append(animateB)
case 2:
print("green")
animationQueue.append(animateG)
// ....
default:
break
}
}
// Start the animation
applyNextAnimation()
}
func applyNextAnimation() {
guard !animationQueue.isEmpty else { return }
let animation = animationQueue.removeFirst()
// When an animation completes, call this function again to apply the next animation
CATransaction.begin()
CATransaction.setCompletionBlock({ self.applyNextAnimation() })
animation()
CATransaction.commit()
}
}
For a sequence of animations, a block based keyframe animation can often do the job, too, e.g.:
UIView.animateKeyframes(withDuration: 4.0, delay: 0, options: .repeat, animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: {
self.subview.transform = .init(scaleX: 0.5, y: 0.5)
})
UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
self.subview.transform = .init(scaleX: 1.3, y: 1.3)
})
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25, animations: {
self.subview.transform = .init(scaleX: 0.75, y: 0.75)
})
UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25, animations: {
self.subview.transform = .identity
})
}, completion: nil)
Or, if you have an array of functions:
let animations = [animateA, animateB, animateC, animateD]
UIView.animateKeyframes(withDuration: 4.0, delay: 0, options: .repeat, animations: {
for (index, animation) in animations.enumerated() {
UIView.addKeyframe(withRelativeStartTime: Double(index) / Double(animations.count), relativeDuration: 1 / Double(animations.count), animations: {
animation()
})
}
}, completion: nil)
Where,
func animateA() {
subview.transform = .init(scaleX: 0.5, y: 0.5)
}
func animateB() {
subview.transform = .init(scaleX: 1.3, y: 1.3)
}
...

UIViewAnimationOptions.CurveEaseIn not working inside coordinated animation

I am in the middle of developing a tvOS application.
In my application I have a UICollectionView. On focus I am using a coordinated animation. Inside that animation I have this code:
UIView.animateWithDuration(1.0, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.bg.image = finalImage
self.bg.alpha = 1.0
}, completion: nil)
But it seems like its not using the curveEaseIn animation option.
Its changing the alpha bluntly, which is odd. Where I am going wrong?
Sorry. Forgot to post the answer.
I did animating the imageview in the completion of the coordinated animation like this
self.bg.alpha = 0.0
coordinator.addCoordinatedAnimations({ //code for coordinated animation}, completion: { _ in
UIView.animateWithDuration(1.0, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.bg.image = self.finalImage
self.bg.alpha = 1.0
}, completion: nil)})
What is the desired effect? Are you trying to cross fade bg.image with a new image? Have you tried changing the duration to something higher, for example 10.0, to see if the animation is perhaps happening too fast?
Here's an example of what you may be looking for:
let myImageView = UIImageView()
let myFinalImage = UIImage(named:"FinalImage.png")
// Animate alpha
UIView.animateWithDuration(1.0, delay: 0.0, options: .CurveEaseIn, animations: {
print("alpha animation started")
myImageView.alpha = 0.0
}) { (finished) in
print("alpha animation finished")
}
// Animate change of image
UIView.transitionWithView(myImageView, duration: 1.0, options: .TransitionCrossDissolve, animations: {
print("cross dissolve animation started")
myImageView.image = myFinalImage
}) { (finished) in
print("cross dissolve animation finished")
}
In Swift 4 or Swift 5 use: .curveEaseIn
UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseIn, animations: {
...
}) { (finished) in
...
}