I want animation like home screen of this app.This screen has a view (with a label on it) on top and a table view under it. When i scroll the table the top view and title on it become small with animation and after a specific point it becomes like navigation bar with title in centre. And the same thing when i scroll down.
Here is what i tried so far
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGPoint offset = scrollView.contentOffset;
NSLog(#"y is::: %f", offset.y);
if (offset.y > 0 && offset.y < 16 && self.topView.frame.size.height > 64) {
[UIView animateWithDuration:0.8 animations:^{
CGRect rect = self.topView.frame;
rect.size.height = rect.size.height-offset.y;
self.topView.frame = rect;
}completion:^(BOOL finish){
}];
}
else if(offset.y <= 0 && offset.y > -16 && self.topView.frame.size.height < 80)
{
[UIView animateWithDuration:0.8 animations:^{
CGRect rect = self.topView.frame;
rect.size.height = 80;
self.topView.frame = rect;
}completion:^(BOOL finish){
}];
}
}
Note that my top view initial height is 80 and i want to make it 64 when scroll up and vice versa.
with this code the view height animated but it depends upon animation duration.So if i scroll fast then it is not working properly.The original app i mentioned have very smooth animation. How could i achieve that?
Screen shot of original App-
These screen shots showing three different scroll position, please note the "MySurgery" text on top.1- Larger text and right align.
2- small text and near centre position
3- smaller text and centralised(like navigation bar)
I think you dont need animation for this, you just need some calculations and setting frame of the top view. like,
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGPoint offset = scrollView.contentOffset;
if (offset.y>0 && offset.y<64) {
[topView layoutIfNeeded];
CGRect viewFrame = topView.frame;
viewFrame.size.height--;
topView.frame = viewFrame;
}
}
Note that layoutIfNeeded is required if your view is using autolayout
Related
I have two views side by side(left & right).At one time i am just showing one view other view not visible because i have moved that view out of scene towards the right of screen.I have set the x position in such a way so that it is not visible(view is always to the right of screen so not visible).So i press next button which is near to first view then my second view is visible & first view is hidden. I have used animation to slide thew view from left to right & right to left.
-(void)handleSingleTapGesture:(UITapGestureRecognizer *)tapGestureRecognizer
{
NSLog(#"first");
CGFloat screenWidth = 0.0;
if(IS_IPHONE_6)
{
screenWidth=self.view.frame.size.width-120.0;
}
if(IS_IPHONE_5)
{
screenWidth=self.view.frame.size.width-68.0;
}
NSLog(#"New screen width is %f",screenWidth);
[self.back_view setHidden:false];
[self.front_view setHidden:true];
[UIView animateWithDuration:0.5 animations:^{
self.front_view.frame = CGRectOffset(self.front_view.frame, -screenWidth, 0.0);
self.back_view.frame = CGRectOffset(self.back_view.frame, -screenWidth, 0.0);
}];
}
-(void)handleSingleTapGesture_one:(UITapGestureRecognizer *)tapGestureRecognizer
{
CGFloat screenWidth = 0.0;
if(IS_IPHONE_6)
{
screenWidth=self.view.frame.size.width-120.0;
}
if(IS_IPHONE_5)
{
screenWidth=self.view.frame.size.width-68.0;
}
NSLog(#"New screen width is %f",screenWidth);
[self.back_view setHidden:true];
[self.front_view setHidden:false];
[UIView animateWithDuration:0.5 animations:^{
self.front_view.frame = CGRectOffset(self.front_view.frame, screenWidth, 0.0);
self.back_view.frame = CGRectOffset(self.back_view.frame, screenWidth, 0.0);
}];
}
On the backView i have added a subview on bottom-right so when ever i try to add the view inside that view then then main view is shifted to the right i don't know why.Please tell me how can i get the solution?
Under my self.view I have a UIScrollView called self.scrollView and under self.scrollView I have two UIViews called self.panedView and self.recordView. My self.panedView has a height of 568 and a Y origin of 0 and my self.recordView has a height of 274 and a Y origin of 568. My self.scrollView has a content size height that is equal to the height of 842 (height of self.panedView + the height of self.recordView). I want to add a UIImageView called self.iconImageView over self.panedView so that when I scroll, the imageView will move up to a certain position in relation to how much I scroll. self.iconImageView has a Y position of 184 is only a subclass of self.view. I was initially moving my self.iconImageView with UIView animationWithDuration whenever an up swipe was detected by doing the following:
- (void)viewDidLoad
{
[self.view insertSubview:self.iconImageView aboveSubview:self.panedView];
}
[UIView animateWithDuration:.25 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.iconImageView.frame = CGRectOffset(self.iconImageView.frame, 0, -85.5);
} completion:nil];
How can I replicated this now that I've switch over to a UIScrollView? I'm thinking something like this might work:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if(self.iconImageView.center.y >= 184 && self.iconImageView.center.y <=451)
{
CGPoint newCenter = CGPointMake(self.view.bounds.size.width/2, self.iconImageView.center.y + (self.scrollView.contentOffset.y/self.scrollView.contentOffset.y));
self.iconImageView.center = newCenter;
}
}
Implement UIScrollViewDelegate. Whenever the scroll view is scrolled(even programatically), you get an event.
I have view with UITableView. Above this list I have UIButton. I need to implement an animation what will move button vertically according to scrolling on list and return to base location when scrolling is finished. I show scrolling down in pictures bellow:
This is not scrolled list:
This is list scrolled to half:
This is list fully scrolled:
For now I detect start and stop scrolling list events and do animation like that:
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGRect newFrame = button.frame;
newFrame.origin.y = screenHeight - (newFrame.size.height/2.0);
[UIView animateWithDuration:2
animations:^{
button.frame = newFrame;
}];
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGRect newFrame = storedButtonFrame;
[UIView animateWithDuration:2
animations:^{
button.frame = newFrame;
}];
}
I have few issues with this First is that when I scrolling down my animation is animating to then end and I want to animate based on scrolled list eg. when I scroll down list for 10px I would like to move button only for 10px not to the end of list. Second is that I get stop scroll event when begin scroll animation is still running the start animation is blink to the end and the end animation is start animating what is definitly what I dont want. I dont have to much experiance in iOS and I really dont have any ide how can I do this. Have any idea how can I do something like this?
Instead of using scrollViewWillBeginDragging: you could use scrollViewDidScroll: like so:
/// Animate the button position as the scroll view scrolls
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat percentage = scrollView.contentOffset.y / scrollView.contentSize.height;
CGRect frame = _button.frame;
frame.origin.y = scrollView.contentOffset.y + percentage * self.tableView.frame.size.height;
_button.frame = frame;
}
/// Animate the button back to the top-right corner
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGRect frame = _button.frame;
frame.origin.y = scrollView.contentOffset.y;
[UIView animateWithDuration:0.4f
animations:^{
_button.frame = frame;
}];
}
This makes the button follow the scroll indicator as you scroll the list. scrollViewDidScroll: fires very often so the movement is smooth.
When the list stops, it goes back to its default position at the top-right, which you get from contentOffset.y.
I have a UIView at the bottom left of its superview, i.e.its frame is like
[myView setFrame:CGRectMake(0,superView.bounds.size.height-myViewHeight,myViewWidth,myViewHeight)];
I want to animate its size such that its bottom left point remains fixed at its position. I am not sure how to play with anchor point property of layers.
Currently I am increasing its size using the following lines of code.
[UIView animateWithDuration:0.2 animations:^{
[bottomLbl setFrame:CGRectMake(0, bottomView.bounds.size.height-250, 300, 250)];
This works fine but when I try to bring back to its original size, its bottom point gets lifted at the start of animation and settles down at the end of animation.
First define the point for the bottom left corner...
CGPoint bottomLeft = CGPointMake(0, 480); // this can be anything.
Then you need to define the sizes (big and small).
CGSize bigSize = CGSizeMake(280, 280);
CGSize smallSize = CGSizeMake(50, 50); // again, these can be anything.
Then animate them...
// create the rect for the frame
CGRect bigFrame = CGRectMake(bottomLeft.x, bottomLeft.y - bigSize.height, bigSize.width, bigSize.height);
CGRect smallFrame = CGRectMake(bottomLeft.x, bottomLeft.y - smallSize.height, smallSize.width, smallSize.height);
[UIView animateWithDuration:0.2
animations:^{
// set the rect onto the view
bottomLbl.frame = bigFrame;
// or
bottomLbl.frame = smallFrame;
}];
As long as you set the frame and the calculated end frames are correct and it's all done in one animation then the bottom left corner won't move.
If this doesn't help can you please post a video of what is happening (and all your animation code).
EDIT
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
// set the rect onto the view
bottomLbl.frame = bigFrame;
// or
bottomLbl.frame = smallFrame;
}
completion:nil];
I'm attempting to recreate the animation done in the Google Maps app that occurs when you select a location on the map. After selecting a location a UIView pokes up from the bottom of the screen. You can pull that up to reveal a UIScrollView with additional content. I'm curious how they make it so you can only scroll the content inside the UIScrollView when the parent view is at the "top". I understand that you could setScrollEnabled:, but they somehow do it on the fly so that when sliding your finger up the parent view "docks", and then the inner content scrolls, and when you are scrolling the content down, it stops once it reaches the top of the content and starts pulling the header down with it.
Any ideas?
I solved this problem by doing something like this: Create an animation that moves the scroll view's parent from the half-visible position to the top....
- (void)setScrollViewExpanded:(BOOL)expanded {
BOOL isExpanded = self.scrollViewContainer.frame.origin.y == 0.0;
if (isExpanded == expanded) return;
CGRect frame = self.scrollViewContainer.frame;
CGRect newFrame;
if (expanded) {
newFrame = CGRectMake(0, 0, frame.size.width, self.view.frame.size.height);
self.scrollView.delegate = nil;
self.scrollViewContainer.frame = CGRectMake(0, frame.origin.y, frame.size.width, self.view.bounds.size.height);
self.scrollView.delegate = self;
} else {
newFrame = CGRectMake(0, 300, frame.size.width, frame.size.height);
}
[UIView animateWithDuration:1 animations:^{
self.scrollViewContainer.frame = newFrame;
} completion:^(BOOL finished) {
if (!expanded) {
self.scrollView.delegate = nil;
self.scrollViewContainer.frame = CGRectMake(0, 300, self.scrollViewContainer.bounds.size.width, self.view.bounds.size.height-300);
self.scrollView.delegate = self;
}
}];
}
Trigger the animation based on change in scroll view's content offset relative to the top...
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView.contentOffset.y > 10.0) {
// 10 is a little threshold so we won't trigger this on a scroll view
// "bounce" at the top. alternatively, you can set scrollView.bounces = NO
[self setScrollViewExpanded:YES];
} else if (scrollView.contentOffset.y < 0.0) {
[self setScrollViewExpanded:NO];
}
}
Edit: I changed the expand animation after rechecking my old code. It needs to be a little more complex due to feedback on the content offset while changing the frame. The edit doesn't change the size during the animation, just the origin. It changes the size before or after the animation and blocks the delegate messages temporarily. Also note the scroll view's autoresize mask should be set to fill the container view.