Sometimes animation perform without animation effect(zero time).
In below code sometimes code print "Time = 0.0000002"
let date = Date()
UIView.animate(withDuration: 0.2, animations: {
}) { (finish) in
print("Time = \(Date().timeIntervalSince(date))")
}
It will because you are not animating anything inside the animations block so this is a normal behavior. You can verify with below code,
let date = Date()
self.view.layer.opacity = 0.5
UIView.animate(withDuration: 2.0, animations:
self.view.layer.opacity = 1.0
}) { (finish) in
print("Time = \(Date().timeIntervalSince(date))")
}
The purpose of animations block is to animate the property's start and end values difference on the given time. Once the property value is reached to the given value in animations block it will immediately call finish block.
If you have nothing to animate and just want a callback after few seconds better to use Timer or DispatchQueue e.g,
Timer(timeInterval: 0.2, repeats: false) { timer in
// Do whatever you want
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
// Do whatever you want
}
Related
In Swift, I would like to have several calls to UIView.animate run in series. That is, when one animation finishes, then I would like another animation to continue after, and so on.
The call to UIView.animate has a Trailing Closure which I am currently using to make a second call to UIView.animate to occur.
The Problem is: I want to do N separate animations
From the Apple Documentation for UIView.animate
completion
A block object to be executed when the animation sequence ends. This block has no return value and takes a single Boolean argument that indicates whether or not the animations actually finished before the completion handler was called. If the duration of the animation is 0, this block is performed at the beginning of the next run loop cycle. This parameter may be NULL.
Ideally, I would like to iterate over an array of animation durations and use in the calls to animate()
For example,
Goal
Iterate over an array and apply those parameters for each animation
let duration = [3.0, 5.0, 10.0]
let alpha = [0.1, 0.5, 0.66]
Xcode Version 11.4.1 (11E503a)
What I've tried
Use a map to iterate, and 🤞 hope that it works
Issue is that that only final animation occurs. So there is nothing in series
Research Q: Is it possible that I need to set a boolean in UIView that says animation occur in series?
let redBox = UIView()
redBox.backgroundColor = UIColor.red
self.view.addSubview(redBox)
let iterateToAnimate = duration.enumerated().map { (index, element) -> Double in
print(index, element, duration[index])
UIView.animate(withDuration: duration[index], // set duration from the array
animations: { () in
redBox.alpha = alpha[index]
}, completion:{(Bool) in
print("red box has faded out")
})
}
How to do one animation
let redBox = UIView()
redBox.backgroundColor = UIColor.red
self.view.addSubview(redBox)
// One iteration of Animation
UIView.animate(withDuration: 1,
animations: { () in
redBox.alpha = 0
}, completion:{(Bool) in
print("red box has faded out")
})
Ugly way to do chain two animate iterations (wish to avoid)
// two iterations of Animation, using a trailing closure
UIView.animate(withDuration: 1,
animations: { () in
redBox.alpha = 0
}, completion:{(Bool) in
print("red box has faded out")
}) { _ in // after first animation finishes, call another in a trailing closure
UIView.animate(withDuration: 1,
animations: { () in
redBox.alpha = 0.75
}, completion:{(Bool) in
print("red box has faded out")
}) // 2nd animation
}
If the parameters are few and are known at compile time, the simplest way to construct chained animations is as the frames of a keyframe animation.
If the parameters are not known at compile time (e.g. your durations are going to arrive at runtime) or there are many of them and writing out the keyframe animation is too much trouble, then just put a single animation and its completion handler into a function and recurse. Simple example (adapt to your own purposes):
var duration = [3.0, 5.0, 10.0]
var alpha = [0.1, 0.5, 0.66] as [CGFloat]
func doTheAnimation() {
if duration.count > 0 {
let dur = duration.removeFirst()
let alp = alpha.removeFirst()
UIView.animate(withDuration: dur, animations: {
self.yellowView.alpha = alp
}, completion: {_ in self.doTheAnimation()})
}
}
you can use UIView.animateKeyframes
UIView.animateKeyframes(withDuration: 18.0, delay: 0.0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: 3.0/15.0, relativeDuration: 3.0/15.0, animations: {
self.redBox.alpha = 0
})
UIView.addKeyframe(withRelativeStartTime: 8.0/15.00, relativeDuration: 5.0/15.0, animations: {
self.redBox.alpha = 0.75
})
}) { (completed) in
print("completed")
}
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...
I animate a UISlider with this function:
func animateSlider(){
slider.value = Float(min)
UIView.animate(withDuration: 2.0, animations: {
self.slider.setValue(Float(self.max), animated:true)
})
When I tap the screen I want to get the current value but it only returns the maximum value. What can I do to solve that problem?
When you schedule an animation Core Animation sets the model layer's properties immediately, and the creates a presentation layer which you may inspect. This presentation layer is what you actually see on screen, and is valid to query its properties such as its frame, bounds, position, etc.
You were asking for the model layer's value which is set immediately in your animation block, when instead what you want is what is displayed through the presentation layer.
You can get the currently displayed presentation value from the label when there is an in-progress animation by using this extension on UISlider:
extension UISlider {
var currentPresentationValue: Float {
guard let presentation = layer.presentation(),
let thumbSublayer = presentation.sublayers?.max(by: {
$0.frame.height < $1.frame.height
})
else { return self.value }
let bounds = self.bounds
let trackRect = self.trackRect(forBounds: bounds)
let minRect = self.thumbRect(forBounds: bounds, trackRect: trackRect, value: 0)
let maxRect = self.thumbRect(forBounds: bounds, trackRect: trackRect, value: 1)
let value = (thumbSublayer.frame.minX - minRect.minX) / (maxRect.minX - minRect.minX)
return Float(value)
}
}
And its usage:
func animateSlider() {
slider.value = 0
DispatchQueue.main.async {
UIView.animate(withDuration: 2, delay: 0, options: .curveLinear, animations: {
self.slider.setValue(1, animated: true)
}, completion: nil)
}
// quarter done:
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
print(self.slider.currentPresentationValue)
// prints 0.272757, expected 0.25 with some tolerance
}
// half done:
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
print(self.slider.currentPresentationValue)
// prints 0.547876, expected 0.5 with some tolerance
}
// three quarters done:
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
print(self.slider.currentPresentationValue)
// prints 0.769981, expected 0.75 with some tolerance
}
}
I don't think that a slider's value property can be animated using UIView.animate(). However, if you read the documentation on UISlider, you'll find the function
func setValue(Float, animated: Bool)
Use that to animate your slider to a new position.
If you want to animate a change over a longer time period like 2 seconds, though, you'll probably have to set up a repeating timer or a CADisplayLink timer that changes the slider value by small increments each time it fires.
As for your statement "When I tap the screen I want to get the current value but it only returns the maximum" That is the way Cocoa animation works. You can't interrogate an in-flight animation and get a value that's the value of the property you are animating at that instant. (You could do that if you used a repeating timer to animate the slider though.)
I would like to change the color of a UIView in a while loop. I am calling start() from the main thread.
Example :
func start() {
let item = Percolation(n: self.tileSideCount)
while (!item.percolates()) {
let v = Int(arc4random_uniform(UInt32(self.tileSideCount))) + 1
let j = Int(arc4random_uniform(UInt32(self.tileSideCount))) + 1
UIView.animate(withDuration: 0.3, delay: 0.0, options: [], animations: {
self.container?.viewWithTag(v)?.backgroundColor = UIColor.white
self.container?.viewWithTag(j)?.backgroundColor = UIColor.white
}, completion: { (finished: Bool) in
})
if (!item.isOpen(i: v, j: j)) {
item.open(i: v, j: j);
}
}
}
If you want the colors to change from one to the next in sequence, you need to submit your animation calls with delay and duration values so the previous animation is finished as the next one starts.
Say the duration of each animation is 1 second. Make the first one start with a delay of 0, the second animation start with a delay of 1 second, etc.
(Same applies for other durations. if your duration is .3 second, have each subsequent animation start an additional 0.3 seconds later than the previous one.)
Update: The NSTimer approach works now, but comes with a huge performance hit. The question is now narrowed down to an approach without NSTimers.
I'm trying to animate a 'Press and hold' interactive animation. After following a load of SO answers, I've mostly followed the approach in Controlling Animation Timing by #david-rönnqvist. And it works, if I use a Slider to pass the layer.timeOffset.
However, I can't seem to find a good way to continuously update the same animation on a press and hold gesture. The animation either doesn't start, only shows the beginning frame or at some points finishes and refuses to start again.
Can anyone help with achieving the following effect, without the horrible NSTimer approach I'm currently experimenting with?
On user press, animation starts, circle fills up.
While user holds (not necessarily moving the finger), the animation should continue until the end and stay on that frame.
When user lifts finger, the animation should reverse, so the circle is empties again.
If the user lifts his finger during the animation or presses down again during the reverse, the animation should respond accordingly and either fill or empty from the current frame.
Here's a Github repo with my current efforts.
As mentioned, the following code works well. It's triggered by a slider and does its job great.
func animationTimeOffsetToPercentage(percentage: Double) {
if fillShapeLayer == nil {
fillShapeLayer = constructFillShapeLayer()
}
guard let fillAnimationLayer = fillShapeLayer, let _ = fillAnimationLayer.animationForKey("animation") else {
print("Animation not found")
return
}
let timeOffset = maximumDuration * percentage
print("Set animation to percentage \(percentage) with timeOffset: \(timeOffset)")
fillAnimationLayer.timeOffset = timeOffset
}
However, the following approach with NSTimers works, but has an incredible performance hit. I'm looking for an approach which doesn't use the NSTimer.
func beginAnimation() {
if fillShapeLayer == nil {
fillShapeLayer = constructFillShapeLayer()
}
animationTimer?.invalidate()
animationTimer = NSTimer.schedule(interval: 0.1, repeats: true, block: { [unowned self] () -> Void in
if self.layer.timeOffset >= 1.0 {
self.layer.timeOffset = self.maximumDuration
}
else {
self.layer.timeOffset += 0.1
}
})
}
func reverseAnimation() {
guard let fillAnimationLayer = fillShapeLayer, let _ = fillAnimationLayer.animationForKey("animation") else {
print("Animation not found")
return
}
animationTimer?.invalidate()
animationTimer = NSTimer.schedule(interval: 0.1, repeats: true, block: { [unowned self] () -> Void in
if self.layer.timeOffset <= 0.0 {
self.layer.timeOffset = 0.0
}
else {
self.layer.timeOffset -= 0.1
}
})
}
When you use slider you use fillAnimationLayer layer for animation
fillAnimationLayer.timeOffset = timeOffset
However, in beginAnimation and reverseAnimation functions you are using self.layer.
Try to replace self.layer.timeOffset with self.fillShapeLayer!.timeOffset in your timer blocks.
The solution is two-fold;
Make sure the animation doesn't remove itself on completion and keeps its final frame. Easily accomplished with the following lines of code;
animation.fillMode = kCAFillModeForwards
animation.removedOnCompletion = false
The hard part; you have to remove the original animation and start a new, fresh reverse animation that begins at the correct point. Doing this, gives me the following code;
func setAnimation(layer: CAShapeLayer, startPath: AnyObject, endPath: AnyObject, duration: Double)
{
// Always create a new animation.
let animation: CABasicAnimation = CABasicAnimation(keyPath: "path")
if let currentAnimation = layer.animationForKey("animation") as? CABasicAnimation {
// If an animation exists, reverse it.
animation.fromValue = currentAnimation.toValue
animation.toValue = currentAnimation.fromValue
let pauseTime = layer.convertTime(CACurrentMediaTime(), fromLayer: nil)
// For the timeSinceStart, we take the minimum from the duration or the time passed.
// If not, holding the animation longer than its duration would cause a delay in the reverse animation.
let timeSinceStart = min(pauseTime - startTime, currentAnimation.duration)
// Now convert for the reverse animation.
let reversePauseTime = currentAnimation.duration - timeSinceStart
animation.beginTime = pauseTime - reversePauseTime
// Remove the old animation
layer.removeAnimationForKey("animation")
// Reset startTime, to be when the reverse WOULD HAVE started.
startTime = animation.beginTime
}
else {
// This happens when there is no current animation happening.
startTime = layer.convertTime(CACurrentMediaTime(), fromLayer: nil)
animation.fromValue = startPath
animation.toValue = endPath
}
animation.duration = duration
animation.fillMode = kCAFillModeForwards
animation.removedOnCompletion = false
layer.addAnimation(animation, forKey: "animation")
}
This Apple article explains how to do a proper pause and resume animation, which is converted to use with the reverse animation.