iOS animate button while scrolling list - ios

Question

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?

Answer 1

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.