Titanium Android Animation: An Alternative Module

Post image for Titanium Android Animation: An Alternative Module

by Bill Dawson on 22 March 2013

[UPDATE Feb 2014: I stopped working with Titanium some time ago and so this module is not supported, though I’ll keep it up on Github of course in case others are interested in forking it.]

I’m a fan of using external modules to get access to native platform features that might sometimes be difficult to expose in the core Titanium Mobile SDK because of its requirement that the API be in parity across platforms. I think I read or heard somewhere that 70:30 is a good ratio of common versus platform-specific code in a Titanium Mobile application. That ratio sounds suspiciously as though it was pulled out of a hat, but I think it makes some sense: 50:50 would be a bit disappointing, while 90:10 (or higher) seems perhaps unrealistic (though a great goal nonetheless!)

The tl;dr version: I created an Animation module for Titanium Android so as to use the newer Android animation system introduced in Honeycomb. The source is open and licensed under the Apache License, Version 2.0. Details at the linked page.

I think there was a time when that 30% of platform-specific code was pretty much only used to overcome annoyances such as parity bugs. As the engineering folks at Appcelerator continue to make huge strides in overcoming parity differences, I’m hoping that the 30% can be used more “positively”: not so much for getting around bugs but rather to use cool platform-specific features found in (for example) external modules.

That brings me to animation, particularly Android animation in Titanium. In the non-Titanium (“pure”) Android world, animation has changed greatly since the release of Honeycomb. Because Titanium must support back to Gingerbread, the newer Honeycomb+ animation system has never been used in the Titanium SDK. (Appcelerator might be thinking of incorporating the newer functionality — I simply don’t know.) And the pre-Honeycomb functionality had some major shortcomings. One of the most annoying is described by Chet Haase of Google in his blog post announcing the new Honeycomb animation system in February 2011:

[T]he previous animations changed the visual appearance of the target objects… but they didn’t actually change the objects themselves. You may have run into this problem. Let’s say you want to move a Button from one side of the screen to the other. You can use a TranslateAnimation to do so, and the button will happily glide along to the other side of the screen. And when the animation is done, it will gladly snap back into its original location. So you find the setFillAfter(true) method on Animation and try it again. This time the button stays in place at the location to which it was animated. And you can verify that by clicking on it – Hey! How come the button isn’t clicking? The problem is that the animation changes where the button is drawn, but not where the button physically exists within the container. If you want to click on the button, you’ll have to click the location that it used to live in. Or, as a more effective solution (and one just a tad more useful to your users), you’ll have to write your code to actually change the location of the button in the layout when the animation finishes.

It would, of course, be nice to have access to the newer, better behaving system. To that end, I’ve created an open source external Titanium module to use the newer Android animations in Titanium Android. Specifically, I’ve wrapped Jake Wharton’s excellent NineOldAndroids library, which makes the Honeycomb animation API available also on Gingerbread (and lower) devices. That way, if you choose to use my module, you won’t have to have different animation code for Gingerbread versus Honeycomb, which would be rather annoying.

(Note however that even with NineOldAndroids, you still face the condition described by Chet Haase above: the touch target of an animated view remains back at its originally layed-out position. There’s nothing we can do about this. You might notice other annoyances too on pre-Honeycomb devices. For example, my Rotate and Bounce sample is not behaving properly on an old 2.2 (Froyo) device that I have.)

Head on over to the module’s project page if you’re interested in checking it out. Feel free to use the Github Issues feature to submit bug reports or feature requests, but do keep in mind that this is a hobby project for me and I might not respond quickly.

At the time of this writing, I haven’t finished up the documentation, but I think the code samples will give you a good idea of how to use it. Here’s one snippet just to get you started:

var mod = require("com.billdawson.timodules.animation"),
       view = Ti.UI.createView();

   // setup the window and view, etc....
   // ... then later ...

mod.viewPropertyAnimator.animate(view)
   .setDuration(1000)
   .withEndAction(function() {
       Ti.API.info("Animation done");
    })
   .scaleXBy(0.5)
   .scaleYBy(0.5)
   .alpha(0.75);