Question

I’m looking to animate bubbles with text on them to slide on and off the screen. The ideal implementation for this animation is iOS’s horizonatal scroll with paging enabled. I definitely want the “bounce” when I reach the end of the speech bubbles and I definetely want the bubbles to track the finger until a certain point before they will slide off the screen. I believe this is not the same as a swipe (which is just a flick in one direction).

However, the problem with the horizontal scroll is that it is optimized for a static number of images. I will be having a dynamic number of images and as far as I can tell, you cannot dynamically append images to horizontal scroller. The idea is the app dynamically adds content to the scroller as you continue to progress through it.

The scroller was easy enough to get going but I’m going to have to tear it down now. How can I get started with the gesture (I’m not sure if the standard gesture recognizers will work for me at this point) as well as the animation? I’ve never worked with that portion of iOS code before.

Answer 1

I’m not sure if I follow your question entirely, but if you want to animate the movement of something based upon a gesture, you can use a UIPanGestureRecognizer and change the center of whatever subview you want. For example, in viewDidLoad you would:

UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(movePiece:)];
[whateverViewYouWantToAnimate addGestureRecognizer:panGesture];

You can then have your gesture recognizer move it where ever you want:

- (void)movePiece:(UIPanGestureRecognizer *)gestureRecognizer
{
    static CGPoint originalCenter;

    if (gestureRecognizer.state == UIGestureRecognizerStateBegan)
    {
        originalCenter = [gestureRecognizer view].center;
    }
    else if (gestureRecognizer.state == UIGestureRecognizerStateChanged)
    {
        CGPoint translation = [gestureRecognizer translationInView:self.view];

        gestureRecognizer.view.center = CGPointMake(originalCenter.x + translation.x, originalCenter.y);

        // if you wanted to animate both left/right and up/down, it would be:
        // gestureRecognizer.view.center = CGPointMake(originalCenter.x + translation.x, originalCenter.y + translation.y);
    }
    else if (gestureRecognizer.state == UIGestureRecognizerStateEnded)
    {
        // replace this offscreen CGPoint with something that makes sense for your app

        CGPoint offscreen = CGPointMake(480, gestureRecognizer.view.center.y);

        [UIView animateWithDuration:0.5
                         animations:^{
                             gestureRecognizer.view.center = offscreen;
                         }
                         completion:^(BOOL finished){
                             // when you're done, you might want to do whatever cleanup
                             // is appropriate for your app (e.g. do you want to remove it?)
                             [gestureRecognizer.view removeFromSuperview];
                         }];
    }
}