NeatoCode Techniques
Delightful Animations in One Line of Code: Part 2

The Android OS has been making great strides in the realm of user experience - make sure your own apps keep up! Check out my earlier post on layout animation for a great new way to provides users feedback about what changes on the screen of your app. Another new, powerful API used by Android itself and exposed to developers is property animation. Property animations can change any Java property of a class across a range of values. Here’s a very simple example:

ObjectAnimator.ofFloat(liveImageView, View.ALPHA, 255f).setDuration(500).start();


This calls the setAlpha method on the liveImageView object over 500 milliseconds to fade it in from its initial value, transparent, to fully visible. My team used this to make the “Live” part of the Aprentica Live logo fade in after starting the app. There’s a demo video of the app o YouTube. Here are a couple example screenshot frames:


The Aprentica Live app is beautifully designed and won an API prize in a recent Sprint hackathon, and second place overall. My team felt that a well chosen color scheme, sleek dark design, and little animation touches like this really gave the app a bit more richness and life than if we had not put so much effort into appearance. I’ve seen in metrics that many users leave an app after only opening it, looking good can get them more engaged and interested in what you have to offer.

Properties without constants can be animated by name. Here is an example of animating a Java property called score, with methods on the object called getScore and setScore:

ObjectAnimator.ofInt(scoreView, "score", 1000).setDuration(250).start();


You can see an example of an animated score counting up in the Lock n Roll dice puzzle game. A lot of games do this to make getting points seem more exciting and noticeable than just changing the number to the new value. Many also have little numbers or other messages float up and fade out from the part of the game screen where something happened, either good or bad. That’s also easy to do via this method.

The property animation API is designed to be a fluent API. That means you can string commands together as if they were part of a sentence affecting a subject. This is done by returning an object from each call that supports further calls. There are also other classes available to help organize multiple animations, like the AnimatorSet class. Here’s an example of making an object bounce up and down a couple times in decreasing amount:

AnimatorSet set = new AnimatorSet();
set.playSequentially(
  ObjectAnimator.ofFloat(robot, View.TRANSLATION_Y, -200f),
  ObjectAnimator.ofFloat(robot, View.TRANSLATION_Y, 0f),
  ObjectAnimator.ofFloat(robot, View.TRANSLATION_Y, -100f),
  ObjectAnimator.ofFloat(robot, View.TRANSLATION_Y, 0f) 
  );
set.setTarget(robot);
set.start();


I put up a sample app that does that on GitHub. The frame by frame looks like this:


This can be great for letting a user know about a part of your app that changed state or turned on or became available. If you had a little character in a game, for example, and wanted to draw the user’s eye when it said something important or showed an icon that meant it should be clicked on and investigated.

When coding up a storm, be on the look out for places where a quick line of code can delight, inform, and engage your users!

Blog comments powered by Disqus