Ios development-simulate the new version of iBooks to open and close the animation, iosibooks

Ios development-simulate the new version of iBooks to open and close the animation, iosibooks

In addition to the clean and tidy interface, convenient and flexible operations, and large-capacity book capacity, the new IOS version of iBooks has excellent user interaction, especially the use of its animation. When opening a book, the book is slowly enlarged and opened. After closing the book, the book is closed and returned to its original position. Now let's implement this simple function.

:

Knowledge used:

1. Application of CAKeyframeAnimation

2. How to differentiate two different animations in a proxy

3. Coordinate System Conversion

Ideas:

This animation mainly uses CAAnimation and CAKeyframeAnimation. When a user clicks a book, set a UIImageView (add tags to it for convenience) place it on the position of the selected book (Using Coordinate System Conversion), then enlarge it to full screen through animation, and then set its anchor to (0, 0.5) and let it select the π/2 angle around the Y axis to display the textView (custom readView in this app) that has already been placed below. After the animation is complete, set the transparency of UIImageView to 0. This is the process of opening a book. The close process is similar. Retrieve the UIImageView Based on the tag and rotate it, set the frame to the location of the original book (you can use private variables to record the location), and then removeFromSuperview.

Code:

The first is the "preparation stage"

// BookReadView is the custom view CYZBookItemView * itemView = [notification object]; CYZBookReadView * readView = [[CYZBookReadView alloc] initWithFrame: CGRectMake (0, 0, self. view. width, self. view. height) ItemView: itemView]; // set delegate to respond to readView when the user returns from the reading interface. delegate = self; // set its alpha to 0 to prevent the readView interface from appearing when the book animation is still in progress. alpha = 0.0f; [self. view addSubview: readView]; // UIImageView * showView = [[UIImageView alloc] initWithImage: itemView. bookImage. currentBackgroundImage]; // Coordinate System Conversion _ itemPosition = [itemView. superview convertRect: itemView. frame toView: self. view]; showView. frame = _ itemPosition; // set the tag to retrieve the showView. tag = 1001; showView. backgroundColor = [UIColor clearColor]; [self. view addSubview: showView];

About Coordinate System Conversion (taking a rectangle as an example, point is similar ):

-(Void) convertRect: toView: method:

Format [View convertRect: frame or bounds toView of the converted View]; return the rect in the target View

For example, convert an imageView in the subview viewA of the current view to the current view. It can be called as follows:

[ViewA convertRect: viewA. imageView. frame toRect: self. view];

Or [imageView. superView convertRect: imageView. frame toRect: self. view];

Self indicates the controller.

-(Void) convertRect: fromView: method:

Format [View convertRect to be converted: frame or bounds fromView of the converted user]; return the rect in the target View.

In the previous example, you can write as follows:

[Self. view convertRect: viewA. imageView. frame fromView: viewA];

Or [self. view convertRect: imageView. frame fromView: imageView. superView];

Self indicates the controller.

After the preparation is complete, you can start the animation. Below is the animation opening part.

[UIView animateWithDuration: 0.5f animations: ^ {// enlarge UIImageView to full screen showView. frame = self. view. bounds;} completion: ^ (BOOL finished) {if (finished) {// display readView. alpha = 1.0f; // set the showView of the anchor. layer. anchorPoint = CGPointMake (0, 0.5); # warning does not know why. If you do not add the following statement, showView will display an exception: show only half of showView. frame = CGRectMake (0, 0, showView. width, showView. height); CAKeyframeAnimation * animation = [CAKeyframeAnimation animation]; // you can set the animation to be rotated around the Y axis. keyPath = @ "transform. rotation. y "; // set the duration. A constant can be defined to indicate the animation. duration = 0.5f; animation. speed = 0.55f; animation. removedOnCompletion = NO; // rotate π/2 degrees [animation setValues: [NSArray arrayWithObjects: @ 0.0f, @-M_PI_2, nil]; // set the proxy to facilitate the callback of animation. delegate = self; // The key must be set here, in order to distinguish different animations [showView. layer addAnimation: animation forKey: @ "rotateToOpenBook"] ;}}];

The comments in the Code have been explained in detail, but as warning writes, I originally used showView. layer. transform to implement animation, which saves a lot of things, for example, you do not need to differentiate the animation in the proxy, do not need to record the position to pass values between methods, etc, however, I don't know why showView is always only half displayed.

Callback in progress:

[showView setAlpha:0.0f];

Hide it temporarily and use it when closing the book.

The animation for closing a book is roughly similar.

# Pragma mark-CYZBookViewDelegate-(void) readViewDidBackWithItem :( CYZBookItemView *) item {// retrieve showView UIImageView * showView = (UIImageView *) [self. view viewWithTag: 1001]; // display it as 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 to use [showView. layer addAnimation: animation forKey: @ "rotateToCloseBook"];}

A different key is used to represent the animation.

Callback of the animation:

            [UIView animateWithDuration:0.5f animations:^{                showView.frame = _itemPosition;            } completion:^(BOOL finished) {                [showView removeFromSuperview];            }];

_ ItemPosition is the private variable used to record the converted coordinates. The lines of code mean that showView is returned to the position of the book and then removed.

The key question here is how to differentiate between the two animations when callback is used? Use the previously set key to differentiate:

Complete callback code:

#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];            }];        }    }}

Use the method "animationForKey" of the layer where showView is located to obtain the animation you set and compare it with the anim in the proxy.

In addition, stackOverflow also shows a method: Use the kvc method to set a value for animation, and use the kvc method in the proxy to retrieve and judge the value based on the key, it should also be possible.

Ibooks album art

Welcome to join us.


 
Open books in ibooks always automatically bounce back to the desktop

First, make sure that the IBOOKS software is normal and will not exit (reinstall or directly install other reading software), and then pass the file in.