iOS development--imitate the new version of ibooks Book open and close animations

In addition to a clean and uncluttered interface, easy and flexible operation, and a large volume of book capacity, iOS's new version of ibooks attracts excellent user interaction, especially the use of its animations. When you open a book, the book Slowly enlarges and opens, closing a book and closing it and returning to its original location. Now let's implement this simple function.

：

Knowledge to use:

1, the application of cakeyframeanimation

2. How to differentiate two different animations in an agent

3. Coordinate system conversion

Ideas:

The main use of this animation is Caanimation, and is cakeyframeanimation, when the user click on the book, set a Uiimageview (for it to add tag convenient to take later) and put it in the location of the selected books (using coordinate system conversion), Then, by animating it to full screen, when done, set its anchor point to (0,0.5) and let it select the Π/2 angle around the y-axis, which will be shown in the TextView below (custom Readview in this app). When the animation is complete, set the Uiimageview transparency to 0. This is the opening process of the book. Close the process is similar, according to tag remove uiimageview and rotate it, and then set the frame to the original position of the book (You can record the position with a private variable), and finally Removefromsuperview.

Code:

The first is the "prep phase."

    Bookreadview is a custom view    cyzbookitemview *itemview = [Notification Object]    showing TextView and top bottom attached view. Cyzbookreadview *readview = [[Cyzbookreadview alloc] Initwithframe:cgrectmake (0, 0, self.view.width, self.view.height) Itemview:itemview];    Delegate is set to respond when the user returns from the Reading interface    readview.delegate = self;    Set its alpha to 0 first to prevent the user just click on the book animation is still in progress when the interface    readview.alpha = 0.0f;    [Self.view Addsubview:readview];        Show animated Uiimageview    uiimageview *showview = [[Uiimageview alloc] Initwithimage: ItemView.bookImage.currentBackgroundImage];    coordinate system conversion    _itemposition = [Itemview.superview convertRect:itemView.frame toView:self.view];    Showview.frame = _itemposition;    Set tag convenient to remove    Showview.tag = 1001;    Showview.backgroundcolor = [Uicolor clearcolor];    [Self.view Addsubview:showview];

About coordinate system transformations (take a rectangle, for example, point similar):

-(void) Convertrect:toview: Method:

format [ View Convertrect of the converted person: frame or bounds Toview: converted to view]; Returns a rect in the target view

For example, convert a imageview in the child view of the current view Viewa to the current view. Can be called as follows:

[Viewa ConvertRect:viewA.imageView.frame ToRect:self.view];

or [Imageview.superview convertRect:imageView.frame ToRect:self.view];

Where self refers to the controller.

-(void) Convertrect:fromview: Method:

format [ view Convertrect to convert to : The frame or bounds Fromview of the converted person: The view where the converter is located]; Returns a rect in the target view.

As an example, it can be written like this:

[Self.view ConvertRect:viewA.imageView.frame Fromview:viewa];

or [Self.view convertRect:imageView.frame FromView:imageView.superView];

Where self refers to the controller

Then you can start the animation when you're ready to finish your work. The part that opens the animation

    [UIView animatewithduration:0.5f animations:^{//Zoom Uiimageview to full screen showview.frame = Self.view.bounds;                        } completion:^ (BOOL finished) {if (finished) {//shows readview readview.alpha = 1.0f; Set Anchor Point showView.layer.anchorPoint = Cgpointmake (0, 0.5); #warning do not know why, do not add the following sentence ShowView will show the exception:            That shows only half showview.frame = CGRectMake (0, 0, showview.width, showview.height);            Cakeyframeanimation *animation = [cakeyframeanimation animation];            Set its rotation around the y-axis Animation.keypath = @ "TRANSFORM.ROTATION.Y";            To set the duration, you can define a constant to represent animation.duration = 0.5f;            Animation.speed = 0.55f;            Animation.removedoncompletion = NO;            Rotation Π/2 degree [animation Setvalues:[nsarray arraywithobjects:@0.0f, @-m_pi_2, Nil]];            Set proxy to facilitate callback animation.delegate = self; The key must be set here, in order to differentiate the different animations next [Showview.layer Addanimation:animation forkey:@ "Rotatetoopenbook"]; }    }];

The comments in the code have been explained in more detail, just as warning wrote, originally I used showView.layer.transform to achieve animation, this will save a lot of things, such as not in the agent to distinguish between animation, do not have to record position to transfer value among the method , but do not know why ShowView always show only half, beg to explain ╮(╯▽╰)╭

Callback:

[ShowView setalpha:0.0f];

Hide it temporarily, and use it when closing the book.

The animation of closing the book is roughly similar

#pragma mark-cyzbookviewdelegate-(void) Readviewdidbackwithitem: (Cyzbookitemview *) item{    //Remove ShowView    Uiimageview *showview = (Uiimageview *) [Self.view viewwithtag:1001];    Show it out    showview.alpha = 1.0f;    ShowView.layer.anchorPoint = Cgpointmake (0, 0.5f);    Showview.frame = CGRectMake (0, 0, showview.width, showview.height);        Cakeyframeanimation *animation = [cakeyframeanimation animation];    Animation.keypath = @ "TRANSFORM.ROTATION.Y";    Animation.duration = 0.5f;    Animation.speed = 0.55f;    Animation.removedoncompletion = NO;    Reverse rotation    [animation Setvalues:[nsarray arraywithobjects:@-m_pi_2, @0, Nil]];    Animation.delegate = self;    Set different keys in order to differentiate the animation with    [Showview.layer addanimation:animation forkey:@ "Rotatetoclosebook"];    }

A different key is used to represent this animation.

The callback for the animation:

            [UIView animatewithduration:0.5f animations:^{                showview.frame = _itemposition;            } completion:^ (BOOL finished) {                [ShowView Removefromsuperview];            }];

_itemposition is a private variable that was previously used to record the coordinates of the conversion, which means that ShowView returns to the position of the book and makes it disappear.

The key problem here is that two animations use callbacks, how do you differentiate between them? Use the key we set previously to differentiate:

The complete code for the callback:

#pragma mark-animationdelegate-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) flag{    Uiimageview * ShowView = (Uiimageview *) [Self.view viewwithtag:1001];    if (flag) {        if (ShowView && [[Showview.layer animationforkey:@ "Rotatetoopenbook"] isequal:anim]) {            [ ShowView setalpha:0.0f];        } else if (ShowView && [anim isequal:[showview.layer animationforkey:@ "Rotatetoclosebook"]) {            [UIView animatewithduration:0.5f animations:^{                showview.frame = _itemposition;            } completion:^ (BOOL finished) {                [ ShowView Removefromsuperview];}            ];}}    

Through the ShowView layer of the method Animationforkey: To get their own settings of the animation, and the agent in the Anim can be distinguished.

In addition, on the StackOverflow also see a method: Use KVC method for animation set value, and in the agent through the KVC method according to the key to take out the value and judgment, it should also be possible.

iOS Development-imitate the new version of ibooks Book open and close animation