CODEWITHSUNDEEP
iosswift3uiimagexcode8uiviewanimation
olbanana
olbanana

Reputation: 87

How to add fade to an animating image set in Swift 3?

I have set up a couple of images that I need to automatically transition to the other and up till that point everything works great. Here is my code:

image1 = UIImage(named: "loginBg1.png")
image2 = UIImage(named: "loginBg2.png")

images = [image1, image2]
animatedImage = UIImage.animatedImage(with: images, duration: 3)
backgroundImageView.image = animatedImage

Now the thing is, I need them to fade when they transition. Basically I need to add a fade transition in between of the animation.

Also, if you have the experience I want to add a ken burns effect to the images as in it should pan/zoom on each image before transition and after.

Upvotes: 0

Views: 1063

Answers (2)

JB288
JB288

Reputation: 96

Here is a function that will fade out the current image and fade in a new image.

extension UIImageView{
    func transition(toImage: UIImage, withDuration duration: TimeInterval){
        UIView.animate(withDuration: duration, animations: {
            self.alpha = 0
        }) { (bool) in

            UIView.animate(withDuration: duration, animations: {
                self.image = toImage
                self.alpha = 1
            }, completion: nil)
        }
    }
}

The Ken Burns effect is more difficult. I suggest using a pod like this one: https://github.com/jberlana/JBKenBurns

Update:

Call the function like this:

let transitionToImage = UIImage.init(named: "newImage")! //newImage is the name of the Image Set in xcassets

let duration: TimeInterval = 1 //seconds, can also be fractions, i.e. 0.3, 0.5
imageView.transition(toImage: transitionToImage, withDuration: duration)

Upvotes: 0

David Lari
David Lari

Reputation: 943

Animating an image is not the same thing as transitioning. What you actually want to do is add an animation to the transition of displaying the second image. You do that with CATransition().

Check this answer for code: https://stackoverflow.com/a/9773674/2584110

Also, if you want a canned solution, try this github library: https://github.com/calm/KenBurns

It is a transition with Ken Burns effect.

Upvotes: 1

Related Questions