I have 3 UIButtons in a UIView that have the same text colour and the same background colour. On tap all three of them fire their corresponding event. But only one of them "blinks" in response to the touch. What can be happening with the other two? They sometimes (but rarely) have the "blink" behaviour, but the touch up inside event is always fired on tap.
The buttons are added in storyboard:
func btnFlash_Clicked(sender: AnyObject) {
if !flashing{
callButton.alpha = 1.0
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.allowUserInteraction], animations: {() -> Void in
callButton.alpha = 0.5
}, completion: {(finished: Bool) -> Void in
})
flashing = true
} else{
flashing = false
callButton.alpha = 0.5
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.allowUserInteraction], animations: {() -> Void in
callButton.alpha = 1.0
}, completion: {(finished: Bool) -> Void in
})
I would setup the button type to UIButtonTypeCustom to stop blinking.
Related
I need to animate a UIViews inside stackView like this.
This image is a gif 👆🏻 (click to show)
I create an UIView Extension like this
func fadeIn(duration: TimeInterval = 1.5, delay: TimeInterval = 0.0, completion: #escaping ((Bool) -> Void) = {(_: Bool) -> Void in }) {
self.alpha = 0.0
UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: {
self.isHidden = false
self.alpha = 1.0
}, completion: completion)
}
And for each UIView inside the StackView assigned the animation like this
stackView.subviews.forEach { currentView in
currentView.fadeIn()
}
but all views appear at the same time. I try to add a delay time but doesn't work correctly. Any idea how to fix?
You can try
stackView.arrangedSubviews.enumerated().forEach { (index,item) in
item.fadeIn(delay:Double(index)*1.5)
}
with
func fadeIn(duration: TimeInterval = 1.5, delay: TimeInterval = 0.0, completion: #escaping ((Bool) -> Void) = {(_: Bool) -> Void in }) {
self.alpha = 0.0
UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: {
self.isHidden = false
self.alpha = 1.0
}, completion: completion)
}
I have below code for changing the value of object like text,image , ... with Effect. and it work:
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseOut, animations: {
self.lblCityTemp.alpha = 0.0
self.imgCityIcon.alpha = 0.0
}, completion: {
(finished: Bool) -> Void in
//Once the label is completely invisible, set the text and fade it back in
self.imgCityIcon.image = UIImage(named: icon)
self.lblCityTemp.text = "\(temp)°"
// Fade in
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: {
self.lblCityTemp.alpha = 1.0
self.imgCityIcon.alpha = 1.0
}, completion: nil)
})
Now I want make a extension of this code that I use for all my object that I write below code:
extension NSObject {
func Fade (alphaOUT: Double,alphaIN: Double, input: Any) {
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseOut, animations: {
self.alpha = CGFloat(alphaOUT)
}, completion: {
(finished: Bool) -> Void in
// Fade in
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: {
self.alpha = CGFloat(alphaIN)
}, completion: nil)
})
}
}
But I have error on self word and I do not know how can I set value for every object like label, imageView , ....
How can I do this?
Is the extension is best way or no?
If no, so what is the best way?
The whole idea should be take some UIView and animate it. Then you need extension of UIView since this class has properties that you need to.
extension UIView { ... }
Anyway, what now if you need to do something when animation ends? Then you'll need completion handler parameter for your method
func fade(..., completion: #escaping () -> Void = { }) {
... which will be called after the first animation ends.
Next suggestions:
You can say that alpha parameters should be of type CGFloat, then you don’t have to convert Double to CGFloat
Also, what is input? I think you won't need it with this solution
Method name should start with small capital letter and for naming parameters you should use camelCase
extension UIView {
func fade(alphaOut: CGFloat, alphaIn: CGFloat, completion: #escaping () -> Void = { }) {
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
self.alpha = alphaOut
}, completion: { _ in
completion() // this is called when animation ends
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseIn, animations: {
self.alpha = alphaIn
})
})
}
}
Then when you need to call it, change what you need after animation ends in completion closure
imgCityIcon.fade(alphaOut: ___, alphaIn: ___) {
self.imgCityIcon.image = UIImage(named: icon)
}
Note that you're using old syntax for some stuff:
For example UIViewAnimationOptions.curveEaseIn has been renamed to UIView.AnimationOptions.curveEaseIn. I would suggest you to start using newer versions of Swift
You need to implement an extension for UIView instead of NSObject.
since NSObject doesn't have any property like alpha you will get an
error.
Coding Example:
extension UIView {
func Fade (alphaOUT: Double,alphaIN: Double, input: Any) {
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseOut, animations: {
self.alpha = CGFloat(alphaOUT)
}, completion: {
(finished: Bool) -> Void in
// Fade in
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseIn, animations: {
self.alpha = CGFloat(alphaIN)
}, completion: nil)
})
}
}
class AnimationHelper {
class func Fade (alphaOUT: Double,alphaIN: Double, input: Any , yourLabel: UILabel, yourTextField: UITextField) {
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseOut, animations: {
yourLabel.alpha = CGFloat(alphaOUT)
yourTextField.alpha = CGFloat(alphaOUT)
}, completion: {
(finished: Bool) -> Void in
// Fade in
UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseIn, animations: {
// Access your text field and label here.
}, completion: nil)
})
}
}
I have a logoImage on a view, animating the constraints.
The constraints animated are width and height ; going from original state of 220.0 to 240.0 (works fine) and THEN I would like to make it go back to 220.0 but the animation is skipped and the image goes directly back in 0.1second to 220.0.
Here is the code of the animation
func animate() {
self.imageHeightConstraint.constant = 240.0
self.imageWidthConstraint.constant = 240.0
UIView.animate(withDuration: 1.0,
delay:0.0,
options: .curveEaseIn,
animations:{
self.logoImage.layoutIfNeeded()
}, completion: { (finished: Bool) -> Void in
self.imageHeightConstraint.constant = 220.0
self.imageWidthConstraint.constant = 220.0
UIView.animate(withDuration: 2.0,
delay:0.0,
options: .curveEaseIn,
animations: {
self.logoImage.layoutIfNeeded()
})
})
}
Thanks in advance for any help I could get! ;-)
You need to call self.logoImage.setNeedsLayout() within your completion block, before you re-set the constants. This since you need to invalidate the current layout of the receiver and trigger a layout update during the next update cycle.
Try this code instead and it will work for you:
func animate() {
self.imageHeightConstraint.constant = 240.0
self.imageWidthConstraint.constant = 240.0
UIView.animate(withDuration: 1.0,
delay:0.0,
options: .curveEaseIn,
animations:{
self.logoImage.layoutIfNeeded()
}, completion: { (finished: Bool) -> Void in
self.logoImage.setNeedsLayout()
self.imageHeightConstraint.constant = 220.0
self.imageWidthConstraint.constant = 220.0
UIView.animate(withDuration: 2.0,
delay:0.0,
options: .curveEaseIn,
animations: {
self.logoImage.layoutIfNeeded()
})
})
}
I have a UIButton in my application with an image.
I want to be able to call a function that flashes that button a number of times ( say 5 times)
I also want to be able to stop this flashing while it is running
Below is the important part of the code:
var flashesRemaining: Int = 5;
var isFlashing: Bool = false
#IBOutlet weak var btnMM: UIButton!
// Flash the button
#IBAction func flashMemoryButton(sender: AnyObject) {
print(self.flashesRemaining)
if self.flashesRemaining == 0 {
return
}
if !isFlashing {
self.btnMM.alpha = 1.0
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseInOut, .repeat, .autoreverse, .allowUserInteraction], animations: {() -> Void in
self.btnMM.alpha = 0.0100000003
}, completion: {(finished: Bool) -> Void in })
isFlashing = true
}
else {
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.curveEaseInOut, .beginFromCurrentState], animations: {() -> Void in
self.btnMM.alpha = 1.0
}, completion: {(finished: Bool) -> Void in })
}
self.flashesRemaining = self.flashesRemaining - 1
}
So I want to be able to call the above function like this, to start the flashing:
self.flashesRemaining = 5
self.flashMemoryButton(sender: self.btnMM)
and then if I want to disable the blinking I should just call:
self.flashesRemaining = 0
However the above code is not working at all. Once I call
self.flashMemoryButton(sender: self.btnMM)
I get the printout 5 and then the button keeps blinking for ever.
What am I missing here?
By the way the magical number 0.0100...3 is the minimum allowed alpha for a UIButton while maintaining user interactivity.
Here's the working code:
func flashMemoryButton() {
print(self.flashesRemaining)
if self.flashesRemaining == 0 {
btnMM.alpha = 1
return
}
if !isFlashing {
self.btnMM.alpha = 1.0
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseInOut, .allowUserInteraction], animations: {() -> Void in
self.btnMM.alpha = 0.0100000003
}, completion: {(finished: Bool) -> Void in
if finished {
self.flashMemoryButton()
self.flashesRemaining = self.flashesRemaining - 1
}
})
isFlashing = true
}
else {
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.curveEaseInOut, .beginFromCurrentState], animations: {() -> Void in
self.btnMM.alpha = 1.0
}, completion: {(finished: Bool) -> Void in
if finished {
self.flashMemoryButton()
}
})
isFlashing = false
}
}
Here's the changes I've made:
First, I removed .repeat and .autoreverse. This is because instead of the animation repeating itself, we want the flashMemoryButton method to be called multiple times.
Next, I added isFlashing = false in the else branch. This is so that when isFlashing is true, the button fades in the next time the method is called, and when isFlashing is false, the button fades out. You can think of isFlashing like a toggle.
When the fade in/out animations finish, I called flashMemoryButton() because when the animation finishes, you want to do another animation, right?
In the completion handler of the fade out animation, I decremented flashesRemaining. This is where you want to decrement it, not outside the if statement. If you put it outside, it will flash half the times you told it to.
You could use UIView.setAnimationRepeatCount; therefore you dont need flashesRemaining any more. You should also re-set the isFlashing-flag in the completion handler. Here my modified code:
var isFlashing: Bool = false
#IBOutlet weak var btnMM: UIButton!
#IBAction func flashMemoryButton(sender: AnyObject) {
if !isFlashing {
self.btnMM.alpha = 1.0
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseInOut, .repeat, .autoreverse, .allowUserInteraction], animations: {() -> Void in
UIView.setAnimationRepeatCount(5)
self.btnMM.alpha = 0.0100000003
}, completion: {(finished: Bool) -> Void in
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.curveEaseInOut, .beginFromCurrentState], animations: {() -> Void in
self.btnMM.alpha = 1.0
}, completion: {(finished: Bool) -> Void in self.isFlashing = false})
})
isFlashing = true
}
else {
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.curveEaseInOut, .beginFromCurrentState], animations: {() -> Void in
self.btnMM.alpha = 1.0
}, completion: {(finished: Bool) -> Void in self.isFlashing = false})
}
}
I am looking to make a label fade in, in viewDidLoad(), and then after a timer is at 3 fade out. I am not familiar with the fadein or fadeout functions.
How would I go about doing this?
My suggestion is to leverage Swift extensions to make the code a bit more modular and easy to use. For example, if you want to make multiple labels fadein/out or one label to fade in/out on multiple views, you would have to pass the animateWithDuration methods everywhere, which can be a hassle. A cleaner alternative is to create a file called UIView.swift (our UIView extension). Add the following code to this file:
import Foundation
extension UIView {
func fadeIn(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.alpha = 1.0
}, completion: completion) }
func fadeOut(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 3.0, completion: (Bool) -> Void = {(finished: Bool) -> Void in}) {
UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.alpha = 0.0
}, completion: completion)
}
}
Now you can add fadeIn/fadeout functionality to any child of UIView (e.g., UILabel, UIImage, etc). Inside of your viewDidLoad() function, you can add :
self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
(finished: Bool) -> Void in
self.myLabel.fadeOut()
})
Now, you can use this sample code for Image views, labels, text views, scroll views, or any child of UIView as well. I hope this helps.
Even though the view has loaded, it may not be visible to the user when viewDidLoad is called. This means you might find your animations appears to have already started when you witness it. To overcome this issue, you'll want to start your animation in viewDidAppear instead.
As for the fadeIn and fadeOut functions - they don't exist. You'll need to write them yourself. Thankfully, it's very easy to do this. Something like the below might be good enough.
func fadeViewInThenOut(view : UIView, delay: NSTimeInterval) {
let animationDuration = 0.25
// Fade in the view
UIView.animateWithDuration(animationDuration, animations: { () -> Void in
view.alpha = 1
}) { (Bool) -> Void in
// After the animation completes, fade out the view after a delay
UIView.animateWithDuration(animationDuration, delay: delay, options: .CurveEaseInOut, animations: { () -> Void in
view.alpha = 0
},
completion: nil)
}
}
Answer updated for Swift 3 - Using extension
extension UIView {
func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: #escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
self.alpha = 1.0
}, completion: completion)
}
func fadeOut(duration: TimeInterval = 1.0, delay: TimeInterval = 3.0, completion: #escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
self.alpha = 0.0
}, completion: completion)
}
}
Usage:
self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
(finished: Bool) -> Void in
self.myLabel.fadeOut()
})
Update Swift 3.1 - on #Andy code
func fadeViewInThenOut(view : UIView, delay: TimeInterval) {
let animationDuration = 0.25
// Fade in the view
UIView.animate(withDuration: animationDuration, animations: { () -> Void in
view.alpha = 1
}) { (Bool) -> Void in
// After the animation completes, fade out the view after a delay
UIView.animate(withDuration: animationDuration, delay: delay, options: [.curveEaseOut], animations: { () -> Void in
view.alpha = 0
}, completion: nil)
}
}
Swift 5
This worked well for me. I placed the label inside the "cardHeaderView".
#IBOutlet weak var cardHeaderView: UIView!
Place this inside the "viewDidAppear". I went with a delay of zero so the animation would start right away.
fadeViewInThenOut(view: cardHeaderView, delay: 0)
Here is the function.
func fadeViewInThenOut(view : UIView, delay: TimeInterval) {
let animationDuration = 1.5
UIView.animate(withDuration: animationDuration, delay: delay, options: [UIView.AnimationOptions.autoreverse, UIView.AnimationOptions.repeat], animations: {
view.alpha = 0
}, completion: nil)
}
SWIFT 4.2
extension UIView {
func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: #escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
self.alpha = 1.0
}, completion: completion)
}
func fadeOut(duration: TimeInterval = 1.0, delay: TimeInterval = 3.0, completion: #escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
self.alpha = 0.0
}, completion: completion)
}
}