Upon a button's touchUpInside, it runs a series of code (all data related, none of the code in the main function modifies a view object) and the last thing that code does is call the animation function that I've pasted below. The problem is, the animation looks nothing like it should.
Desired animation:
The footerImg should fade out
The footerBar text should fade in
The footerBar text should fade out
The footerImg should fade back in
The text and image occupy the same position on the screen, so the visual should be of one replacing the other, and then it going back to the original state. The views are not nested in each other, they share the same container.
Actual animation seen in simulator:
-footerImg is never even visible
-footerBar text appears immediately after trigger is tapped, no animation
-footerBar text fades out
-footerImg fades in
footerBar is a UIButton
-It's starting state, before the action ever begins, is that the button is empty and clear (invisible to user)
-In case it matters, this is not the button that triggered the function
-Has a clear background, so its text should be the only thing animating in/out
footerImg is a UIImageView
-Just an icon image, nothing special
func animateFeedback() {
UIView.animateWithDuration(0.25, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0, options: nil, animations: {
self.footerImg.alpha = 0
self.footerBar.alpha = 0
},
completion: { finished in
self.footerBar.setTitle("Item added", forState: UIControlState.Normal)
}
)
UIView.animateWithDuration(1.5, delay: 0.5, options: nil, animations: {
self.footerBar.alpha = 1
}
, completion: nil
)
UIView.animateWithDuration(0.75, delay: 1.25, options: nil, animations: {
self.footerBar.alpha = 0
}
, completion: { finished in
self.footerBar.setTitle("", forState: UIControlState.Normal)
}
)
UIView.animateWithDuration(0.25, delay: 1.5, options: nil, animations: {
self.footerImg.alpha = 1
}
, completion: nil
)
}
For the sequence animation, you should put behind animations in completion block. E.g.
The footerBar text should fade in
The footerBar text should fade out
Try this:
self.footerBar.alpha = 0;
UIView.animateWithDuration(1.5, delay: 0.5, options: nil, animations: {
self.footerBar.alpha = 1
}
, completion: { finished in
UIView.animateWithDuration(0.75, delay: 1.25, options: nil, animations: {
self.footerBar.alpha = 0
}
, completion: { finished in
self.footerBar.setTitle("", forState: UIControlState.Normal)
}
)
}
)
And the same for others
comment all codes that u have in "animateFeedback()" and paste the below code to it
UIView.animateWithDuration(1.5, delay: 0, options: nil, animations: { () -> Void in
self.footerImg.alpha = 0;
self.footerBar.setTitle("Item added", forState: UIControlState.Normal)
},
completion: { finished in
UIView.animateWithDuration(1.5, delay: 0, options: nil, animations: { () -> Void in
self.footerImg.alpha = 1;
self.footerBar.setTitle("", forState: UIControlState.Normal)
},
completion: { finished in
}
)
}
)
Related
Goal: Create a looping animation with 2 overlapping uilabels to show one and hide the other by setting alphas respectively to 1 and 0.
Any tips would be appreciated.
What I've Tried:
Autoreverse/repeat animation - While this works, there is no delay in-between when the animation reverses and repeats itself.
DispatchQueue.main.async {
UIView.animate(withDuration: 1.0, delay: 3.0, options: [.autoreverse, .repeat]) {
self.labelOne.alpha = 0
self.labelTwo.alpha = 1
}
}
Recursive animation - This works, but when I re-enter the foreground from the background, the animation spazzes out showing/hiding each uilabel. My issue here is being unable to stop/reset the recursive animation.
DispatchQueue.main.async {
UIView.animate(withDuration: 1.0, delay: 3.0, options: .curveLinear) {
self.labelOne.alpha = 0
self.labelTwo.alpha = 1
} completion: { isComplete in
UIView.animate(withDuration: 1.0, delay: 3.0, options: [.curveLinear]) {
self.labelOne.alpha = 1
self.labelTwo.alpha = 0
} completion: { isComplete in
self.runThisAnimation()
}
}
}
I would like to flip the image on a UIButton multiple times. i.e. A revolving door type animation. I don't care if it flips a certain number of times or for a duration of time
Right now I can flip it once, using this code:
UIView.transition(with: thisButton, duration: 0.2, options: .transitionFlipFromTop, animations: {
thisButton.setImage(myButtonImage, for: .normal)
}, completion: nil)
Try adding .repeat to your options
UIView.transition(with: thisButton, duration: 0.2, options: [.transitionFlipFromTop,.repeat], animations: {
thisButton.setImage(myButtonImage, for: .normal)
}, completion: nil)
Hope this helps
Reinier's answer works to make it continue repeating forever.
To make it stop after some time I added thisButton.layer.removeAllAnimations()
So the following code together works:
UIView.transition(with: thisButton, duration: 0.1, options: [.transitionFlipFromTop,.repeat], animations: {
thisButton.setImage(myButtonImage, for: .normal)
}, completion: nil)
let delayTime = DispatchTime.now() + 0.5
DispatchQueue.main.asyncAfter(deadline: delayTime) {
thisButton.layer.removeAllAnimations()
}
To animate a bar opening...
#IBOutlet var barHeight: NSLayoutConstraint!
barHeight.constant = barShut?30:100
self.view.layoutIfNeeded()
t = !barShut?30:100
UIView.animate(withDuration: 0.15,
delay: 0,
options: UIViewAnimationOptions.curveEaseOut,
animations: { () -> Void in
self.barHeight.constant = t
self.view.layoutIfNeeded()
},
completion: {_ in
Screen.barShut = !Screen.barShut
}
)
That's great ...
But how would you make it boing like this?
(The only way I'd know to do this is, use CADisplayLink, with a few lines of code for a spring decaying.) Is this available in UIKit?
You can use the spring animation method that is built in to UIView:
func toggleBar() -> Void {
self.view.layoutIfNeeded()
let newHeight:CGFloat = !barShut ? 30:100
barShut = !barShut
barHeightConstraint.constant = newHeight
UIView.animate(withDuration: 1.5, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 3, options: [], animations: {
self.view.layoutIfNeeded()
}, completion: nil)
}
You will want a longer animation duration than 0.15 of a second in order for the bounce to seem realistic; I think the values I have look pretty good, but you can play with them to get the exact effect you are after.
Since the animation duration is longer, I found that I could tap the button the triggered the open/shut while the previous animation was still running. Setting barShut in the completion block meant that the bar didn't react to all taps. I moved the toggle outside of the animation to address this.
When I animate a change to a view's transform, then reset that change in another animation before the first animation finishes, everything's great (shown here with a rotation). The animation smoothly switches to the new target:
But when I do this with a scale, the animation overshoots magnificently:
Here's the breaking code:
UIView.animateWithDuration(1) {
self.someView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
}
UIView.animateWithDuration(1,
delay: 0.5,
options: nil,
animations: {
self.someView.layer.transform = CATransform3DIdentity
}, completion: nil
)
Has anyone else seen this? Am I doing something wrong?
EDIT: And is there a good workaround?
EDIT 2: I believe this is a duplicate of this question and am voting to close.
This blog post provides the answer: in iOS 8, UIView animations are additive, and this has an unfortunate result with scale animations.
Basically, the second animation happens together with the first animation. The only solution is to explicitly remove the original animation before starting a new one:
view.layer.transform = view.layer.presentationLayer().transform
view.layer.removeAllAnimations()
Hi I'm not quite sure what your looking for but if you want the view to go back to it's original scale you'd add the .Autoreverse flag.
UIView.animateWithDuration(1, delay: 0, options: .Autoreverse | .Repeat, animations: {
myView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
}, completion: nil)
While if you wanted to string animations together I'd do it within UIView.animateKeyframesWithDuration()
UIView.animateKeyframesWithDuration(2, delay: 0.0, options: nil, animations: {
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.5, animations: {
// Animation 1
})
UIView.addKeyframeWithRelativeStartTime(1, relativeDuration: 0.5, animations: {
// Animation 2
})
}, completion: nil)
When I tap my scrollView it activates a UITapGestureRecognizer that animates the contentOffset for about 2 seconds. How could I allow the user to interrupt the animation and take full control of the scrollView again when they drag? Right now the user has to wait until the end of the animation to start interacting with the scrollView again.
Note: self refers to the scrollView
Tap set up:
let singleTap = UITapGestureRecognizer(target: self, action: "subtleBounce:")
singleTap.cancelsTouchesInView = false
self.addGestureRecognizer(singleTap)
So when the user taps:
func subtleBounce(gesture : UITapGestureRecognizer) {
let originalFrame = self.frame
UIView.animateWithDuration(0.1, delay: 0.0, usingSpringWithDamping: 1.5, initialSpringVelocity: 1.5, options: UIViewAnimationOptions.CurveLinear, animations: {
self.contentOffset.y -= 10.0
}, completion: {
Void in
UIView.animateWithDuration(0.6, delay: 0.0, usingSpringWithDamping: 0.1, initialSpringVelocity: 3.0, options: UIViewAnimationOptions.CurveLinear, animations: {
self.contentOffset.y += 10.0 }, completion: { Void in
})
})
}
So the code above works as intended.
Here is what I've tried to stop the animation and give the user control of the scrollView again:
let drag = UISwipeGestureRecognizer(target: self, action: "stopScrollAnimation:")
drag.cancelsTouchesInView = false
self.addGestureRecognizer(drag)
and elsewhere:
func stopScrollAnimation(gesture : UISwipeGestureRecognizer) {
self.layer.removeAllAnimations()
self.setContentOffset(CGPoint(x: 0.0, y: 0.0), animated: false)
}
However this DOES NOT work as intended. The animation still controls the scrollView and the user cannot interact with it.
If you want an example what I mean, look at the iOS7/8 lockscreen. After tapping the screen it also starts an animation. The user can take control of the scrollView mid animation however.
edit: accepting answers in swift or obj-c.
Add AllowUserInteraction to your animation options.