CODEWITHSUNDEEP
iosobjective-cuigesturerecognizer
Daniel Larsson
Daniel Larsson

Reputation: 6394

Gesture-driven animation between frames

I am trying to create an interactive animation between a thumbnail frame and a fullscreen frame. Panning upwards could cause the frame to go grow in both dimensions (until reaching fullscreen) while panning downwards does the opposite. Very similar to how Youtube animates their video player.

I tried using a UIPanGestureRecognizer, and a POPSpringAnimation that activates when the recognizers state is UIGestureRecognizerStateEnded, like so:

- (void)didPan:(UIPanGestureRecognizer *)recognizer
{
    CGPoint point = [recognizer translationInView:self.view.superview];
    self.view.center = CGPointMake(self.view.center.x, self.view.center.y + point.y);
    [recognizer setTranslation:CGPointZero inView:self.view.superview];
    if (recognizer.state == UIGestureRecognizerStateEnded)
    {
        CGPoint velocity = [recognizer velocityInView:self.view.superview];
        // Initaite POPSpringAnimation using velocity and target frame
        // either fullscreen or thumbnail
    }
}

The effect of this is that the view's center gets updated while panning, but its size will only start changing after you stop panning. I do not want to manually resize the frame in didPan: without knowing at what ratio to do it.

How can I create a panning-driven animation that simply goes from frame A to frame B?

This framework does almost the same thing, but the animation is not interactive. Same thing goes for this answer.

Upvotes: 0

Views: 263

Answers (1)

Duncan C
Duncan C

Reputation: 131418

I suggest using a UIViewPropertyAnimator, a class addd in iOS 10. It lets you pretty easily pause, reverse, or scrub animations back and forth.

I have a demo project on GitHub (Written in Swift, which might be harder for you to follow, since you're using Objective-C:

https://github.com/DuncanMC/UIViewPropertyAnimator-test

The class is actually pretty easy to use. You should be able to figure it out from the docs, and the sample project could at least serve as a roadmap on the APIs to use even if you can't follow the code line-by-line

Upvotes: 2

Related Questions