Introducing Sparkle Motion

Upon opening DO for Android, users are presented with a beautiful, animated introduction to the product. If you’re interested in building something similar for one of your own apps, we’re thrilled to introduce you to Sparkle Motion! Sparkle Motion is an open source ViewPager animator that can animate Views within and outside of the ViewPager.

ViewPager itself provides a very powerful interface, PageTransformer, which gives access to the scrolling progress of a ViewPager’s child Views and animates each page based on that scrolling progress. Unfortunately, access is limited to the child Views inside of the ViewPager.

Fortunately, the OnPageChangeListener interface exposes similar scrolling progress and represents the entire ViewPager instead of each of the child Views. We can easily control child Views outside of the ViewPager through its offset parameter, which is ranged between 0 to 1. This is exactly what we needed to animate a View: a key frame controller that controls progress of the animation.

Sparkle Motion offers an extended FrameLayout SparkleViewPagerLayout plus a View holder class Decor to contain Views for animation in a ViewGroup. A SparkleViewPagerLayout controls a set of Decor objects, each of which holds a content View, and manages these Decor objects based on the animation information provided (e.g. whether the View should be shown at certain page). Through the combination of SparkleViewPagerLayout and Decor, we can run animations on Views that are not child Views of the ViewPager, while the animations are still controlled by the ViewPager’s scrolling progress.

At IFTTT, we love simple tools that just work, so we designed Sparkle Motion’s API with this in mind. Here’s how to use it:

SparkleMotion.with(sparkleViewPagerLayout)
             .animate(animation)
             .on(view);

• with() tells Sparkle Motion which SparkleViewPagerLayout instance to animate.
• animate() tells Sparkle Motion how to animate the Views contained by the given SparkleViewPagerLayout. A passed in Animation instance contains specific animation instructions.
• on() tells Sparkle Motion which Decor to animate.

We hope Sparkle Motion helps you create your own compelling ViewPager animations. Head over to Sparkle Motion on GitHub to learn more. While you’re at it, check out our other open source projects too!

Originally published at engineering.ifttt.com on September 16, 2015.