I am trying to animate a simple Loading label text to show 3 dots after it, with each dot having a second of delay.
Here is what i tried:
func animateLoading() {
UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor."}, completion: { _ in
UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor.."}, completion: { _ in
UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor..."})
})
})
}
But what i got is the all 3 dots appear in 1 second alltogether. Not in order. See here: https://streamable.com/yiz6s
What am i doing wrong with the chaining? Thanks in advance.
UIView animate is only for animatable view properties such as frame and background color. self.yukleniyorLabel.text is not an animatable property. So you get no animation.
Just use a Timer or delayed performance to change the text at time intervals.
You can use the scheduled Timer for showing text with three dots on the label with animation: ->
var i = 0
var timer : Timer?
loaderLabel.text = "Loading"
timer = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector:#selector(ViewController.setText), userInfo: nil, repeats: true)
#objc func setText() {
loaderLabel.text = loaderLabel.text! + "."
i += 1
if i >= 3 {
timer?.invalidate()
}
}
output with animation: -> Loading...
Related
Background
Thanks to the excellent answer here, I've managed to make a series of labels fade in sequentially.
However, the delay referred to in the function in the extension only triggers when the previous fade has completed (I think) so there is at least 1 second between them. Ideally I want to edit the model so that the delay refers to from the time the view loads, not the time the previous one has completed.
i.e. If I make the delay quite small, the second one would start fading in before the first one had finished.
This is the extension :
extension UIView {
func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: ((Bool)->())? = nil) {
self.alpha = 0.0
UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
self.alpha = 1.0
}, completion: completion)
}
}
and this is my implementation on a VC with 6 labels :
func animateLabels() {
self.titleOutlet.alpha = 0.0
self.line1Outlet.alpha = 0.0
self.line2Outlet.alpha = 0.0
self.line3Outlet.alpha = 0.0
self.line4Outlet.alpha = 0.0
self.line5Outlet.alpha = 0.0
self.line6Outlet.alpha = 0.0
self.titleOutlet.fadeIn(delay: 0.2, completion: { _ in
self.line1Outlet.fadeIn(delay: 0.4, completion: { _ in
self.line2Outlet.fadeIn(delay: 0.6, completion: { _ in
self.line3Outlet.fadeIn(delay: 0.8, completion: { _ in
self.line4Outlet.fadeIn(delay: 1.0, completion: { _ in
self.line5Outlet.fadeIn(delay: 1.2, completion: { _ in
self.line6Outlet.fadeIn(delay: 1.4, completion: { _ in
})})})})})})})
}
What am I trying to get to?
So what I'm trying to get to is having line2outlet start to fade 0.4 seconds after the load of the page but it is starting only when line1 has finished fading in (which takes 1 second and is delayed by 0.2s).
What have I tried?
I have attempted to write my own delay function after reading up. I tried adding this to the extension :
func delay(interval: TimeInterval, closure: #escaping () -> Void) {
DispatchQueue.main.asyncAfter(deadline: .now() + interval) {
closure()
}
}
and implementing like this :
self.line1Outlet.fadeIn(delay: 0, completion: { _ in
delay(interval: 1, closure: ()->Void)
but that got loads of errors! I also tried setting minus numbers for the delays but that didn't work either.
Any help much appreciated!
One possible solution that I have used before is to use a loop with an incrementing delay variable feeding into the standard UIView.animate() method. This method does not use completion handlers.
Make an array of the labels:
var labels = [titleOutlet, line1Outlet] // etc...
Use this extension:
extension UIView {
func fadeIn(duration: TimeInterval = 1, delay: TimeInterval = 0) {
self.alpha = 0
UIView.animate(withDuration: duration, delay: delay, options: [], animations: { self.alpha = 1 }, completion: nil)
}
}
Then use it like this:
var delay = 0.2
var duration = 0.5
for label in labels {
label.fadeIn(duration: duration, delay: delay)
delay += 0.2 // Increment delay
}
I'd like to reproduce the behavior of WhatsApp buttons on the ongoing call view: they disappear a few seconds after appearing, and every time the user taps the screen, they appear again.
Let's say I have those two buttons,
#IBOutlet weak var callButton: UIButton!
#IBOutlet weak var muteButton: UIButton!
This is the snippet called when viewDidAppear is entered as well as when the user taps the screen:
self.callButton.alpha = 1.0
self.muteButton.alpha = 1.0
delay(4.0) {
UIView.animate(withDuration: 1.0, animations: {
self.callButton.alpha = 0.0
self.muteButton.alpha = 0.0
}, completion: { _ in })
}
func delay(_ seconds: Double, completion: #escaping () -> ()) {
let popTime = DispatchTime.now() + Double(Int64(Double(NSEC_PER_SEC) * seconds)) / Double(NSEC_PER_SEC)
DispatchQueue.main.asyncAfter(deadline: popTime) {
completion()
}
}
With this code, if the user taps the screen like 3 seconds after the previous call, the buttons will still disappear 1 second later. So I would like to know how I can block the previous UIView.animate if the view is tapped again meanwhile.
Thanks for your help
First of all, why are you creating a delay method when one has been provided to you in UIView.animate by Apple?
Now, to achieve what you want, just use a flag to check if the method has been called once already and prevent the method call.
var animating = false
func yourAnimateMethod() {
if !animating {
animating = true
UIView.animate(withDuration: 1, delay: 4, options: .curveLinear, animations: {
self.callButton.alpha = 0.0
self.muteButton.alpha = 0.0
}) { (completed) in
if completed {
animating = false
}
}
}
}
With great help from the community I made an zoom in-and-out animation of a button image. The problem is, after the first run the button is disabled and wont work again before the app is relaunched. What I want is that after the button is clicked and the animation is finished it goes back to the starting point, and you can click it again. Anybody here that can help me with that?
#IBAction func coffeeButton(sender: UIButton) {
var timer = NSTimer.scheduledTimerWithTimeInterval(5, target: self, selector: "stopButtonAnimation", userInfo: nil, repeats: false)
let options = UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat | UIViewAnimationOptions.CurveEaseInOut
UIView.animateWithDuration(0.5, delay: 0, options: options, animations: {
self.button.transform = CGAffineTransformMakeScale(0.5, 0.5)
}, completion: nil)
}
func stopButtonAnimation(){
button.layer.removeAllAnimations()
}
Corrected your stopButtonAnimation function.
What applying transform does is setting the scale of your button to it's original value, so you are able to see your animation again.
func stopButtonAnimation(){
button.layer.removeAllAnimations()
button.layer.transform = CATransform3DIdentity
}
Animation in your original code was stopped at the scale value of 0.5 so next time you click the button you just don't see it (because it had been animating scale from 0.5 to 0.5).
I have a UISlider and I want to set its value from 1 to 10. The code I use is.
let slider = UISlider()
slider.value = 1.0
// This works I know that
slider.value = 10.0
What I want to do is animate the UISlider so that it takes 0.5s to change. I don't want it to be as jumpy more smooth.
My idea so far is.
let slider = UISlider()
slider.value = 1.0
// This works I know that
UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseInOut, animation: { slider.value = 10.0 } completion: nil)
I am looking for the solution in Swift.
EDITED
After some discussion, I thought I'd clarify the differences between the two suggested solutions:
Using the built-in UISlider method .setValue(10.0, animated: true).
Encapsulating this method in a UIView.animateWithDuration.
Since the author is asking explicitly for a change that will take 0.5s---possibly triggered by another action---the second solution is to prefer.
As an example, consider that a button is connected to an action that sets the slider to its maximum value.
#IBOutlet weak var slider: UISlider!
#IBAction func buttonAction(sender: AnyObject) {
// Method 1: no animation in this context
slider.setValue(10.0, animated: true)
// Method 2: animates the transition, ok!
UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseInOut, animations: {
self.slider.setValue(10.0, animated: true) },
completion: nil)
}
Running a simple single UIVIewController app with just the UISlider and UIButton objects present yields the following results.
Method 1: Instant slide (even though animated: true)
Method 2: Animates transition. Note that if we set animated: false in this context, the transition will be instantaneous.
the problem with #dfri's answer is that the blue Minimum Tracker is moving from 100% to the value, so in order to solve that, you need to change the method a little bit:
extension UISlider
{
///EZSE: Slider moving to value with animation duration
public func setValue(value: Float, duration: Double) {
UIView.animateWithDuration(duration, animations: { () -> Void in
self.setValue(self.value, animated: true)
}) { (bol) -> Void in
UIView.animateWithDuration(duration, animations: { () -> Void in
self.setValue(value, animated: true)
}, completion: nil)
}
}
}
I have an Array words containing ["alice", "bob", "charles"] and a UILabel label. I want label to repeatedly fade in and out, with a different word from words each time. If I put the text-changing code inside the animations block, it doesn’t execute, even though the fading works as expected (the completion block is run only when something stops the repetition):
label.alpha = 0
UIView.animateWithDuration(4, delay: 0, options: .Autoreverse | .Repeat, animations: {
self.label.text = nextWord()
self.label.alpha = 1
}, completion: {_ in
NSLog("Completed animation")
})
What’s a good way to fix this? Thanks.
surely not the most elegant but working solution:
#IBOutlet weak var label: UILabel!
let words = ["Is", "this", "what", "you", "want?"]
var currentIndex = -1
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
showNextWord()
}
func showNextWord() {
if currentIndex == words.count - 1 {
currentIndex = -1
}
UIView.animateWithDuration(1, delay: 1, options: UIViewAnimationOptions(0), animations: { () -> Void in
self.label.alpha = 0.0
}) { (_) -> Void in
self.label.text = self.words[++self.currentIndex]
UIView.animateWithDuration(1, animations: { () -> Void in
self.label.alpha = 1.0
}, completion: { (_) -> Void in
self.showNextWord()
})
}
}
You could construct this as a keyframe animation. That way, you can chain three animations together (one for each word) and repeat that entire chain.
Alternatively (this is what I would probably do), put one animation into a method of its own, and in the completion block, add a short delay and call the method - thus creating a perpetual loop. The loop creates the repetition, but each animation is just one animation, so now you can progress through the array on successive calls. So the structure (pseudo-code) would look like this:
func animate() {
let opts = UIViewAnimationOptions.Autoreverse
UIView.animateWithDuration(1, delay: 0, options: opts, animations: {
// animate one fade in and out
}, completion: {
_ in
delay(0.1) {
// set the next text
self.animate() // recurse after delay
}
})
}