I have simultaneous animations going on, and I would like to transition the VC in the middle (it will fade so it will see some of the other animations). However, I can't find documentation how to delay a transition similar to UIView.animateWithDuration.
I want to achieve this...
UIView.transition(withDuration: 0.5, delay: 0.1, options: .transitionCrossDissolve, animations: {})
I can manually add a delay like so.. but was wondering if there's a more elegant way.
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {}
Unfortunately no. Using a bunch of UIView transitions/animations can get a little hairy.
In the past, I've resorted to setting up an NSTimer that fires 1/30 seconds and I ended up managing all the start times on my own.
What you can do is series out the animations using the closure.
UIView.animate(withDuration: 1, animations: {
}, completion: {Do UIView transition here})
It seems no way except surrounding with Timer:
Timer.scheduledTimer(withTimeInterval: 5, repeats: true, block: { _ in
UIView.transition(with: self.myImageView, duration: 0.75,
options: [.transitionCrossDissolve],
animations: {
self.myImageView.image = newImage
})
})
Related
I basically have a song that a cartoon needs to dance to.
Is it better to have :
Version A: one full song and dispatch a bunch of queues:
DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
//Have the figure dance move 1
}
DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
//Have the figure dance move 2
}
Or segment the song and actions:
func dancing(){
timeElapsed += 1
if timeElapsed == 1 {
\\figure does move 1
self.playSound()
} else if timeElapsed == 2 {
\\figure does move 2
self.playSound2()
}
As a summary:
Version a: Dispatch multiple queues at the same time
Version b: Segment the queues, but that would mean my project would have 10+ media files
Is there anyway to test this? Or any alternative methods? I've poked around and seen things like concurrent/sync queues, but don't know much on how to use them in practice.
If you don’t want too much nesting, you can use UIViewPropertyAnimator. For Example:
let animation1 = UIViewPropertyAnimator(duration: 0.5, curve: .linear) {
// animation code
}
let animation2 = UIViewPropertyAnimator(duration: 1, curve: .linear) {
// animation code
}
animation1.addCompletion { _ in
animation2.startAnimation()
}
animation1.startAnimation()
Another option you might want to look at is UIView key frame animations.
You need to figure out your relative start times and durations, but it's a bit nicer than using dispatch queues.
More info: link
A simple demonstration:
UIView.animateKeyframes(withDuration: 4.0, delay: 0.0, options: [], animations: {
// Animation 1 that starts immediately and runs for 2 seconds
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5) {
// Perform animation
}
// Animation 2 that starts after 2 seconds and runs for 2 seconds
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
// Perform animation
}
})
I will go with Version A: one full song and Set the Animation Hierarchy
Better to use UIView Animation with completion block
UIView.animate(withDuration: 0.5, animations: {
//animation 1
}, completion: { (value: Bool) in
UIView.animate(withDuration: 1.0, animations: {
//animation 2
})
})
I am trying to have my animation ease the screen from black to white to black again and repeat that a certain amount of times. Currently with the code I have the animation eases from black to white then jumps back to black. Is there anyway to run an animation in reverse or add an animation that runs after the first animation is completed?
override func viewDidAppear(_ animated: Bool) {
let viewColorAnimator: UIViewPropertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
withDuration: 4.0,
delay: 0.0,
options: [.curveEaseInOut],
animations: {
UIView.setAnimationRepeatCount(3);
self.lightView.backgroundColor = .white
})
viewColorAnimator.startAnimation()
}
I tried adding this block of code to the project but the outcome was the same:
viewColorAnimator.addCompletion {_ in
let secondAnimator = UIViewPropertyAnimator(duration: 4.0, curve: .linear) {
self.lightView.backgroundColor = .black
}
secondAnimator.startAnimation()
}
EDIT: I've found out it is because of the setAnimationRepeatCount because the last of the iterations works properly. How do I run the animation multiple times without the repeat count?
Documentation says that the options related to direction are ignored. you can check the image attached here.
To achieve reverse animation:
Create an animator property.
private var animator: UIViewPropertyAnimator = {
let propertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
withDuration: 4.0,
delay: 0.0,
options: [.curveEaseInOut, .autoreverse],
animations: {
UIView.setAnimationRepeatCount(3)
UIView.setAnimationRepeatAutoreverses(true)
self.lightView.backgroundColor = .white
})
return propertyAnimator
}()
P.S. we need to mention the .autoreverse in the options. Otherwise UIView.setAnimationRepeatAutoreverses(true) won't work.
There's an easy way to run animations. And for this method: if you want the animation to repeat after completing, you can add the .autoreverse, and the .repeat option. Like this:
UIView.animate(withDuration: TimeInterval(randomTime), delay: 0, options: [.repeat,.autoreverse], animations: {
//Animation code here
}, completion: {(bool)
//Do something after completion
})
You can put the codes you want to execute after the animation in the completion block.
And, you can use a Timer as a way to run the animation for certain times.
Xcode 9.4.1 (Swift 4.1.2) and Xcode 10 beta 3 (Swift 4.2):
Here's the way to do it using UIViewPropertyAnimator -- basically, we just add .repeat and .autoreverse to the options. You were 99% of the way there:
override func viewDidAppear(_ animated: Bool) {
let viewColorAnimator: UIViewPropertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
withDuration: 4.0,
delay: 0.0,
options: [.curveEaseInOut, .repeat, .autoreverse],
animations: {
UIView.setAnimationRepeatCount(3)
self.lightView.backgroundColor = .white
})
viewColorAnimator.startAnimation()
}
When using animations for the ProgressView, it works completely fine if I let the animation run out but if I try to run this code again while the animation is still going, it will add 100% to the current bar and make it go through the bar. Images should explain the situation in a more logical sense.
Progress starts at 1.0 (100%):
Progress is half-way through:
The code was ran again, resulting in the progress going above 100%, although it uses the correct amount of time to finish.
Here's the code used:
self.progressView.setProgress(1.0, animated: false)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
UIView.animate(withDuration: 10, delay: 0, options: [.beginFromCurrentState, .allowUserInteraction], animations: { [unowned self] in
self.progressView.setProgress(0, animated: true)
})
}
Thanks in advance!
Some quick research...
Turns out UIProgressView needs a little special effort to stop the current animation. See if this does the job for you:
// stop any current animation
self.progressView.layer.sublayers?.forEach { $0.removeAllAnimations() }
// reset progressView to 100%
self.progressView.setProgress(1.0, animated: false)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
// set progressView to 0%, with animated set to false
self.progressView.setProgress(0.0, animated: false)
// 10-second animation changing from 100% to 0%
UIView.animate(withDuration: 10, delay: 0, options: [], animations: { [unowned self] in
self.progressView.layoutIfNeeded()
})
}
The setProgress(_:animated:) method already handles the animation for you. When the animated parameter is set to true, the progress change will be animated.
Try without the animation block :
self.progressView.setProgress(1.0, animated: false)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
self.progressView.setProgress(0.0, animated: true)
}
Also make sure this is not an autolayout issue. Check your constraints on the progress view and make sure its width is properly constrained.
I'm developing an iOS app and i've been asked to add animations to make it more user friendly.
So i want to animate a badge on my button displaying quantity. When the quantity changes, my function valueForItemChanged is called, then i change the value in the bimButtonBadge label and i use a animation which makes its size bounce.
But I'm facing a problem: when i call .animateWithDuration() from an event triggered by a button, it doesn't work:
#IBAction func valueForItemChanged(sender: AnyObject) {
print("value changed");
self.bimButtonBadge.text = String(self.getTotalItemQuantity())
self.bimButtonBadge.transform = CGAffineTransformMakeScale(0.2, 0.2)
UIView.animateWithDuration(1.0,
delay: 0,
usingSpringWithDamping: 0.2,
initialSpringVelocity: 4.0,
options: UIViewAnimationOptions.AllowUserInteraction,
animations: {
self.bimButtonBadge.transform = CGAffineTransformIdentity
}, completion: nil)
}
So i tried to make this animation in viewDidLayoutSubviews(), just to see. It worked.
I think viewDidLayoutSubview is called from the main thread so i tried this :
#IBAction func valueForItemChanged(sender: AnyObject) {
print("value changed");
self.bimButtonBadge.text = String(self.getTotalItemQuantity())
self.bimButtonBadge.transform = CGAffineTransformMakeScale(0.2, 0.2)
dispatch_async(dispatch_get_main_queue(), {
UIView.animateWithDuration(1.0,
delay: 0,
usingSpringWithDamping: 0.2,
initialSpringVelocity: 4.0,
options: UIViewAnimationOptions.AllowUserInteraction,
animations: {
self.bimButtonBadge.transform = CGAffineTransformIdentity
}, completion: nil)
});
}
Aaaaaand, it worked, partially. Sometimes the label disappears. I searched on the web, but i couldn't find anything related to this. So i'm wondering where i'm wrong.
If anyone could answer me it would be really appreciated.
Thanks
Your animation (both versions) sets the badge's transform to the identity transform, but you don't show any code that sets the transform to anything other than the identity transform. An animation animates a change in a property. If you don't actually change anything, it won't animate.
What are you trying to do? You say you're using a bounce animation, but what do you mean? Bouncing the size? The position?
Problem solved.
I solved this by doing my first transformation in the main thread thanks to Duncan C.
My code is now :
#IBAction func valueForItemChanged(sender: AnyObject) {
print("value changed");
dispatch_async(dispatch_get_main_queue(), {
self.bimButtonBadge.text = String(self.getTotalItemQuantity())
self.bimButtonBadge.transform = CGAffineTransformMakeScale(0.2, 0.2)
UIView.animateWithDuration(1.0,
delay: 0,
usingSpringWithDamping: 0.2,
initialSpringVelocity: 4.0,
options: UIViewAnimationOptions.AllowUserInteraction,
animations: {
self.bimButtonBadge.transform = CGAffineTransformIdentity
}, completion: nil)
});
}
I had the following custom transition using UIView.animateWithDuration(...usingSpringWithDamping:...) which worked perfectly.
UIView.animateWithDuration(self.transitionDuration(transitionContext),
delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 1.0,
options: nil, animations: {() in
// ...
}, completion: {(Bool) in
// ...
})
But then I had to extend my custom transition with UIViewControllerInteractiveTransitioning in order to have an interactive transition where the user can swipe down the modal view again.
Therefore I needed keyframes for the animation in order that the UIPercentDrivenInteractiveTransition works properly.
So I changed the animation function to use UIView.animateWithKeyframes....
UIView.animateKeyframesWithDuration(self.transitionDuration(transitionContext),
delay: 0.0, options: UIViewKeyframeAnimationOptions.CalculationModeCubic,
animations: {() in
// ...
}, completion: {(Bool) in
// ...
})
My problem now: I lost the spring animation.
I've checked several links, one of the most promising was:
Stackoverflow #1
... but with .addKeyframes... method I cannot specify a completion block that I need.
Any suggestions? :-/