I am trying to add the Instagram like animation on my app that minimizes the title "Instagram" and moves the display to the entire page.
In my app, i have two UILabels - chapterNameNumberLabel and chapterNameLabels and a UITextView. On scrolling in the UITextView, i want the chapterNameNumberLabel and the chapterNameLabels to minimize and the entire page to be filled with the UITextView contents.
I have tried the below:(used pointers mentioned in the answer here Finding the direction of scrolling in a UIScrollView?
Obtained the below in viewDidLoad():
xLabel = self.chapNameNumberLabel.center.x;
yLabel = self.chapNameNumberLabel.center.y;
widthLabel = self.chapNameNumberLabel.frame.width;
heightLabel = self.chapNameNumberLabel.frame.height;
xNameLabel = self.chapterNameLabel.center.x;
yNameLabel = self.chapterNameLabel.center.y;
widthNameLabel = self.chapterNameLabel.frame.width;
heightNameLabel = self.chapterNameLabel.frame.height;
And called the below method:
func scrollViewDidScroll(scrollView: UIScrollView) {
if(self.lastContentOffset > 0 ){
if (self.lastContentOffset > scrollView.contentOffset.y) {
//print("Up");
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self.chapNameNumberLabel.frame = CGRectMake(self.xLabel - 100, self.yLabel - 10, self.widthLabel, self.heightLabel);
self.chapterNameLabel.frame = CGRectMake(self.xNameLabel - 140, self.yNameLabel - 10 , self.widthNameLabel, self.heightNameLabel);
}, completion: nil)
}
else if (self.lastContentOffset < scrollView.contentOffset.y){
print("Down");
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.chapNameNumberLabel.frame = CGRectMake( 100 , -10, 5, 5);
self.chapterNameLabel.frame = CGRectMake(50, -10, 5, 5);
}, completion: nil);
}
}
// update the new position acquired
self.lastContentOffset = scrollView.contentOffset.y
}
The animation is okay, but the problem that i am facing are:
I am unable to get the 'font size minimizing' effect on the labels. The labels in my app just disappear without reducing the font size. What animation type should be used for achieving this font size minimization on scrolling?
Also, the values that i have set on scrolling down(within the scrollViewDidScroll) are
self.chapNameNumberLabel.frame = CGRectMake( 100 , -10, 5, 5);
self.chapterNameLabel.frame = CGRectMake(50, -10, 5, 5); and on scrolling up are trial and error values. The labels are not properly aligned when i rotate the screen left and right(on simulator). Could some one please tell me how to calculate this so that it works on all screen orientations?
I have used Swift 2 , Auto layout.
Related
I want to implement a program that lets the user click on a button and the textView should auto scroll to the bottom. I have tried many things available on the internet but not working as I want, I am new to Xcode, Please help...
This is what I have tried:
self.textView.isScrollEnabled = false
UIView.animate(withDuration: 12.0, delay: 0,options: ([UIView.AnimationOptions .repeat]), animations: {() -> Void in
self.textView.contentOffset = CGPointMake(0, self.textView.bounds.size.height)
}, completion: { _ in })
This is working but not as I want. It only scrolls the text which is on the screen not all the text.. please help..
I have also tried this:
scrollView.contentOffset = CGPointMake(0,0);
CGPoint point = textfield.frame.origin ;
scrollView.contentOffset = point
I got this from the internet but it does not work.
Firstly, bounds.size.height and frame.size.height here is just the size of your TextView in your parent view.
The thing you should notice here is the content inside your textView which is your contentSize. You just need to scroll to the end of your contentSize.height
Code will be like this
// scroll to the end of your content size height
self.textView.setContentOffset(CGPoint(x: 0, y: self.textView.contentSize.height), animated: true)
I have two methods:
private func showPicker() {
UIView.animate(withDuration: 0.3,
animations: {
var pickerFrame = self.vPickerWrapper.frame
pickerFrame.origin.y = self.view.frame.size.height - 300.0
self.vPickerWrapper.frame = pickerFrame
self.bIsShowingPicker = true
self.view.layoutIfNeeded()
self.view.updateConstraintsIfNeeded()
})
}
private func closeThePicker() {
UIView.animate(withDuration: 0.3,
animations: {
var pickerFrame = self.vPickerWrapper.frame
pickerFrame.origin.y = self.view.frame.size.height + 1
self.vPickerWrapper.frame = pickerFrame
self.bIsShowingPicker = false
self.view.layoutIfNeeded()
self.view.updateConstraintsIfNeeded()
})
....
the first method is called when the user touches a text field that requires them to populate from the pickerview. The second method is called when either the close or select button is touched within the wrapper.
The wrapper is created in storyboard and has constraints (trailing, leading bottom) to position it off screen. I initially made the bottom constraint a IBOutlet and wanted to change its constant to handle the animation. (Which I do with other objects in this VC). I then tried to work with CGAffineTransform.translate and .identity and finally dropped down to working with the frame. In all three cases the wrapper will display but not close (move back off screen).
Here's the value of vPickerWrapper after I set its frame to pickerFrame:
pickerFrame CGRect (origin = (x = 0, y = 668), size = (width = 375, height = 300))
which is what I am expecting, just not any animation in the sim. The view never moves. Any idea why the display is not showing it in the new coordinates?
Only occurs in iphone X
I'm making a view appear and disappear from bottom of screen using CGAffinetransform(translationY), everything works fine in every devices but in iphone x. Two labels in a stack view as a subview of a uiview when animating labels start from 20px higher then animation starts.
UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseInOut, animations: {
self.stackOrderDetailsContainer.transform = CGAffineTransform(translationX: 0, y: self.stackOrderDetailsContainer.frame.size.height)
self.blackTransparentView.transform = .identity
self.blackTransparentView.alpha = 0
self.viewArrowHolder.transform = CGAffineTransform(rotationAngle: CGFloat(-2*Double.pi))
}, completion: nil)
edit: Added code snippet
I am developing a small application for tvOS where I need to show a UITextView.
Unfortunately sometimes this text can't fit inside the screen, that's why I need a way to scroll to the bottom of it programmatically.
I've tried using the following code:
self.setContentOffset(offset, animated: true)
It's actually working as intended, except for the fact that I need to handle the animation speed, so that the user can actually read; at the moment it's too fast.
This is what I tried to do, but with little success:
let offset = CGPoint(x: 0, y: contentSize.height - bounds.size.height)
UIView.animate(withDuration: 4, animations: {
self.setContentOffset(offset, animated: false)
})
I need a way to keep the text in place and scroll it to show the missing lines.
I am using a UITextView inside an UIScrollView.
Thanks.
If anyone is looking for a solution, this is what I ended up using:
var textTopDistance = 100
//calculate height of the text not being displayed
textNotVisibleHeight = descriptionLabel.contentSize.height - scrollView.bounds.size.height
func scrollText() {
//start new thread
DispatchQueue.main.async() {
//animation
UIView.animate(withDuration: 6, delay: 2, options: UIViewAnimationOptions.curveLinear, animations: {
//set scrollView offset to move the text
self.scrollView.contentOffset.y = CGFloat(self.textNotVisibleHeight - self.textTopDistance)
}, completion: nil)
}
}
It's not perfect I know, but at least it's working as intended.
I have added a UIButton to storyboard and then added my image to the button. What I am looking to do is when you tap on the button the height increases slightly and then the button decreases in height by about a quarter.
#IBAction func StopsClick(sender: UIView) {
//Get the y coordinates of Image
let origin = sender.bounds.origin.y
//This decreases the height of Image but the image moved. I want the image to remain stationary and only the top of the image to increase in height.
UIView.animateWithDuration(0.5) {
sender.bounds = CGRectMake(0, origin, sender.bounds.width, sender.bounds.height * 1.2)
}
UIView.animateWithDuration(1.0) {
sender.bounds = CGRectMake(0, orgin, sender.bounds.width, sender.bounds.height * 0.4)
}
}
You should be able to get the effect you're after using transforms.
I would do the following:
Start with the identity transform.
Shift the origin of the transform down to the bottom of the image.
Increase the transform's scale.y as desired.
Shift the transform's origin back to the center of the image
Apply that transform to the button in your animation. Then animate it back to the identity transform.
If you don't shift the transform and only scale it it will grow in all directions from the center. (or only up and down if you only increase the scale.y)
Edit:
The code might look like this:
let halfHeight = button.bounds.height / 2
//Make the center of the grow animation be the bottom center of the button
var transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
tranform = CGAffineTransformScale( transform, 1.0, 1.2)
tranform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5)
{
button.transform = transform
}
The above code animates the button to 120% height, and leaves it there.
You could use one of the longer variants of animateWithDuration that takes options to make the animation auto-reverse. I leave that as an exercise for you.
Edit #2:
I banged out some code to do a 3-step animation:
func animateButton(step: Int)
{
let localStep = step - 1
let halfHeight = aButton.bounds.height / 2
var transform: CGAffineTransform
switch step
{
case 2:
//Make the center of the grow animation be the bottom center of the button
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 1.2)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 1:
//In the second step, shrink the height down to .25 of normal
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 0.25)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 0:
//in the final step, animate the button back to full height.
UIView.animateWithDuration(0.5)
{
aButton.transform = CGAffineTransformIdentity
}
default:
break
}
}
You'd invoke it with
animateButton(3)
It would be cleaner to use an enum for the step number, and it could use some range checking to make sure the input value is 3, 2, or 1, but you get the idea...