CODEWITHSUNDEEP
iosanimationswiftfadeinfadeout
PlugInBoy
PlugInBoy

Reputation: 989

Fade In and Fade out in Animation Swift

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
        }

Upvotes: 25

Views: 47953

Answers (5)

some dude
some dude

Reputation: 11

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
        }
    }
}

Upvotes: 0

Bill
Bill

Reputation: 157

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)

}

Upvotes: 3

AntiStrike12
AntiStrike12

Reputation: 774

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

  1. Go to your UIImageView, and under the Attributes, check the "User Interaction Enabled" checkbox.

  2. Drag a TapGestureRecognizer on top of the image view.

  3. Control click on the Tap Gesture and drag to make a action on your ViewControler.swift.

  4. 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!

Upvotes: 56

August Lin
August Lin

Reputation: 1279

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!"
})

Upvotes: 14

Olga Konoreva
Olga Konoreva

Reputation: 1428

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.

Upvotes: 12

Related Questions