I have two states of UIView:
I have animation between them using #IBaction for button:
#IBAction func tapped(sender: UIButton) {
flag = !flag
UIView.animateWithDuration(1.0) {
if self.flag {
NSLayoutConstraint.activateConstraints([self.myConstraint])
} else {
NSLayoutConstraint.deactivateConstraints([self.myConstraint])
}
self.view.layoutIfNeeded() //additional line
}
}
Animation is working only when I add additional line:
But when I remove that line, then my UIView is updated but without any animation, it happens immediately.
Why this line makes such difference? How is it working?
As I understand it, changing a constraint doesn't update the layout of your views right away. It queues the changes, and they only take place the next time the system updates layout.
By putting layoutIfNeeded inside your animation block it forces the view changes to be applied during the animation block. Otherwise they take place later, after the animation has been set up.
Related
I'm trying to animate a collectionview by using layout constraints however I cannot get it to work. I have a collectionview that takes up the entire screen and on a button tap I want to essentially move the collectionview up to make room for another view to come in from the bottom - see image below
The incoming UIView animates just fine (the view coming up from the bottom) - The reason I want to move the collectionview is that the incoming UIView obscures the collection view so am just trying to move the collectionview up at the same time as the new view so that all of the content in the collectionview can be displayed without being hidden by the new view - I use a reference view to get the right layout constraints for the final position for the collectionview Image to show what I am trying to achieve Am I going about it the right way?
Nothing happens with the code example below and I am not sure where to go from here - the same approach is used for animating the incoming view and works just fine but doesn't seem to work for the collectionview...
Any help would be kindly appreciated
var colViewBottomToReferenceTop: NSLayoutConstraint?
var colViewBottomToViewBottom: NSLayoutConstraint?
override func viewDidLoad() {
super.viewDidLoad()
colViewBottomToReferenceTop = musicCollectionView.bottomAnchor.constraint(equalTo: referenceView.topAnchor)
colViewBottomToViewBottom = musicCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
NSLayoutConstraint.active([colViewBottomToViewBottom!])
NSLayoutConstraint.deactivate([colViewBottomToReferenceTop!])
}
func playerShow() {
NSLayoutConstraint.activate([colViewBottomToReferenceTop!])
UIView.animate(withDuration: 0.5, animations: {
self.view.layoutIfNeeded()
})
}
#IBAction func btnTapped(_ sender: UIButton) {
playerShow()
}
You want to deactivate the other before animation
NSLayoutConstraint.deactivate([colViewBottomToViewBottom!])
NSLayoutConstraint.activate([colViewBottomToReferenceTop!])
Look to this Demo
I have a collectionView which I need to animate height changes for, so it expands up from the foot of the screen, & back down again. It's hard to explain what's going wrong so I've attached a recording of the simulator. The animation is fine for expanding, but very odd for the collapse - the content partially disappears as it animates, then reappears when it's done. The animation code is triggered during the scrollView 'scrollViewDidScroll(_ scrollView: UIScrollView)' delegate method, with logic to determine whether to collapse or expand. The expand animation, whose code is pretty much identical, works fine.
Animation code -
private func collapseTable() {
guard self.isTableChangingSize == false else { return } // as the delegate method is triggered during the animation, we use a flag to prevent multiple collapse calls
guard self.tableHeightConstraint.constant != self.tableCollapsedHeight else { return } // don't collapse if we're already collapsed
self.isTableChangingSize = true
self.tableHeightConstraint.constant = self.tableCollapsedHeight
UIView.animate(withDuration: 0.5, animations: {
self.view.layoutIfNeeded()
}) { _ in
self.isTableChangingSize = false
}
}
Here are a couple of videos of what's happening -
Normal speed
Slow motion
After far too long messing about trying different approaches, & tweaking everything, it seems that the problem was allowing scrolling during the animation block. If you set -
self.collectionView.isScrollEnabled = false
before the animation block, and -
self.collectionView.isScrollEnabled = true
in the completion, all is good.
I have the following small function wich contains two primary actions which I would like to occur. A three second animation, and then upon completion of that animation, another function call. What is happening, however, is that the line of code that calls another function is being executed before the UIView animation has completed.
func switchToNormalState() {
print("Switching to Normal State")
currentState = "normal"
intervalCounter = intervalCounter + 1
setVisualsForState()
UIView.animateWithDuration(Double(normalDuration), animations: { () -> Void in
self.ProgressBar.setProgress(1.0, animated: true)
}, completion: { _ in
self.switchToFastState()
})
}
I have studied other similar posts looking for the solution but none of the solutions have solved my puzzle. What am I doing wrong in the completion block in order to make these actions a sequence and not simultaneous?
Assuming that ProgressBar is a UIProgressView, the setProgress method animates itself and doesn't need to be contained in a UIView.animateWithDuration call.
This means the setProgress animation is probably longer than the duration you're putting in the UIView.animateWithDuration call, so self.switchToFastState() is being called when the UIView animation ends- before the setProgress animation completes.
Solutions
Change the duration. You can hack around this by finding/guessing the duration of the setProgress animation and using that as your UIView animation duration. This should mimic the behavior you are going for.
Change the duration but use GCD. This is the same idea as above, but doesn't use the UIView animation method. You can see this question for how to use GCD.
NSTimer or Subclassing. There are solutions here that use NSTimer or subclass UIProgressView.
I am not sure if this is the best solution, but this is what I ended up going with:
ProgressBar.progress = 1.0
UIView.animateWithDuration(Double(normalDuration), animations: { () -> Void in
self.ProgressBar.layoutIfNeeded()
}, completion: { (_) -> Void in
self.switchToFastState()
})
This solution removes the setProgress (which may be animated) from the animation block and this allows the UIView animation to execute without interuption.
I have a label, toggle button and an animation in my code. When I press the toggle button -> animation starts , label changes. Below is my code sample.
override func viewDidLayoutSubviews() {
println("viewDidLayoutSubviews is called")
// Initial state of my animation.
}
#IBAction func Toggled(sender: AnyObject) {
CallTextChange()
// Two different Animations
}
func CallTextChange() { // Change text here}
Every time I change the text in label viewDidLayoutSubviews is called.
Is there a way to stop calling it every time I change the label?
I found the answer for my problem.
When we create UIImage by drag and dropping from the object provided by Xcode, the image is temporary placed where it was statically placed. So when animating in middle when viewDidLayoutSubviews is called the image is placed in the static place.
So the UIImage has to be created programmatically.
CreateImage.image = UIImage(named: "Image.png")
CreateImage = UIImageView(frame: CGRect(x: 0, y: 0, width: CreateImage.image!.size.width/6, height: CreateImage.image!.size.height/6))
self.view.addSubview(CreateImage)
Try to pass one boolean flag values in function
I think when you change text of and UILabel it will change its intrinsic content size that in turn will notify the system to relayout the view hierarchy. So it seems inevitable that viewDidLayoutSubviews will be called.
Either you put a boolean flag to make your initial animation code execute once only or move your code to other place like viewDidLoad() method.
I have just added a UISwitch within a cell in my settings menu and I am having issues with the switches state being reverted to on when I leave the view.
I have tried adding this code:
override func viewDidAppear(animated: Bool) {
if autoAdjust == true {
dupSwitch.on = true
} else {
dupSwitch.on = false
}
}
While this does work, it isn't ideal as there is an obvious jump between states when the view appears.
How can I ensure that the switch stays in whatever position the user left it in when they leave the view?
How can I ensure that the switch stays in whatever position the user left it in when they leave the view?
Store the current state of the switch in the model class (in the Model-View-Controller sense). The value of the autoAdjust variable should be saved in an object that does not get unloaded with the view - i.e. in your model class.
When the view is about to appear, read the current state of the switch, and set dupSwitch.on to the state stored in the model.
Note: To avoid showing the process of switching, move your logic from viewDidAppear to viewWillAppear. Your code can be simplified, too - you do not need a conditional:
override func viewWillAppear(animated: Bool) {
dupSwitch.on = autoAdjust
}