How to Create a Custom Transition Page Effect for iOS: Part 2

CONTINUATION

Continuing from Part I.  We used a PageCache with a custom view controller.

How to create a transition page

To make it conform a cache paging protocol, we add the following:

How to create a transition page

And there is implementation of method prepareToShowAtLogicalIndex in the file
WebViewController.m. This method will be called before the page is displayed. Thus, the page will
be able to prepare the contents in advance. Page knows from ‘index’ argument, what part of the
content needs to be prepared.
One of possible implementations of this method:

Blog16

Please note that this method tells to component (in return result) if it possible to navigate to page with
specified index.
PageCache class can easily be used with a standard UIPageViewController as its datasource.

blog17

Own Page Transitions

This is how we can prepare next content page in background to avoid annoying load flickering during
page navigation. But what if we will need some custom effect for page transition. There is an easy
way to do it with custom container view controllers available since iOS 5.0 and later.

Let’s think how page-to-page transition is happened? Obviously, the current page should disappear
with some animation and the new one should appear with some other animation. So for custom page
transitions in own view controllers container we need in- and out-animation object and page switching
function.

Like this:

How to create a transition page for iOS

How to create a transition page in iOS

In- and out-animations are provided by “animator” object.

For example:

Parameter switchDirection is PageSwitchDirection type and can be

• kPageSwitcherDirectionBackward
• kPageSwitcherDirectionForward

Animators can create and return not only CAAnimation type objects, but also CAAnimationGroup,
where you can combine different animations together. Rotation and scaling, shifting, etc. There is an
example of such complex animator (FlyRotation) in demo project.

Hope this little example give you the main idea about proactive caching approach and custom
transition creation. But there is a lot of room for improvisation too. So be creative and good luck!

 

THE END. 

Download the demo, click here.

Visit InspireSmart, and learn more about us.

 





LEAVE A COMMENT