UIScrollView - Move Subview While Scrolling

Question

I have a problem finding the logic in moving a subview inside a scrollview on the Y axis when the latter is scrolled on its X axis.

How can I reliably change a subview's Y axis until a certain point while scrolling a UIScrollView on its X axis?

For further clarification:

I have a paged UIScrollView which automatically goes to the next page when 50% of the next page is visible.

Now, what I'm trying to do is to move an image from the view's center (where it is centered), on its Y axis to the top of the view until it reaches an Y origin of 40 points while scrolling the scrollview (superview) horizontally.

While I scroll the scrollView horizontally, the Y origin of the image (or center Y as it is written in the code below), would decrease until a certain point (in my case 40 points) and stay there while I'm scrolling through the other pages.

Right now I'm using the scrollview's contentOffset.x to calculate the subview's Y axis but the values I get from contentOffset.x are unreliable since the property is skipping values most of the time. I also have to use a compensatory value when scrolling to right scrollView.contentOffset.x * 1.34 which I really don't want to manually calculate (I want the image to stop at origin.y = 40 );

The code I'm using inside scrollViewDidScroll :

CGPoint headerImageCenter = self.logo.center;

    if (scrollView.contentOffset.x < 0) {
        // We're scrolling right, move image back to center.x and make a bounce effect
        headerImageCenter.y = self.view.center.y - (scrollView.contentOffset.x / 3);
        headerImageCenter.x = self.view.center.x + scrollView.contentOffset.x;

    } else {
        // We're scrolling left, move image to top
        if (self.pageControl.currentPage == 0) {

            headerImageCenter.y = self.view.center.y - (scrollView.contentOffset.x * 1.34);
        }

        headerImageCenter.x = self.view.center.x + scrollView.contentOffset.x;
    }


    self.logo.center = headerImageCenter;

I'm trying to reproduce the following animation from Flickr's app where the logo goes to the top and stays there while scrolling: http://goo.gl/JSLDTq

I would highly appreciate any help! Thanks!

Answer 1

if you wanna some suggestion just try animation for this solution

take "flikerLabel" as subview of self.view not of scrollview and animate when index move to 1

 [UIView animateWithDuration:0.5f animations:^(void){

     flikerLabel.rect = CGRectMake(200,100,100,50);
     //change font size if you want it will automatic do animation like gif
 }];

Answer 2

At first, I would suggest not to make self.logo a subview of the scrollview, so you don't need to mess with the x-coordinate. Then I find it easier to calculate some percentage value for the placing, ie

CGFloat percentage = scrollView.contentOffset.x/scrollView.bounds.size.width;
percentage = MAX(0, MIN(1, percentage)); // Limit percentage in this case, but calculating it different and not limiting could give you interesting bounce effects

Simply calculate your views center based on the percentage:

CGFloat startY = CGRectGetMidY(self.view.bounds);
CGFloat targetY = 40;
CGFloat currentY = startY*(1 - percentage) + targetY*percentage;

I doubt that the values in scrollViewDidScroll are not reliable enough for this case. But you could have a look at https://developer.apple.com/library/ios/samplecode/StreetScroller/ they subclass UIScrollView and use the layoutSubviews to position things.