Have User be able to Swipe Down on temporary UIView - ios

I wanted to be able to have the user swipe down to dismiss a temporary Notification that comes in from the bottom.
Here's what the code looks like:
func showAnimationToast(...) {
let toastView = UIView(frame: CGRect(x: 10, y: view.frame.size.height - view.safeAreaInsets.bottom, width: view.frame.size.width - 20, height: 60))
...
toastView.tag = 1474
let animationView = AnimationView(name: animationName)
...
toastView.addSubview(animationView)
let messageLabel = UILabel(frame: CGRect(x: toastView.frame.size.height, y: 5, width: toastView.frame.size.width - toastView.frame.size.height, height: 50))
...
toastView.addSubview(messageLabel)
toastView.isUserInteractionAvailable = true
I tried to add a UISwipeGestureRecognizer to toastView, but it never worked. I even tried the simple UITapGestureRecognizer and it STILL didn't work.
Here's what I tried:
//Let Swipe Down Dismiss. Does not work
let swipeDownGesture = UISwipeGestureRecognizer(target: self, action: #selector(dismissToast(_:)))
swipeDownGesture.direction = .down
toastView.addGestureRecognizer(swipeDownGesture)
//Show animation
UIView.animate(withDuration: 0.2, delay: 0, animations: {
toastView.frame.origin.y = self.view.frame.size.height - self.view.safeAreaInsets.bottom - 70
}, completion: {_ in
animationView.play()
})
//Remove after specified time
UIView.animate(withDuration: 0.2, delay: duration, animations: {
toastView.center.y = self.view.frame.size.height + 50
}, completion: {_ in
toastView.removeFromSuperview()
})
}
#objc func dismissToast(_ sender: UIGestureRecognizer) {
print("dismiss")
let toastView = view.subviews.filter { view in
if view.tag == 1474 /*toastView*/ tag{
return true
}
return false
}.last!
UIView.animate(withDuration: 0.2, delay: 0, animations: {
toastView.center.y = self.view.frame.size.height + 50
}, completion: {_ in
toastView.removeFromSuperview()
})
}

The issue seems to be that while a view is waiting for an animation to play (during the "delay" period), it can't receive user interactions.
One way to work around this is to not use the delay parameter, and instead use DispatchQueue.main.asyncAfter:
UIView.animate(withDuration: 0.2, delay: 0, options: [.allowUserInteraction], animations: {
toastView.frame.origin.y = self.view.frame.size.height - self.view.safeAreaInsets.bottom - 70
}, completion: {_ in
DispatchQueue.main.asyncAfter(deadline: .now() + duration + 0.2) {
UIView.animate(withDuration: 0.2, delay: 0, animations: {
toastView.center.y = self.view.frame.size.height + 50
}, completion: {_ in
toastView.removeFromSuperview()
})
}
})

Related

Flip UIView without dim effect

I am trying to create a flip animation in one of my views. I managed to get the animation working but it looks horrible because the card (which has a white background color) dims its color to be darker during the animation.
Do you know if there is a way to get rid of this dim effect to maintain the original color of the cards during the whole animation?
For further reference, please find below a simple view controller reproducing my problem.
import UIKit
class ViewController: UIViewController {
private lazy var cardView: UIView = {
let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
backgroundView.backgroundColor = .white
return backgroundView
}()
private lazy var flipButton: UIButton = {
let flipButton = UIButton(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
flipButton.setTitle("Flip", for: .normal)
flipButton.setTitleColor(.red, for: .normal)
flipButton.addTarget(self, action: #selector(flipCard), for: .touchUpInside)
return flipButton
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
view.addSubview(cardView)
cardView.addSubview(flipButton)
cardView.center = view.center
}
#objc
func flipCard() {
UIView.transition(with: cardView, duration: 10, options: .transitionFlipFromRight, animations: nil, completion: nil)
}
}
u can use
UIView.animateKeyframes(withDuration: 6, delay: 0, options: []) {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
self.cardView.transform3D = CATransform3DRotate(self.cardView.layer.transform, CGFloat.pi, 0, 1, 0)
}
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 1) {
self.cardView.transform3D = CATransform3DRotate(self.cardView.layer.transform, CGFloat.pi, 0, 1, 0)
}
}
instead of
UIView.transition(with: cardView, duration: 10, options: .transitionFlipFromRight, animations: nil, completion: nil)
You can go through UIView.animate() also in Swift 5,
UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
targetView.transform = CGAffineTransform.identity.rotated(by: .pi )
} completion: { (_) in
UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
targetView.transform = CGAffineTransform.identity.rotated(by: .pi * 2)
}
}

How to add parameters to UIViewController extension?

I've successfully created an extension on UIViewController that allows me to call a function that triggers a UIView to animate down. However instead of just a plain UIView, I want to improve on the extension so that it is it takes two parameters (background color, and label text) that are a subview on the UIView 'popupAlert?
extension UIViewController {
func showAlert() {
let popupAlert = UIView(frame: CGRect(x: 0, y: -60, width: view.frame.width, height: 60))
popupAlert.backgroundColor = UIColor.brandSuccess()
let window = (UIApplication.shared.delegate as! AppDelegate).window!
window.addSubview(popupAlert)
UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseIn, animations: {
popupAlert.transform = .init(translationX: 0, y: 60)
}) { (_) in
UIView.animate(withDuration: 0.6, delay: 4, options: .curveEaseIn, animations: {
popupAlert.transform = .init(translationX: 0, y: -60)
}, completion: { (_) in
popupAlert.removeFromSuperview()
})
}
}
}
extension UIViewController {
func showAlert(bgColor: UIColor, lblText: String) {
let popupAlert = UIView(frame: CGRect(x: 0, y: -60, width: view.frame.width, height: 60))
let popupLbl = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 60))
popupAlert.backgroundColor = bgColor
popupLbl.text = lblText
popupLbl.textColor = .green
popupLbl.textAlignment = .center
let window = (UIApplication.shared.delegate as! AppDelegate).window!
popupAlert.addSubview(popupLbl)
window.addSubview(popupAlert)
UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseIn, animations: {
popupAlert.transform = .init(translationX: 0, y: 60)
}) { (_) in
UIView.animate(withDuration: 0.6, delay: 4, options: .curveEaseIn, animations: {
popupAlert.transform = .init(translationX: 0, y: -60)
}, completion: { (_) in
popupAlert.removeFromSuperview()
})
}
}
}
call
showAlert(bgColor: .red, lblText: "testtttt")

Run two animations simultaneously

I'm trying to create an animation with two views and I've encountered some unexpected behaviors while performing them.
I want to animate both views position while doing a second animation which is transitionFlipFromBottom
Here's the code:
let initialFrame = CGRect(x: xpos, y: -310, width: 300, height: 300)
let firstView = UIView()
firstView.backgroundColor = .red
firstView.frame = initialFrame
let secondView = UIView()
secondView.backgroundColor = .white
secondView.frame = initialFrame
secondView.isHidden = false
self.view.addSubview(firstView)
self.view.addSubview(secondView)
// Here I try to move the views on screen while fliping them
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
secondView.center = self.view.center
firstView.center = self.view.center
self.flip(firstView: firstView, secondView: secondView)
}, completion: nil)
// This function flips the views vertically while it animates the transition from the first to the second view
fileprivate func flip(firstView: UIView, secondView: UIView) {
let transitionOptions: UIViewAnimationOptions = [.transitionFlipFromBottom, .showHideTransitionViews]
UIView.transition(with: firstView, duration: 0.5, options: transitionOptions, animations: {
firstView.isHidden = true
})
UIView.transition(with: secondView, duration: 0.5, options: transitionOptions, animations: {
secondView.isHidden = false
})
}
The code above fails to execute both animations at the same time.
It only works if I place the flip function call inside the completion block, after the first animation (moving frame) finishes, as the following:
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
secondView.center = self.view.center
firstView.center = self.view.center
}, completion: {(_) in
self.flip(firstView: dummyView, secondView: newGroupView)
})
I have even tried to use UIView.animateKeyframes but it still doesn't work.
Am I missing something here?
Thank you.
A couple of things:
In transition, specify .allowAnimatedContent option.
Defer the animation:
DispatchQueue.main.async {
UIView.animate(withDuration: 1, delay: 0, options: [.curveEaseOut], animations: {
secondView.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.midY)
firstView.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.midY)
self.flip(firstView: firstView, secondView: secondView)
}, completion: { _ in
})
}
Somewhat unrelated, you don't want:
secondView.center = self.view.center
Instead, do:
secondView.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.midY)
You want to set secondView.center in the coordinate space of the bounds of view, not in view's superview.

Custom Segue, Multiple Animations Not Syncing

There are a lot of excellent answers on this topic, but this one has me confused.
There are two commented out lines which don't seem to work properly. I'd like this custom segue to both slide AND shrink so that the effect is for the fromVC to disappear up into nothing and the toVC to arrive from nothing from the bottom.
However, if I try to do both simultaneously it fails. Either individually work fine (a zoom or a slide), but not together.
class UnwindScaleSegue: UIStoryboardSegue {
override func perform() {
scaleDown()
}
func scaleDown() {
let toVC = self.destination
let fromVC = self.source
let screenHeight = UIScreen.main.bounds.size.height
toVC.view.transform = CGAffineTransform.init(translationX: 0.0, y: screenHeight)
//toVC.view.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
fromVC.view.superview?.insertSubview(toVC.view, at: 0)
UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseInOut, animations: {
//fromVC.view.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
fromVC.view.transform = CGAffineTransform.init(translationX: 0.0, y: -screenHeight)
toVC.view.transform = CGAffineTransform.identity
}, completion: { success in
fromVC.dismiss(animated: false, completion: nil)
})
}
}
Solved! It turns out it has to do with how the transforms are combined. I'm not certain I understand, but something having to do with the vector nature of the transformations means you have to be careful when doing multiple transforms in the same animation.
By "concatenating" them carefully it works! However, for me, if I swapped the order, it didn't work.
The key lines are starred.
class UnwindScaleSegue: UIStoryboardSegue {
override func perform() {
scaleAway()
}
func scaleAway() {
let toVC = self.destination
let fromVC = self.source
let screenHeight = UIScreen.main.bounds.size.height
var translate = CGAffineTransform(translationX: 0.0, y:screenHeight) //**
let scale = CGAffineTransform(scaleX: 0.001, y: 0.001) //**
toVC.view.transform = scale.concatenating(translate) //**
fromVC.view.superview?.insertSubview(toVC.view, at: 0)
UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseInOut, animations: {
translate = CGAffineTransform(translationX: 0.0, y: -screenHeight) //**
fromVC.view.transform = scale.concatenating(translate) //**
toVC.view.transform = CGAffineTransform.identity
}, completion: { success in
fromVC.dismiss(animated: false, completion: nil)
})
}
}

UIView animate doesn't finish before Label is hidden

My label is disappearing before the animation runs.
The animation should run after a button is pressed and slide out a label and the Button. But when I press the button they are both hidden before the animation can slide them out.
func nextGame() {
UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
NSLog("Animation started")
self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
}, completion: { (finished: Bool) in
NSLog("Animation stopped")
self.labelWinningPlayer.isHidden = true
self.buttonNextGameLabel.isHidden = true
})
//sets buttons to start position
labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)
//hides buttons that lay under the animated buttons
for i in 1...9 {
if let button = view.viewWithTag(i) as? UIButton {
button.setImage(nil, for: .normal)
}
}
activeGame = true
}
//animation should get started with this button
#IBAction func buttenNextGameAction(_ sender: Any) {
nextGame()
}
//slides buttons in
func slideNextGameButtons() {
labelWinningPlayer.isHidden = false
buttonNextGameLabel.isHidden = false
UIView.animate(withDuration: 0.5, animations: {
self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
})
}
Here is the NSLog. According to that it's running the full animation...
2017-11-15 23:26:17.321465 [2442:245232] Animation started
2017-11-15 23:26:20.325137 [2442:245232] Animation stopped
Thanks for your help in advance!
Your code works perfectly:
Therefore something that you have not told us about is causing whatever the problem is.
EDIT: And yes indeed, it was the code you didn't tell us about that causes the problem. You told us about this:
UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
}, completion: { (finished: Bool) in
self.labelWinningPlayer.isHidden = true
self.buttonNextGameLabel.isHidden = true
})
But you didn't tell us about the next lines, which are this:
labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)
Those lines cancel the animation!
It seems you have not understood what an animation is. You animate first, and anything you want done after the animation, you put into the completion function. But those lines are something you want done after the animation. So put them into the completion function! Like this:
UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
}, completion: { (finished: Bool) in
self.labelWinningPlayer.isHidden = true
self.buttonNextGameLabel.isHidden = true
labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)
// ... and everything else in the method goes here too
})
And everything else in the method needs to be moved in there too. Everything that is to happen after the completion of the animation goes into the completion function. That is what completion means!
set the label and the button's super view clipsToBounds property to true
UIView.animate(withDuration: 3, delay: 0.0, options: [], animations: {
NSLog("Animation started")
self.labelWinningPlayer.center = CGPoint(x: (self.labelWinningPlayer.center.x) * 3, y: self.labelWinningPlayer.center.y)
self.buttonNextGameLabel.center = CGPoint(x: (self.buttonNextGameLabel.center.x) * 3, y: self.buttonNextGameLabel.center.y)
}, completion: { (finished: Bool) in
NSLog("Animation stopped")
self.labelWinningPlayer.isHidden = true
self.buttonNextGameLabel.isHidden = true
})

Resources