Great animations with PageTransformer
The Android ViewPager has become a fairly popular component among Android apps. It’s simple, intuitive and it offers great functionality. You can often see it in action in setup wizards, image galleries, and it’s a great way to separate your app’s content.
The standard ViewPager implementation works great, but the cool guys at Google have created something named PageTransformer. PageTransformer is an interface that allows you to modify the default page slide animation. And by doing that you can create all sorts of awesome slide effects and animations!
So how does it work? According to the developer tutorial here, you start by implementing the ViewPager.PageTransformer interface and supplying it to the view pager. The interface exposes one single method, transformPage(), which is called at each point in the screen’s transition for the visible page and the adjacent pages just off the screen.
We can now start animating the pages based on their position which can be obtained from the position parameter of the transformPage() method.
“The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5.”
Now that we understand how the transformer works, we can start animating the pages’ properties relative to their position. And they can be any property, such as alpha, X/Y (even Z in Android L+), scale, rotation etc.
The Android developer page provides a couple of cool transitions.
There’s even a library with custom built-in transitions!
But wait, there’s more!
The real fun starts once you start animating the elements inside the page!
The transformPage() method provides a position value and the page’s view. Normally, we animate that view. But we’re not limited to that view! We can also transform the views inside that view! (Too many “views”… Here’s one more)
Check this out!
That’s my app Tholotis where I have a ViewPager with two pages. As you start scrolling, you might notice the views’ X values are translated with different speeds.
How the heck did I do that?! Easy…
A great example is Yahoo’s Weather app, which became popular from this particular feature. Take a look at the gif below. The ViewPager’s pages slide normally, it’s the images that move with half the normal speed.
How the heck did they do that?! Easy…
Yahoo has been using the same technique in other apps such as News Digest and Flickr. Flickr’s animations are a bit more complicated because they use frame animations (gifs) together with the position value to create that 3D effect/illusion.
Conclusion
The PageTransformer interface is a powerful tool. Use your awesome developer skills and along with some creativity you can create jaw-dropping animations which make your apps delightful to use.
Go ahead.
Try it…
