iOS, Swift: animation controlled by gesture

Question

I trying to find a way for connecting user interaction (pan gesture) with animation. I want to control animation progress by dragging view (or just by finger panning on the screen).

I think I can make this by using Core Animation, but I didn't find any similar to my needs example. I have a CGPath, that I want to draw. I know that there are strokeStart and strokeEnd property that is animatable and perfectly acceptable for my needs in the "drawing" point of view.

Using layer with given path property I can animate this path with CABasicAnimation

layer.path = myPath
//... layer configuration
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 2
pathAnimation.fromValue = 0
pathAnimation.toValue = 1
layer.addAnimation(pathAnimation, forKey: "strokeEndAnimation")

Here we can see animation from the first path point to the last consequentially.

Okay, but I need to somehow control this animation with gesture. Let's say, if we pan finger on the screen to the right, our path animation draws straight ahead (e.g strokeStart = 0 and strokeEnd = 1) and if we pan from right to left we will see backward animation (like rewind) (e.g. strokeStart = 1 and strokeEnd = 0).

I know, how to get gesture direction, translationInView, velocityInView and I want to animate this in changed state, not end. (UIGestureRecognizerState.Changed)

But I don't know how I can combine control from gesture to animation because of this troubles:

duration of animation. (I don't know how fast or how slow gesture would be)
how I need to implement animation because calls are very frequent in changed state

I looked to animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

but duration question rises again.

Hope somebody can help me, ask me if you misunderstood something and I'll try to clarify.

matt matt · Accepted Answer · 2014-12-24T23:23:09

Let's say, if we pan finger on the screen to the right, our path animation draws straight ahead (e.g strokeStart = 0 and strokeEnd = 1) and if we pan from right to left we will see backward animation (like rewind) (e.g. strokeStart = 1 and strokeEnd = 0).

If I understand you correctly, the solution is to freeze the animation by setting the layer's speed to 0 and then setting the "frame" of the animation by setting the layer's timeOffset.

iOS, Swift: animation controlled by gesture

1 Answers