API Development

Background Animation Visual Effect Tutorial

One of the coolest things about building a platform like Titanium is how people use it. Often, we look at what you’ve done and we’re stumped. How did you do that? You know you’re on to something when this happens.

The guys over at Awkward Novice have a really cool Titanium based application for the iPad (and now iPhone) called Chroma. It’s a very nice application – beautifully elegant – and a great example of a well thought out user interface.

It’s the small things that matter sometimes in UI. The small touches make the biggest difference.

In the Chroma application, Fred built a really cool background animation along the top toolbar. It’s very subtle. It’s just very elegant. I showed it to Nolan yesterday and we both thought: “how’d they do that?”. Of course, I’m a sucker for a challenge and said the famous last words of all engineers: “it can’t be that hard”. (I said that over 2 years ago when we embarked on Titanium, too).

It turns out that this technique is rather easy in Titanium. Disclaimer: I have no idea how Fred actually wrote this. He could have done it differently. He didn’t share his code with me (I didn’t ask him to). However, it’s visually similar (although the effects in Chroma are more advanced). This tutorial explains the basis of this technique and shows the power of combining views with images, animation and some creativity.

Let me show you the code.

OK, so what’s happening. First, we create a basic Titanium window. Nothing too complicated there.

Next, we create a view that serves as the background image. This is the image that we’ll animate behind the main toolbar image. Notice how long (width wise) this image is. It’s 997 pixels wide. It’s that wide so we can slide the image back-n-forth in an animation, very slowly.

Next up, the toolbar image. With this image, Fred punched a transparent region to the right. It’s a little visually difficult to see but it’s to the right area.

Let’s put a background color so you can see it a little easier.

You can see from the red, that the transparency just allows some of what’s behind the image to be able to come through. That’s the trick to make this work. We place the long first image behind it and slide it left and forth – very slowly.

OK, I’ll do what effectively being done in Titanium here in HTML (but without animation) so you can see it.

The other 2 views simply are for the logo and the info button. We simply use positioning to place them in the right location.

We adjust the offset of the first image to -677 pixels left. This will place the long image off to the left a bit (off screen) and then we simply animate the left image a bit to the right (from -677px to -517px) over 30 seconds. We do it slowly to create the nice, visual effect of it waving. You can move it in different offsets and for different lengths to change the color combination.

And that’s it. It’s really that simple with Titanium. You can use this type of technique for all types of purposes within Titanium.

A few comments before we exit:

1. Don’t use these images. They’re copyrighted by Awkward Novice. That would be very uncool. I’ve provided them here simply as an illustration of a really awesome app for the benefit of the general Titanium community.

2. Why didn’t I use an ImageView vs. a regular View with a background? Well, no particular reason except probably habit. I tend to use an ImageView when I want something a little more complex such as image frame animation. But when it’s a simple image, I tend to just use a View. They’re effectively the same behind the scenes.

3. When doing animations, you can alter the opacity (on a scale from 0.0 to 1.0) to create a cool fading effect. Combining movement with opacity can create nice transitions.

4. There’s a slight bug in Android currently that prevents the animation from happening correctly but will be fixed soon.

5. Do Fred a favor and buy his app (at least one or the other). He deserves it. 🙂