How to implement iOS book Animation-part 2nd (top)

• Original link: How to Create a IOS book Open Animation:part 2
• Original Author: Vincent Ngo
• Development technology Front www.devtf.cn
• Translator: Kmyhy

Welcome back to the iOS Book animation series Tutorial! In the first part, we learned how to create two custom collection view layout and use shadow layers in book pages to make our app look more solid and realistic.
In this section, we'll learn how to create a custom transition animation and open a book by pinching and placing gestures.

Note: Thank Attila Hegedüs for creating the sample program for this tutorial.

Begin

The previous part of the tutorial is based on the content. If you have not seen the first part, or want to start with a new project, you can download the complete sample program from the previous tutorial in this section.

Open the project in Xcode. Now you can select a book to read and swipe from the right to page. The transition animation at this time uses the animated effect of the Uinavigationcontroller itself. With this tutorial, we will customize this animation effect as shown in:

This animation will smoothly transition between the "open book" and "Close book" two states in one by one more natural ways, which will make the user's favor more. Let's get started right now!

Create a custom navigation controller

To create custom push animations and pop animations, we must create a custom navigation controller and implement the Uinavigationcontrollerdelegate protocol.
Right-click (or CTRL + left) on the app folder and click New File. Select the Ios\source\cocoa Touch class template and set the class name to Customnavigationcontroller. Let it inherit from Uinavigationcontroller and set the language to Swift. Click Next,create.
Open the Customnavigationcontroller.swift and edit its contents as:

Import Uikitclass Customnavigationcontroller:Uinavigationcontroller, uinavigationcontrollerdelegate {override Func Viewdidload () {Super. Viewdidload()//1Delegate = Self}//2Func Navigationcontroller (Navigationcontroller:Uinavigationcontroller, Animationcontrollerforoperation operation:uinavigationcontrolleroperation, Fromviewcontroller FromVC:Uiviewcontroller, Toviewcontroller ToVC:Uiviewcontroller)-uiviewcontrolleranimatedtransitioning? {ifOperation = =. Push{return Nil}ifOperation = =. Pop{return Nil}return Nil}}

The above code is explained separately as follows:

1. In the Viewdidload method, set the delegate property of Customnavigationcontroller to its own.
2. Navigationcontroller (_:animationcontrollerforoperation:fromviewcontroller:toviewcontroller:) Method belongs to the Uinavigationcontrollerdelegate protocol. This method is called when a push or pop navigation occurs between two view controllers. You can return individual transition objects for push navigation and pop navigation, respectively, in this method. We have now returned nil, which indicates that we will use the Uinavigationcontroller built-in standard transition. Later we will replace the transition object with our own.

Now that we have our own navigation controller class, we will then replace the default Uinavigationcontroller with our Customnavigationcontroller in the storyboard.
Open Main.storyboard, select the Navigation controller object in the object window on the left side of the storyboard editor, open the Identity window, under the custom class, Modify the class from Uinavigationcontroller to Customnavigationcontroller as shown in:

Compile and run, nothing has changed. This is because we still return nil in the delegate method, so we are still using the Uinavigationcontroller built-in standard transition.

Creating a custom navigation animation

The most interesting part comes--Create our Custom Transition Object!:]
To customize the transition class, we have to implement the Uiviewcontrolleranimatedtransitioning protocol, the most important of which are the following methods:

• Transitionduration: Must be implemented. This method returns the length of an animation so that two animations play the same (or different) time.
• Animatetransition: Must be implemented. This method is responsible for providing two controllers involved in the animation: one to controller and one from controller. Most of Transiton's work is done in this method.
• Animationended: Optional method. This method is mainly used to inform you when the animation is complete. We can do the necessary cleanup actions in this method.

To create a custom transition class

Right-click (or CTRL + left) on the app folder and click New File. Select the Ios\source\coca Touch class template, set the class name to Bookopeningtransition, inherit nsobject, language Swift. then click Next,create.
Open the Bookopeningtransition.swift and edit the code as follows:

ImportUIKit//1Class Bookopeningtransition:nsobject, uiviewcontrolleranimatedtransitioning {//mark:stored Properties  varTRANSFORMS = [Uicollectionviewcell:catransform3d] ()//2  varToviewbackgroundcolor:uicolor?//3  varIspush =true //4  //5  //Mark:uiviewcontrolleranimatedtransitioning  funcTransitionduration (transitioncontext:uiviewcontrollercontexttransitioning), Nstimeinterval {return1}funcAnimatetransition (transitioncontext:uiviewcontrollercontexttransitioning) {}}

The above code corresponds to the number in the comment, respectively, explained as follows:

1. Declares the Bookopeningtransition class to implement the Uiviewcontrolleranimatedtransitioning protocol.
2. Declares a transforms dictionary, the key stores the Uicollectionviewcell, and the value stores the corresponding Catransiform3d. This dictionary saves all cell page-flipping animations after the book is opened.
3. Specifies the background color of the to view controller, which makes the fade-in animation look clearer.
4. The Boolean value Ispush is used to identify whether the current animation is a push animation or a pop animation.
5. Add the Uiviewcontrolleranimatedtransitioning protocol methods that must be implemented so that compilation errors no longer occur, and we will implement these methods later.

Define the required variables, and the next step is to implement the Protocol method.
The first is the Transitionduration (_:) Method:

if isPush {  return1else {  return1}

The Transitionduration (_:) method returns the duration of the animation playback. Here, both the push animation and the pop animation are set to 1 seconds. This method allows us to easily change the duration of the push animation or pop animation.

Then, is the second protocol method--animatetransition--This is the most core part! :] We divide this method into two parts:

1. Implements an helper method that is used to create the transition object required by the push animation.
2. Implements an helper method for creating transition objects that are required for pop animations.

Create a push animation

Think of the way you open a book in your life:

While it may seem complicated, we only need to consider two states, and let the UIView Animatewithduration method do different processing depending on the two states:

1. Status 1, the book is in a closed state.
2. Status 2, the book is open; This is the part we implemented in the first part of the tutorial.

First, before implementing the Animatetransition (: _) protocol approach, let's implement several helper methods.
Still in Bookopeningtransition.swift, write the following methods:

// MARK: Helper Methodsfunc makePerspectiveTransform() -> CATransform3D {  transform = CATransform3DIdentity  transform1.0 / -2000  returntransform}

This method returns a Transform object and adds a bit of stereoscopic to the z-axis. We will use this method when we play the animation.

Status 1-closing book

The following methods are implemented after the Makeperspectivetransform method:

Func Closepagecell (Cell:bookpagecell) {
1
var transform = Self.makeperspectivetransform ()
2
If Cell.layer.anchorpoint.x = = 0 {
3
Transform = Catransform3drotate (transform, cgfloat (0), 0, 1, 0)
4
Transform = Catransform3dtranslate (transform, -0.7 * cell.layer.bounds.width/2, 0, 0)
5
Transform = Catransform3dscale (transform, 0.7, 0.7, 1)
}
6
else {
7
Transform = Catransform3drotate (transform, CGFloat (-M_PI), 0, 1, 0)
8
Transform = catransform3dtranslate (transform, 0.7 * cell.layer.bounds.width/2, 0, 0)
9
Transform = Catransform3dscale (transform, 0.7, 0.7, 1)
}

//10cell.layer.transform = transform

}
Recall Bookviewcontroller, which is a collectionview, represents a page in the book. We align each page with the spine and rotate it with the y-axis to achieve a page turn effect. First of all, the book is close (closed). This method puts each cell (that is, the page) flat and puts it below the cover.
This is the animation run effect:

The above code is interpreted as follows:

1. A transform object is generated using the helper method created earlier.
2. Determines whether the cell is the right page.
3. If it is, set its angle to 0, which is placed as horizontal.
4. Move it to the bottom of the cover and align it centered.
5. Scale it to 70%. Remember when we zoomed in front of the cover to 70%? Here is the same meaning.
6. If the cell is not the right page, it is the left page.
7. Set the angle of the left page to 180 degrees. To put it horizontally, we need to turn it to the right of the spine.
8. Place it below the cover and align it centered.
9. Zoom 70%.
10. Finally, assign the transform property to the cell.

Add the following method after the above method:

Func Setstartpositionforpush (Fromvc:booksviewcontroller, Tovc:bookviewcontroller) {//1Toviewbackgroundcolor = Fromvc. CollectionView?. BackgroundColorToVC. CollectionView?. BackgroundColor= NIL//2Fromvc. SelectedCell()?. Alpha=0//3For cellinchToVC. CollectionView!. Visiblecells() as! [Bookpagecell] {    //4Transforms[cell] = cell. Layer. Transform//5Closepagecell (cell) cell. Updateshadowlayer()    //6If let Indexpath = ToVC. CollectionView?. Indexpathforcell(cell) {if Indexpath. Row==0{cell. Shadowlayer. Opacity=0}    }  }}

The Setstartpositionforpush (_:TOVC:) method creates a transition of State 1. This animation involves two viewcontroller:

• FROMVC, type Booksviewcontroller, is used to scroll through the list of books.

• The Tovc,bookviewcontroller type allows you to scroll through selected books.

The above code is interpreted as follows:

1. Save the background color of the Booksviewcontroller cellection view, and then set the Bookviewcontroller collection view's background color to nil.
2. Hide the cover page. Now TOVC will handle the display of the cover picture.
3. Traverse all pages in the book.
4. Saves the current transform to transforms dictionary for each page.
5. Since the book started off, we converted the page to a closed state and then updated the shadow layer.
6. Finally, ignore the shadow of the cover picture.

How to implement iOS book Animation-part 2nd (top)