Im having abit of trouble animating a label to move into another position when a user scrolls horizontally.
Here is the snippet i have:
override func viewDidLoad() {
super.viewDidLoad()
buttonTextSpacing(UIButton: vysionButton, lineSpacing: 2.5, UIColor: .black)
buttonTextSpacing(UIButton: converseButton, lineSpacing: 2.5, UIColor: .black)
buttonTextSpacing(UIButton: storiesButton, lineSpacing: 2.5, UIColor: .black)
self.storiesCollectionView.delegate = self
self.storiesCollectionView.dataSource = self
// Scroll View
self.scrollView.contentSize = CGSize(width: self.scrollView.frame.width*2, height: self.scrollView.frame.height)
self.scrollView.addSubview(storiesCollectionView)
self.scrollView.showsHorizontalScrollIndicator = false
self.scrollView.delegate = self
}
func scrollViewDidScroll(scrollUIView: UIScrollView) {
print("scrollViewDidScroll")
DispatchQueue.main.async {
UIView.animate(withDuration: 0.4, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: {
self.scrollLabel.center.x = self.storiesButton.center.x - 1
}, completion: nil)
}
}
Basically what im trying to achieve is that when a user scrolls, the animation starts but does not finish until the scroll is finished to the next custom uiview (I have paging enabled also).
Currently it doesnt do that, im not able to call the scrolling event nor even make the label animate (To the new position) while scrolling.
Many thanks in advance for any advice or help.
Cheers,
Pon
As I understand you have some label as subview on scrollView and that label is located over some views that you scroll. You may use scrollView.contentOffset.x instead of animation. For example: You need to calculate the distance between the start position of label and end position. That distance divide by 100, you get step (1 percent of distance width) that you need to multiply by scrollView.contentOffset.x. Give more details of your question.
Related
I have a UIViewController with a UIScrollView as subview. the scrollview size and origin are computed properties.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let sizeWidth = view.frame.size.width - (view.frame.size.width / 5)
let sizeHeight = (view.frame.height / 5) * 3
let originX = (view.width-sizeWidth) / 2
// sizes & positions of container & subviews
slideScrollView.frame = CGRect(x: originX,
y: 50,
width: sizeWidth,
height: sizeHeight)
how it looks like
by tapping the sign in or login button, the scrollview should expand animated. but it is the opposite.
#objc private func loginButtonTapped() {
UIView.animate(withDuration: 5, delay: 0, options: .allowAnimatedContent) {
self.slideScrollView.frame.size.height += (self.view.frame.height / 5) * 1
}
}
this is the result
it should expand, but it sets back to the action height property and expand to regular size,
i hope anyone can tell me why this happens and may have a solution.
Thats because your viewDidLayoutSubviews gets called multiple times (In this case twice as I have noticed by adding debug statements) when you start your animation with UIView.animate(withDuration: and because you always reset the slideScrollView.frame in viewDidLayoutSubviews you see unnecessary side effects.
You can always check this by putting a break point in viewDidLayoutSubviews when loginButtonTapped gets triggered. Refer this question for similar explaination
If your intention to use viewDidLayoutSubviews is to know when view is properly loaded and its frames are updated properly you can always use
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let sizeWidth = view.frame.size.width - (view.frame.size.width / 5)
let sizeHeight = (view.frame.height / 5) * 3
let originX = (view.width-sizeWidth) / 2
// sizes & positions of container & subviews
slideScrollView.frame = CGRect(x: originX,
y: 50,
width: sizeWidth,
height: sizeHeight)
}
Now your loginButtonTapped should work fine.
As per apple docs: viewDidLayoutSubviews Called to notify the view controller that its view has just laid out its subviews.
With that I think my explanation above makes sense, you use UIView.animate(withDuration: to modify the frame of scrollView so obviously View updates/re-renders the subViews hence viewDidLayoutSubviews gets called when you call UIView.animate(withDuration: and because of your frame update code in viewDidLayoutSubviews you see adverse side effects
I have mapView to my ViewController in storyboard. It has 4 constraints ( Height equals: 300 , align trailing to: Safe Area, align Leading to: Safe Area and Align Top to: Safe Area. I created tapGestureRecognizer to my mapview. I want to resize mapview to full screen when user tap on a map.
private func setupMapView() {
let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(mapTouchAction(gestureRecognizer:)))
mapView.addGestureRecognizer(gestureRecognizer)
}
#objc func mapTouchAction(gestureRecognizer: UITapGestureRecognizer) {
}
I tried to change height constraint to screen Height but it is not what i want ( view is positioning in the middle of the screen and then its resizing , this is not what i am looking for) I used this code inside my mapTouchAction(). I want my view to resize with animation to the bottom view ( screen height). How can i achieve it? should i use CGAffineTransform or maybe theres another way? Any ideas?
for constraint in self.mapView.constraints {
if constraint.identifier == "mapViewHeightConstraintID" {
constraint.constant = UIScreen.main.bounds.height
}
}
UIView.animate(withDuration: 2, animations: {
self.mapView.layoutIfNeeded()
})
I found an easy solution for my problem. I only change my mapView frame. So inside tapGesture function mapTouchAction(_: UITapGestureRecognizer) i have
#objc func mapTouchAction(gestureRecognizer: UITapGestureRecognizer) {
UIView.animate(withDuration: 2, animations: {
self.mapView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
self.mapView.layoutIfNeeded()
})
}
This code change my mapView height to UIScreen Height without with a nice resizing animation for 2 seconds.
So I have two view and a button one of the view is hidden "View1" and the other is not "View2" , and once I click on the button "View1" will appear , but I want "View2" to go down , I will add image show what I want to do
Brute way, if your views has fix sizes:
1, create 3 variables for the position of the views
var view1Center: CGPoint = CGPoint(x: 100, y: 100)
var view2CenterBefore: CGPoint = CGPoint(x: 100, y: 100)
var view2CenterAfter: CGPoint = CGPoint(x: 100, y: 400)
2, In ViewDidLoad or ViewDidAppear set view's alpha to 0 and the positions
view1.alpha = 0
view2.alpha = 0
view1.center = view1Center
view2.center = view2CenterBefore
3, When you press the button, you should animate the moves and show view1.
#IBAction func showView1(_ sender: Any) {
UIView.animate(withDuration: 0.5, animations: {
view2.center = view2CenterAfter
})
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
UIView.animate(withDuration: 0.5, animatios: {
view1.alpha = 1
}
}
}
We can use UIStackView class for this with ease. We can add both the views in a UIStackView instance with vertical axis. view1 height should have Highest constraint priority (999) instead of required (1000). This way when view1 is hidden, it's height constraint won't have conflict.
You can take reference of following code snippet:
let stack = UIStackView()
// aligns subviews in top to bottom manner
stack.axis = .vertical
stack.addArrangedSubview(view1)
stack.addArrangedSubview(view2)
When view1 is kept hidden, view2 will automatically move up. StackView should not be given height constraint so that it will have inferred height of summation of its subviews.
I made an UIScrollView in a XIB for my onboarding. The UIScrollView has 3 onboarding views. Long story short:
This works perfect. However I want the top left and right buttons (Overslaan - Volgende) to animate up / off the screen when the third/last page is on screen. My UIScrollView starts behaving weird when I animate the buttons off:
This is the code im using:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageIndex = Int(targetContentOffset.pointee.x / self.frame.width)
pageControl.currentPage = pageIndex
if stepViews[pageIndex] is OnboardingLoginView {
moveControlConstraintsOffScreen()
} else {
moveControlConstraintsOnScreen()
}
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.layoutIfNeeded()
}, completion: nil)
}
I debugged the code and it turns out that setting a new constant for the constraints causes the issue, regardless of the animation block. How do I make the buttons move up/off the screen without my scrollView behaving weird?
It looks like triggering a layout pass is interfering with your scroll view positioning. You could implement func scrollViewDidScroll(_ scrollView: UIScrollView) and try to update the button view on a per-frame basis, without changing Auto Layout constraints. I usually use the transform property for frame changes outside of Auto Layout, since any changes to frame or bounds are overwritten during the next layout pass.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard mustBeOnLastPage else {
buttonOne.tranform = .identity
buttonTwo.tranform = .identity
return
}
let offset = scrollView.contentOffset.x
buttonOne.tranform = .init(translationX: 0, y: offset)
buttonTwo.tranform = .init(translationX: 0, y: offset)
}
Old answer
This interpretation is a bit of tangent of what you're asking for.
Since it looks like you're using the scroll view in a paging context, I would approach this problem by using UIPageViewController. Since UIPageViewController uses UIScrollView internally, you can observe the contentOffset of the last view in the scroll view to determine how far along the page has scrolled.
Yes, this involves looking inside the view hierarchy, but Apple hasn't changed it for half a decade so you should be safe. Coincidentally, I actually implemented this approach last week and it works like a charm.
If you're interested, I can further expand on this topic. The post that pointed me in the right direction can be found here.
Here is what i do
I can't post image，you can look at this http://i.imgur.com/U7FHoMu.gif
and this is the code
var centerYConstraint: Constraint!
func setupConstraint() {
fadeView.snp.makeConstraints { make in
make.centerX.equalToSuperview()
centerYConstraint = make.centerY.equalToSuperview().constraint
make.size.equalTo(CGSize(width: 50, height: 50))
}
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint,targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageIndex = Int(targetContentOffset.pointee.x / self.view.frame.width)
if pageIndex != 1 {
centerYConstraint.update(offset: self.view.frame.height)
} else {
centerYConstraint.update(offset: 0)
}
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.view.layoutIfNeeded()
}, completion: nil)
}
Based on #CloakedEddy's answer I made 2 changes:
1: It seems layoutSubviews is responsible for the weird behaviour. To fix this I prevent the scrollView from calling layoutSubviews all the time:
override func layoutSubviews() {
super.layoutSubviews()
if !didLayoutSubviews {
for index in 0..<stepViews.count {
let page: UIView = stepViews[index]
let xPosition = scrollView.frame.width * CGFloat(index)
page.frame = CGRect(x: xPosition, y: 0, width: scrollView.bounds.width, height: scrollView.frame.height)
scrollView.contentSize.width = scrollView.frame.width * CGFloat(index + 1)
}
didLayoutSubviews = true
}
}
2: If you want to update your views for device orientations:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
onboardingView.didLayoutSubviews = false
onboardingView.setNeedsLayout()
}
I'm making squares appear at the top of the screen, run till they reach the bottom and then disappear. This is done adding a new UIView to the ViewController's view and then, after the animation is completed, removing it from the subviews array. To add some beauty to all of this, I apply a random rotation using a CGAffineTransform at the moment of their creation.
The curious thing here is that when they are moving, they are being scaled randomly! I know this must be related to the rotation, because if I don't apply it, all the squares move perfectly without scaling, but when I apply it, it happens, so...
I hope someone could test it and tell me what's happening... Why are squares scaling???
This is the code:
import UIKit
class ViewController: UIViewController {
var timer: Timer!
override func viewDidLoad() {
timer = Timer.scheduledTimer(
timeInterval: 1,
target: self,
selector: #selector(createView),
userInfo: nil,
repeats: true
)
}
#objc private func createView () {
let v = UIView(frame: CGRect(
x: self.view.bounds.width / 2 - 50,
y: -100,
width: 100,
height: 100
))
v.backgroundColor = UIColor.red
v.transform = CGAffineTransform(
rotationAngle: CGFloat(Double(arc4random_uniform(360)) * M_PI / 180)
)
self.view.addSubview(v)
UIView.animate(withDuration: 5, delay: 0, options: [.curveLinear], animations: {
v.frame.origin.y = self.view.bounds.height
}, completion: {
_ in
v.removeFromSuperview()
})
print(self.view.subviews.count)
}
}
The first rule of animation club is don't manipulate a view's frame when you've changed it's transform.
If a view's transform is not the identity transform then the frame is undefined, and trying to change the frame will result in undefined behavior. It sounds like you're experiencing some of that undefined behavior.
You should refactor your code to manipulate the view's center property rather than the frame, or apply your offset using the transform, but that is tricky since rotation changes the frame of reference for the offset.
I recommend adjusting the view's center property.