Animate image with gesture

Question

I've created an animation of a plane moving along a bezier path. Is there a way to start the animation when a user swipes a certain direction? (i.e if the user pans right, the plane moves right along the path. if the user pans left, the plane moves left along the path).

Thanks for the help.

Do you want to start the animation when the user swipes or do you want to drag the image along the path? — David Rönnqvist, Jul 09 '14 at 19:41
Pretty much drag along the path. So if the user stops the gesture, but is still pressing, the image stays at that spot on the curve. — JerryCrowley, Jul 09 '14 at 19:50
Actually dragging along the path or just controlling it with a horizontal movement (sort of like [this](http://stackoverflow.com/questions/18375822/tweening-interpolating-between-two-cgpaths-uibeziers/18683845#18683845))? — David Rönnqvist, Jul 09 '14 at 19:54
A little more detail: I am using a scroll view. When the user scrolls from the first page to the second page, I was going to implement this animation. (i.e there will be a cartoon iphone in the middle of the scrollview. When the user pans to the second page, a paper airplane will fly from the iphone on the first page to the iphone on the second page.) — JerryCrowley, Jul 09 '14 at 20:02
In that case you can use the offset in `-scrollViewDidScroll:` to drive the timeOffset of the animation. — David Rönnqvist, Jul 09 '14 at 20:04
Will that work with a CAKeyFrameAnimation? Or do I use a CABasicAnimation? — JerryCrowley, Jul 09 '14 at 20:07
When you've written something that solves your problem, please come back and post it as an answer to your question (and mark it as the accepted answer). This way, others who have the same problem can find the question and the answer can help them as well. — David Rönnqvist, Jul 09 '14 at 20:09

score 2 · Accepted Answer · edited Aug 25 '15 at 05:56

Curve Setup:

self.trackPath = [UIBezierPath bezierPath];
self.trackPath = [UIBezierPath bezierPathWithArcCenter:P(self.scrollView.center.x,self.scrollView.center.y-20)
                               radius:110
                           startAngle:DEGREES_TO_RADIANS(70)
                             endAngle:DEGREES_TO_RADIANS(115)
                            clockwise:NO];


self.plane = [CALayer layer];
self.plane.bounds = CGRectMake(0, 0, 60.0, 60.0);
self.plane.position = CGPointMake(self.scrollView.center.x,self.scrollView.center.y-20);
self.plane.contents = (id)([UIImage imageNamed:@"profile_tag"].CGImage);
[self.view.layer addSublayer:self.plane];

CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim.path = self.trackPath.CGPath;
anim.duration = 320.;
[self.plane addAnimation:anim forKey:nil];
self.plane.speed = 0.0;
self.plane.hidden = YES;

When Paging:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat pageWidth = self.scrollView.frame.size.width;
    int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    self.pageControl.currentPage = page;

    if((scrollView.contentOffset.x >= 320) && (scrollView.contentOffset.x<=640)){
        self.plane.hidden = NO;
        self.plane.timeOffset = scrollView.contentOffset.x - 320;
    }
}

Animate image with gesture

1 Answers1