Fade In and Fade out in Animation Swift

Question

I have an UIImageView with an Animation and, in the UIView, I apply a fadeIn effect, but I need to apply fade out when the UIImageView, which is animated, when is touched.

This is what I make to fade in.

UIView.animateWithDuration(0.5, delay: delay, 
    options: UIViewAnimationOptions.CurveEaseOut, animations: {
        uiImageView.alpha = 1.0
        }

Is your problem that you can't get the image view to fade out if you trigger it during the fade in animation? — Ben Kane, Feb 02 '15 at 23:05

score 56 · Accepted Answer · edited Jun 29 '19 at 12:34

56

This is what I would do based on my research: (Supposing you're using storyboard)

Go to your UIImageView, and under the Attributes, check the "User Interaction Enabled" checkbox.
Drag a TapGestureRecognizer on top of the image view.
Control click on the Tap Gesture and drag to make a action on your ViewControler.swift.

Add the following code inside:

UIView.animate(withDuration: 0.5, delay: 0.5, options: .curveEaseOut, animations: {
    self.uiImageView.alpha = 0.0
}, completion: nil)

Then you're done!

edited Jun 29 '19 at 12:34

Karen Hovhannisyan

1,140
2
21
31

answered Feb 03 '15 at 00:24

AntiStrike12

774
6
8

What value I need in delay? – PlugInBoy Feb 03 '15 at 08:56
@PlugInBoy I edited the block of code in my answer. That should work fine. – AntiStrike12 Feb 03 '15 at 13:14

score 14 · Answer 2 · edited May 03 '18 at 06:07

Swift 4 . Add fade in and fade out function to UIView object

extension UIView {

    func fadeIn(_ duration: TimeInterval = 0.5, 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 = 0.5, delay: TimeInterval = 1.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 0.3
    }, completion: completion)
   }
}

Example

label.fadeIn()

label.fadeOut()

imageView.fadeOut(completion: {
    (finished: Bool) -> Void in
    imageView.removeFromSuperview()
})

label.fadeIn(completion: {
    (finished: Bool) -> Void in
    label.text = "Changed!"
})

Thanks for sharing this. UIViewAnimationOptions is now UIView.Animation Options — Ben, Feb 05 '19 at 20:44

score 12 · Answer 3 · answered Jul 06 '17 at 12:25

Starting from iOS 10 Apple launched new iOS Animations SDK that is much more powerful, especially concerning timings functions and interactivity.

Fade out code with this approach will:

UIViewPropertyAnimator(duration: 0.5, curve: .easeOut, animations: {
    self.uiImageView.alpha = 0.0
}).startAnimation()

To get more details about the Property Animator, take a look at iOS 10 Animations demo.

score 2 · Answer 4 · answered Jul 10 '19 at 03:07

Swift 5

This worked well for me. I wanted to animate a label with a continues fade in / fade out. 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)

}

some dude · Answer 5 · 2022-10-31T18:32:31.373

Here's my solution for a 2 second fade in, 2 second pause, 2 second fade out and repeat.

func startAnimation() {
     UIView.animateKeyframes(withDuration: 6.0,
                                    delay: 0,
                                    options: [.repeat, .autoreverse, .calculationModeLinear]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.165) { [weak self] in
            self?.view1.alpha = 0.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.165, relativeDuration: 0.165) { [weak self] in
            self?.view2.alpha = 1.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.66, relativeDuration: 0.165) { [weak self] in
            self?.view2.alpha = 0.0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.825, relativeDuration: 0.165) { [weak self] in
            self?.view1.alpha = 1.0
        }
    }
}

Fade In and Fade out in Animation Swift

5 Answers5