Personal tools

Creating Vector Animation in Radi (Part 2)

From RadiWiki

Jump to: navigation, search

In the first part of this tutorial, we created an animation of a chubby bird peeking through a round window, complete with some animated masks and shameless self-promotion:

My version of the 'Peeking Bird' vector animation tutorial


The first part covered Radi's design tools: drawing shapes, creating masks, using parenting for animation, and so on. This second part focuses on deploying the animation now that we've created one.

This document therefore has a much more technical bent. My intended audience is web developers who are perhaps asking themselves: "Why would I ever want animation on my website?". This tutorial covers one example of how HTML5 animation could be used to augment the user experience of a web app.

The example

The beef of this tutorial is in the following example page:

Animated progress screen in a web app


The elements here are simple. There's a text block on the front page with a form button, pretending to be a web app. When the button is clicked, a full-window overlay is faded into view to indicate that the web app is busy.

In the overlay, there's a block of text and the animation of the bird. This is the same animation made in Part 1. Once the fake "computation" is complete, the overlay is faded out and the result of the work is displayed in the "app".

Why?

First, the looming question: what's the rationale for having this progress animation in the first place? Isn't this just a useless distraction? Surely that may be the case, if the animation is something like a peeking bird and an ad for my Twitter account... But it's not difficult to imagine something less contrived; more subtle and relevant to the context of the app.

In fact, almost any web app (or more generally any "AJAX"-using web site) needs an activity indicator visual at some point. Usually these are implemented as animated GIFs. There are many sites dedicated to the art of these little pictures (an example). Animated GIFs are fine for simple uses, but extremely limited for anything more complicated than a short loop of small images. GIFs were invented in the 1980's, and they don't even support full-color images.

Using real HTML5 instead of GIFs has many important advantages. Firstly, the range of content that can be rendered is much more varied. The Canvas API allows us to draw large graphics using vector elements in the browser. Animated GIFs take up a lot of space very quickly as the size increases, but vector graphics created in Radi and rendered using Canvas are actually program code, so simple shapes that fit in a few lines of JavaScript can be rendered to any size needed. Rendering in Canvas also allows us to use a real alpha channel instead of the simple 1-bit transparency used in GIFs. (In my example above, the bird is peeking from the round hole which is neatly composited on top of the page background.)

Secondly, the Radi animation consists of actual HTML elements and JavaScript instead of just image frames, so it can be controlled and modified by other elements on the page. Changing the animation speed, modifying element positions, or using dynamic text are just some of the possibilities.

Although the bird animation being loaded here is a somewhat large file, this is something of an extreme example. A real-world progress animation could be designed to be much more compact, even just a few kilobytes. Radi makes it possible to mix vector animation and scripted rendering in the same document, so it would be possible to use small scripts embedded into the Radi animation to render specific details instead of having to use complicated shapes, bitmap images or other bandwidth-intensive data.

How?

The animation was published from Radi as a fragment. The published HTML file only contains the elements and the script. It lacks the surrounding elements that would make it into a complete web page, i.e. <head>, <body> and other familiar top-level tags. This way, it can be directly loaded into another web page.

This method of embedding is explained in more detail in another tutorial, so I'll just refer you there: Embedding Radi / Dynamic Embedding

I'm using JQuery to perform the actual loading of the animation content. This could be done with any other JavaScript framework as well, but Radi uses JQuery for its own element-layout needs as well. It's therefore convenient to stick with JQuery in this case.

Here is the function that performs the dynamic loading and the fade in/out animations on the overlay elements:

function buttonClicked() {
	var overlay = $('#loadingBackground');
	var loadingBox = $('#loadingBox');
	var container = $('#loadingContainer');
	
	overlay.css({ 'display':'block', 'opacity':0 });
	overlay.animate({'opacity': 0.75}, 400);
		
	container.load("Peeking_bird_fragment.html",  function(response, status, xhr) {
		if (status == "error") {
			// something went wrong with the load; write an error message
  			var msg = "There was an error loading the embedded Radi content:   ";
  			$("#error").html(msg + xhr.status + " " + xhr.statusText);
			$("#error").css({'padding-top':'30px', 'color':'#933'});
			overlay.css({ 'display':'none' });
		} else {
			loadingBox.css({'display': 'block'});
			
			// ok! let's start the animation and fade it into view
			var rd = Radi.documents['Peeking_bird'];
			
			rd.renderAtFrame(0);
			
			setTimeout(function() {
					rd.start();
					container.animate({'opacity': 1}, 800);
				},
				1000);
			
			setTimeout(function() {
					rd.stop();
					
					overlay.animate({'opacity': 0}, 700);
					container.animate({'opacity': 0}, 400);
					
					$('#result').css({ 'display':'block'});
					
					setTimeout(function() {
						overlay.css({ 'display':'none'});
						loadingBox.css({ 'display':'none'}) }, 1000);
				},
				15*1000);
		}
	});
}

Since this is all quite standard JQuery, I'd like to refer you to JQuery's excellent documentation rather than trying to explain it all myself: JQuery tutorials. (If you are a web developer and don't know JQuery, it's well worth exploring it. There's a reason why this framework is so popular.)


That's all there is to it. As mentioned, Embedding Radi covers the embedding in more detail.

If you'd like to read more about the Canvas API and vector graphics in the browser, I've written a blog post about it: Why Radi uses Canvas

Thanks for reading!