UIPanGestureRecognizer - translationInView with CATransform3D

Question

I'm trying to implement a page flipping animation using a UIPanGestureRecognizer. Here's the code:

- (void)handlePan:(UIPanGestureRecognizer *)recognizer {

    CGPoint location = [recognizer locationInView:self.view];
    CGPoint translation = [recognizer translationInView:self.view];
    CGPoint velocity = [recognizer velocityInView:self.view];

    [recognizer setTranslation:CGPointZero inView:recognizer.view];

switch (recognizer.state) {
        case UIGestureRecognizerStateChanged:
        {

            self.currentTranslation = self.currentTranslation + translation.x;

            //only pan left
            if (self.currentTranslation > 0.0) {
                self.currentTranslation = 0.0;
            }


            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
            rotationAndPerspectiveTransform.m34 = 1.0 / -2000;

            self.currentRotation = self.currentTranslation/2 * M_PI / 180.0f;
            //dont rotate past -90 degrees
            if (self.currentRotation <= -M_PI/2) {
                self.currentRotation = -M_PI/2+0.0001;
            }
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, self.currentRotation, 0.0f, 1.0f, 0.0f);

            float ypos = self.view.layer.position.y;

            self.view.layer.anchorPoint = CGPointMake(0, 0.5);
            self.view.layer.position = CGPointMake(0, ypos);        
            self.view.layer.transform = rotationAndPerspectiveTransform;


            break;
        }


        default:
            break;
    }

}

The animation works, and the page turns as I drag to the left. However, even when I move at a steady, slow pace with the gesture, the page starts to turn more rapidly. I want the page to turn "linearly" as the touch moves, like the Flipboard app. How can I control the translation to that it doesn't get accelerated?

score 3 · Answer 1 · answered Feb 28 '14 at 17:11

3

The translation is accumulated. Add this to your code after the case UIGestureRecognizerStateChanged.

    [recognizer setTranslation:CGPointZero inView:self.view];

answered Feb 28 '14 at 17:11

John

2,672
2
23
29

Note that I already have this in the code above. I think it's more of an issue with the rotation effect looking more extreme as the angle becomes larger. I think the translation itself is linear. I just have to figure out how to dampen the rotation. – csoul Feb 28 '14 at 17:25
1

@csoul I think your self.currentTranslation is cumulative. Please try to use translation.x instead of adding into self.currentTranslation in CATransform3DRotate. I believe this is the problem. – John Feb 28 '14 at 17:53

UIPanGestureRecognizer - translationInView with CATransform3D

1 Answers1