Simple UIImage animation lags

Question

I am writing a simple app where the clouds move towards an airplane. The plane can be moved with the help of the slider. Since the time can be displayed via a label, the position of the plane always jumps back to default and it lags. Does anyone kindly have a tip for me? I can not find the error :(

Regards Philipp

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var slider: UISlider!
    
    @IBOutlet weak var Label2: UILabel!
    
    @IBOutlet weak var airplane: UIImageView!
    @IBOutlet weak var cloud1: UIImageView!
    
    let screenWidth = UIScreen.main.bounds.size.width
    
    override func viewDidLoad() {
        super.viewDidLoad()
        loop()
    }
    
    
    @IBAction func moveSlider(_ sender: UISlider) {
        let currentValue :Float = sender.value
        
        airplane.center.x = CGFloat(currentValue) * screenWidth

    }
        
    func loop() {
               
        let startDate = Date()
        
        Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true) { (aTimer) in
                       
            RunLoop.current.add(aTimer, forMode: .common)
            aTimer.tolerance = 0.1

            DispatchQueue.main.async {
                self.cloud1.frame.origin.y += 1.0
                self.Label2.text = String(format: "%.1f", aTimer.fireDate.timeIntervalSince(startDate))
            }
        }
    }
}

Demo: https://i.sstatic.net/7Y10G.jpg

Here my storyboard and constraints:

DonMag · Accepted Answer

The problem is that you have set a CenterX constraint for your Airplane image view, but then you are trying to move it by changing its frame.origin.x. So, every time the screen updates, auto-layout moves that image view back to its CenterX constraint position.

You will want to add an @IBOutlet for that CenterX constraint, and then update its .constant value to move it.

Here's how it should look (just the slider and airplane image view):

If you look where Airplane CenterX is listed in the constraints, that's the imageView constrained horizontally to the slider (centerX to centerX).

This is how the view controller class looks:

class MovePlaneViewController: UIViewController {

    @IBOutlet var slider: UISlider!
    @IBOutlet var airplane: UIImageView!
    
    @IBOutlet var airplaneCenterX: NSLayoutConstraint!

    var sliderInnerWidth: CGFloat = 0

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // because the slider Thumb goes edge-to-edge
        //  we only want to use the ThumbCenter-to-ThumbCenter range
        //  for later positioning
        let trackRect = slider.trackRect(forBounds: slider.bounds)
        let thumbRect = slider.thumbRect(forBounds: slider.bounds, trackRect: trackRect, value: 0)
        sliderInnerWidth = slider.frame.width - thumbRect.size.width
        
        // call your loop func here
        //loop()
    }

    @IBAction func moveSlider(_ sender: UISlider) {
        let currentValue: CGFloat = CGFloat(sender.value)
        
        var xOffset: CGFloat = sliderInnerWidth * currentValue
        // this will make the offset
        //  less-than Zero if slider is less-than 50%
        //  greater-than Zero if slider is greater-than 50%
        xOffset -= sliderInnerWidth / 2.0
        
        // update the airplane's centerX constant
        airplaneCenterX.constant = xOffset
        
    }

}

Here's the Storyboard source, so you can try it out easily (and then implement it with the rest of your code and UI elements):

Simple UIImage animation lags

Answers (1)

Related Questions