Friday, October 6, 2017

Understanding Subtle Animations in PLAID app - Part-1

Toolbar title animation

Android developer options have great support when it comes to understanding the animations in app.
Please take a look below video and set animation scale to 5x




Now lets come to the point and see how toolbar title animates.


As you must have seen in the above video , the toolbar title animates and its a subtle but pretty nice and easy on eyes , soothing animation. 

Now lets see what are observations before we look at implementation to see how one would go about implementing this.

Observations:
  • Initially the title was not visibile -  [ Alpha must be zero ] 
  • Animation starts after some delay - [ There must be a start delay ] 
  • See the letter spacing effect - [ At present not sure - how its achieved ] 
  • It appears to scale horizontally but not from zero - [ There must be some initial value scaleX ] 
  • Animation starts fast and slows as the time progresses - [ Must be some kind of Interpolator at play ] 

Lets look at implementation from the Plaid App.
There is an aptly named animateToolbar() method in the HomeActivity.java.

private void animateToolbar() {
        // this is gross but toolbar doesn't expose it's children to animate them :(
        View t = toolbar.getChildAt(0);
        if (t != null && t instanceof TextView) {
            TextView title = (TextView) t;

            // fade in and space out the title.  Animating the letterSpacing performs horribly so
            // fake it by setting the desired letterSpacing then animating the scaleX ¯\_(ツ)_/¯
            title.setAlpha(0f);
            title.setScaleX(0.8f);

            title.animate()
                    .alpha(1f)
                    .scaleX(1f)
                    .setStartDelay(300)
                    .setDuration(900)
                    .setInterpolator(AnimUtils.getFastOutSlowInInterpolator(this));
        }
    }

Again these are the kind of animations that make our apps a treat to use for consumers.
One last point before we end this post.  This animation is called only when we are launching this activity a fresh for the first time. This is again an important detail so that we don't overdo the animation.

 if (savedInstanceState == null) {
            animateToolbar();
    }

Thats it for this post and there will be more post in this series. So please look forward to it and do let me know in the comments if you like the content.

No comments:

Post a Comment