How to show a growing sub view over a parent view - ios

I have a view as follows
The colored tiles are basically views. When i long press on the tiled views i am creating a copy of the tile in which it was long pressed. Also when it is long pressed there should be a view as per the following image.
The drop area should come up from bottom part or it should grow from bottom insect of the screen.
When long pressing on the tiled view i am creating a copy of the view and i am able to make the copy successfully and drag on the screen, but i am stuck at creation of this drop area and its animation.
Can someone guide me how to implement this....
Thanks in advance...

let dropView = UIView(frame: CGRect(x:0, y:0, width:300, height:100))
dropView.frame.origin = CGPoint(x: 0, y: self.view.frame.size.height)
dropView.center = CGPoint(x:self.view.frame.size.width/2, y:dropView.center.y)
dropView.backgroundColor = UIColor.blue
self.view.addSubview(dropView)
When you want to animate it to show up use this:
UIView.animate(withDuration: 0.5, delay: 0.0, options: [.repeat, .curveEaseOut, .autoreverse], animations: {
dropView.frame.origin = CGPoint(x:dropView.frame.origin.x, y:dropView.frame.origin.y - dropView.frame.size.width - 10)
}, completion: nil)

Related

UICollectionView zoom entire grid

I am using a UICollectionView to display a grid of cells with 3 columns. When a cell is selected, I'd like to zoom into the entire collection with the selected cell in the centre. I'd also like to fade out the surrounding cells and keep the selected on at full opacity.
The following code scales the grid but doesn't scroll to the selected cell:
UIView.animate(withDuration: 0.35, animations: {
self.collectionView.transform = CGAffineTransform(scaleX: 3, y: 3)
})
I was hoping I could do it by changing the UICollectionViewFlowLayout and the UICollectionView frame but I'm not sure whether I'm going down the wrong path with this (the following code just moves all the cells over to the left):
UIView.animate(withDuration: 0.35, animations: {() -> Void in
self.collectionView.setCollectionViewLayout(self.zoomedGridLayout, animated: true)
let zoomedRect = CGRect(x: -rect.width, y: 0, width: rect.width*3, height: rect.height)
self.collectionView.frame = zoomedRect
self.collectionView.collectionViewLayout.invalidateLayout()
})
The collection view doesn't need to be scrollable after the animation (I intend to use it only as a transition to another view).

UIView Frame View and CGRect Not Working on First Call

So I am trying to slide a tableview in over top of a lower view, which happens to also to be a uitableview. I have a sandwich icon to slide it in and a close icon to slide it out.
The button switching works great. However, when clicking the close button, the first time, the tableview will not slide out, it will basically slid out and right back to where it is.
However subsequent times, after the close icon switches back to sandwich, and then I click again to bring back close, it will slide it out just fine. Why it not work on the first try.
Below is my code. As you can see my CGRect is supposed to animate and slide the view to the displaywidth X.
#objc func showNewsList(_ sender: UIButton) -> Void {
let displayWidth: CGFloat = self.view.frame.width
let displayHeight: CGFloat = self.view.frame.height
newsIconClose.isHidden = true
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
newsSourceTable.frame = CGRect(x: displayWidth, y: 0, width:
displayWidth, height: displayHeight + 100)
self.addNewsIcon()
})
}
Bingo, figured it out. For whatever reason, CGRect wasn't liked, but this is.
self.newsSourceTable?.frame.origin.x = 0

How to implement such pop over view animation?

I was using this ride-sharing ios app and found this pop over animation of options view. I wanted to implement similar pop over but could figure out if it is a custom transition or animation? Here is a link to the GIF of popover in application.
It will be helpful to link me to examples/tutorial/code with similar animation so that I can begin implementing on my ios app.
This is pretty simple. Just position your options view on the screen where you want it to appear and set the alpha to 0 so it is hidden. Then, prior to animation, make the view wider using scaleX, and translate it down using translationY. Then simply animate it back to .identity and animate the alpha back to 1.0 so it fades in. A basic example is below. When you dismiss the view you just do the opposite. Let me know if you need help with that.
yourView.transform = CGAffineTransform(scaleX: 1.3, y: 0)
yourView.transform = CGAffineTransform(translationX: 0.0, y: 200.0)
yourView.alpha = 0
UIView.animate(withDuration: 0.3, animations: {
yourView.transform = .identity
yourView.alpha = 1.0
})
I achieved the following animation using leading, trailing and button constraints. Please let me know if such animation can be done in other ways.
yourview.alpha = 0
UIView.animate(withDuration: 0.6, animations: {
self.leadingConstraints.constant = 20
self.trailConstraints.constant = -20
self.buttonConstraints.constant = 20
self.yourview.alpha = 1
self.yourview.layoutIfNeeded()
})

Trying to animate the titleLabel of my custom UIButton located in a tableview cell fails

The code inside the custom button class is:
func animate() {
let translationForTitle = CGAffineTransform(translationX: frame.height, y: 0)
UIView.animate(withDuration: 3, delay: 0.0,
usingSpringWithDamping: 0.2,
initialSpringVelocity: 0.1, options: [.beginFromCurrentState, .curveEaseOut], animations: {
titleLabel?.layer.setAffineTransform(translationForTitle)
}, completion: nil)
}
The button is linked to an interface builder cell button.
What is supposed to happen is: the button titleLabel should move from the middle of the button to outside of the button under 3secs.
What is actually happening:
The titleLabel first teleport on the left side of the button and then scroll to the right side on the button.
any idea?
EDIT:
the cell containing the button animates to expand (change of height) with a tableview beginUpdate and endUpdate.

Running animation on tableViewCell blocks user interaction?

I'm growing a subview of my tableViewCell in an animation.
UIView.animate(withDuration: TimeInterval(timeLeft), delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
var newFrame = self.viewToScale.frame;
newFrame = CGRect(x: 0, y: newFrame.origin.y, width: newFrame.size.width + CGFloat(widthLeftToGrow) , height: newFrame.size.height)
self.viewToScale.frame = newFrame
})
I'm getting the desired animation, but interacting with my cell has become very unreliable. When I'm trying to swipe to delete I have to spam it until I seemingly swipe at a very specific "right time".
I would assume that I need to run this on a background thread, but updating the UI on the background thread is incorrect isn't it?
How can run this animation on my tableViewCell without sacrificing the users ability to interact with the cell?
change to : options: UIViewAnimationOptions.AllowUserInteraction,
AllowUserInteraction

Resources