Wie animiere ich die Breite einer UIView mit einem Timer?

Question

Ich habe eine Ansicht, die auf die Breite meiner Ansicht und einen Timer eingestellt ist, der in der Zukunft (in den nächsten 5 Minuten) einen Punkt bekommt. Mein Ziel ist es nach Ansicht der Breite von den view.width bis 0

ich zu animieren versuchten

UIView.animate(withDuration: date.timeIntervalSinceNow, delay: 0, options: .curveEaseIn, animations: { 
    self.countdownBar?.frame = CGRect(x: 0, y:self.view.frame.maxY - 3, width: 0, height: 3) 
}, completion: nil) 

Das war aber macht die countdownBar belebten von der Spitze der Ansicht zu tun bis es maxY Position - 3 eher als die Breite

Jede Hilfe wäre willkommen!

bearbeiten: Timer Code

self.timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(self.countdownToCartExpiration), userInfo: nil, repeats: true) 

Und in countdownToCartExpiration ich einige Änderungen an der Benutzeroberfläche in bestimmten Zeitabständen von Minuten und Sekunden

Answer 1

Sie entweder so etwas wie ein Timer oder einen UIViewAnimation verwenden sollten.

Wenn Sie die width im Laufe von 5 Minuten auf 0 animieren möchten, dann würden Sie so etwas tun.

var finalFrame = countdownBar!.frame 
finalFrame.size.width = 0 

UIView.animate(withDuration: 300, animations: { 
    self.countdownBar?.frame = finalFrame 
}) 

Dies setzt voraus, dass die Ansicht die volle Breite des Bildschirms ist und wird über 300 Sekunden auf Null animiert. Außerdem wird davon ausgegangen, dass Sie AutoLayout nicht zur Verwaltung Ihres Layouts verwenden. Wenn Sie Autolayout verwenden, müssen wir dies anpassen, um eine Abhängigkeit zu ändern, anstatt den Rahmen zu ändern.

aktualisieren

So, da Sie jede Sekunde einen Timer Brennen haben. Wir werden trotzdem wahrscheinlich animieren wollen. Wenn der Timer etwa alle 30 oder 60 Sekunden einer Sekunde zündete, dann konnten wir einfach den Rahmen anpassen und er würde glatt aussehen. Aber jede Sekunde wird abgehackt aussehen.

func countdownToCartExpiration (timer: Timer) { 

    guard let countdownBar = countdownBar else { 
     return 
    } 

    // Assuming you're already tracking currentTime somehow 
    currentTime += timer.timeInterval 

    var finalFrame = countdownBar.frame 
    let totalTime = 300.0 

    finalFrame.size.width = view.frame.width * CGFloat(currentTime/totalTime) 

    UIView.animate(withDuration: timer.timeInterval, delay: 0, options: [.beginFromCurrentState, .curveLinear], animations: { 
     countdownBar.frame = finalFrame 
    }, completion: nil) 

    // ... Other stuff 
} 

. beginFromCurrentState ist wichtig, wenn Animationen sich überlappen. .curveLinear ist hier wichtig, weil wir bei Animationen, die Rücken an Rücken laufen, die Geschwindigkeit konstant halten wollen.

Ich habe die Annahme gemacht, dass Sie currentTime verfolgen und die TotalTime für diese Animation beträgt 300 Sekunden. Aber du könntest dich offensichtlich anpassen. Das Ziel ist es, die Breite auf den Prozentsatz von currentTime aus TotalTime festzulegen.