Question

I’m trying to create an animation that allows a user to pull out a panel from the side of the window. A small amount of the view will be visible at the upper-right, and by pulling it, the view will rotate outwards, pinned to the bottom right of the screen. Hopefully these images show what I’d like to achieve (the sheet of paper on the right indicates that portion of the view would be hidden. I’d like the user to be able to drag it, as opposed to swiping or tapping.

Can anyone point me in the right direction for how I might achieve this? I’m pretty new to animations in iOS. I’ve gotten the pan gesture working, but I need this point at which to rotate about. I can set the view’s .center property, but doing so just moves the whole view to that point, so I need a center to rotate from, which isn’t actually the middle of the view, I think?

Edit: I’ve written a method that’s working, but the view isn’t “stuck” to the user’s finger. I can drag my finger around, say, 45 degrees, but the view will have moved more than that. Not sure how I can sync them up, any ideas?

- (void) swipeSidebarOpen: (UIPanGestureRecognizer *) recognizer {
    //[self openOrCloseSideBar: YES];
    _sidebarView.layer.anchorPoint = CGPointMake(1.0, 1.0);
    _sidebarView.layer.position = CGPointMake(510, 330);

    UIView *shuttle = [recognizer view];

    if ([recognizer state] == UIGestureRecognizerStateBegan || [recognizer state] == UIGestureRecognizerStateChanged) {
        CGPoint vel = [recognizer velocityInView:[recognizer view]];

        if (vel.x > 0) {
            [recognizer view].transform = CGAffineTransformRotate([[recognizer view] transform], M_PI / 80.0f);
            [recognizer setTranslation: CGPointZero inView:[shuttle superview]];
        } else {
            [recognizer view].transform = CGAffineTransformRotate([[recognizer view] transform], -M_PI / 80.0f);
            [recognizer setTranslation: CGPointZero inView:[shuttle superview]];
        }
    }
}

Answer 1

By default the view will rotate arounds its center but you can change that by setting another anchorPoint for the views layer. (You will need to import Core Animation to do that (QuartzCore.framework)).

The anchor point is normalised (both X and Y goes from 0 to 1). By default it is in the center (0.5, 0.5) but you want to change it to the lower right corner (1.0, 1.0).

myView.layer.anchorPoint = CGPointMake(1.0, 1.0);

Changing the anchorPoint will visually move your view on screen so that the position of the views layer in the superview is the same point that the view rotates around.

myView.layer.position = theFixedHerePoint; // The point you are showing in your drawing...

For example: if the superview goes from (0,0) to (100, 100) then the position of myView should be the point where the lower right corner should be, not where the center of myView is. Like in the illustration below (X is the anchorPoint (1, 1) and the position (95, 95)). Note that 95 was just an arbitrary value.

┌───────────────────┐
│ superview         │
│                   │
│      ┌──────────┐ │
│      │ myView   │ │
│      │          │ │
│      │          │ │
│      └──────────X │
└───────────────────┘

Now when you pan you can simply set an appropriate rotational transform and the view will rotate around its lower right corner.