Group Group Group Group Group Group Group Group Group

Interactive UIViewPropertyAnimator + UIView.transitions

#1

Hi,

There is an example in the book (Chapter 21, Built-in view transitions), on which a UIView.transition(with call is used inside a UIViewPropertyAnimator instance, but this doesn’t seem to work when trying to drive the interaction manually, the transition is executed immediately and doesn’t follow the fractionComplete of the animator.

What i want to achieve is to crossDissolve between two UIImage values in a UIImageView.

Something like:

I created an Xcode playground showing how i try to achieve this https://www.dropbox.com/s/ix8nfxg43ij68q3/UIViewPropertyAnimator.playground.zip?dl=0

#2

@fespinozacast Thanks very much for your question!

Here is my own personal source code from a test project I built myself not long ago that demonstrates how to use this feature:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!
let imageArray: [UIImage] = [#imageLiteral(resourceName: "kitten"), #imageLiteral(resourceName: "cat4"), #imageLiteral(resourceName: "cat5"), #imageLiteral(resourceName: "dog4"), #imageLiteral(resourceName: "dog5")]
var screenTimer = Timer()
var imageIndex: Int = 0

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.imageView.image = UIImage(named: "cat4.png")
    
}

override func viewDidAppear(_ animated: Bool) {
    screenTimer = Timer.scheduledTimer(timeInterval: 2.5, target: self, selector: #selector(imageTransition), userInfo: nil, repeats: true)
    imageTransition()
}

@objc func imageTransition() {
    
    if imageIndex == imageArray.count - 1 {
        imageIndex = 0
    }
    
    imageIndex += 1
    //let toImage = UIImage(named: "cat5.png")
    let toImage = imageArray[imageIndex]
    
    UIView.transition(with: self.imageView,
                      duration:0.75,
                      options: .transitionCrossDissolve,
                      animations: { self.imageView.image = toImage },
                      completion: nil)
}

}

I hope this helps!

All the best.

#3

thanks for your reponse @syedfa, but it’s not quite what i was wondering

I can do the transition with the effect i show, but the main problem is how to manually drive the transition, in this case with UIViewPropertyAnimator or something equivalent

closed #4

This topic was automatically closed after 166 days. New replies are no longer allowed.