8 Useful Tips to Add a HTML5 Canvas Animation in Websites

April 25, 2013 · 1 comment

by viki

html5-animation

Are you hooray for the success of HTML5 camp? Do you want to add HTML5 canvas animation to your website? Actually, more and more people wish to do so. The reason, I think, is very simple.

HTML5 is an increasingly popular language for creating motion content running on modern browsers and mobile devices. It works directly without the need for plug-ins. This greatly decreases the time to download an interactive page and increases the page’s response speed. . Adoption of the standard is good in recent browsers and for old browsers fall back is possible. Moreover, the HTML5 animated content can work on mobile devices such as tablets and Smartphones. This will definitely bring your website more visitors. HTML5 animations can be applied in web elements of animated background, animated logo, animated banner, animated presentation, etc. But then, how do you make HTML5 animations? Are there any alternative methods for that?
The answer is absolutely right. Here in the following part, I will show you 8 ways to make HTML5 animation for your website. After you check up these approaches, you can create HTML5 animation with <canvas> tag or some practical HTML5 animation tools with ease.  I also encourage you to investigate the HTML5 website templates in this article.


ElegantThemes
ThemeForest

Advertisement

Creating Directly With Canvas Element

HTML5 <canvas> gives you an easy and powerful way to draw graphics, make photo compositions or make simple animations. As it comes closer and closer to replicating the features of Flash, the canvas animations are beginning to be popular.

1.       Using Manual Coding

You can create a simple animation using HTML5 canvas element by your manual coding. Just use different layers with several canvas objects.
The first thing you need to do is edit your images in Photoshop so they will have a .png transparency. For example:
- miramax_logo.png
- videos.png
Then use a canvas element for each image animation. Like:

manual-html5-canvas-coding

The last step is to add JavaScript and CSS files and create JavaScript functionality. Then you will get the canvas animation you need.

css-javascript

2.       HTML5 Canvas KineticJS

KineticJS is an HTML5 Canvas JavaScript library that extends the 2D context by enabling canvas interactivity for desktop and mobile applications. Define code like:

window.onload = function(){
var stage = new Kinetic.Stage(“container”, 578, 200);
var layer = new Kinetic.Layer();


};

For example, if you want to animate a shape’s rotation with KineticJS, you can modify the shape’s rotation, and then redraw the layer with each animation frame using the onFrame() method.

Here is a HTML5 canvas KineticJS rotation animation example:

htlm5-canvas-kineticjs-rotation-animation-tutorial

3.       HTML5 Canvas Animation with requestAnimFrame

To create an HTML5 animation using canvas, we can use the requestAnimFrame which enables the browser to determine the optimal FPS for your animation. For each animation frame, you can update the elements on the canvas, clear the canvas, redraw the canvas, and then request another animation frame.

You can see the HTML5 animation template here.

4.       Ai->Canvas plug-in

User of Adobe Illustrator can use the Ai->Canvas plug-in to export vector and bitmap artwork directly to an HTML5 canvas element. The plug-in provides drawing, animation and coding options so that you can build interactive, well-designed canvas-based web apps. Ai->Canvas supports rotation, scaling, fading, and movement along a path. For more advanced users, you can add triggers that start one animation when another animation completes. In a nut shell, this is a useful plug-in to accelerate your HTML5 canvas animation development.

ai-canvas-plugin

Converting With HTML5 Animation Tools

Using the <canvas> element isn’t very difficult but you do need a basic understanding of HTML and JavaScript. Thus, many of you may think that developing HTML5 animation is time-consuming, because you have to create it with all the coding required. However, I am going to show you how to create compelling animated content for HTML5 with relative ease.

5.       SWF Quicker

For those flash animation designers, This Flash/HTML5 animation maker is definitely a big improvement. It will export any flash animation as HTML5 format, no coding required. Thus, you can make your flash animation viewed on any modern browsers and mobile devices like iPhone/iPad.

With Sothink SWF Quicker, you can easily make HTML5 animation. Just create and edit the flash animation you want, and output to HTML5 codes. SWF Quicker is also a powerful flash maker and vector drawing tools. It supports importing and editing SWF file of flash and various kinds of media types. Furthermore, this HTML5 animation tool has abundant flash templates of flash album, banner, navigation button and slideshow. It also provides over 60+ built-in animated effects. All in all, SWF Quicker is truly a helpful HTML5 animation tool that you don’t want to miss.

6.       Tumult Hype for Mac OS X

This is an application for creating HTML5 animations on Mac OS X. Using Tumult Hype, you can create HTML5 animations and interactive content works on desktops, Smartphones and iPads. It uses a key frame animation system, much like flash, and allows you to record motion and transitions easily. This HTML5 animation maker also supports cutting edge features like box shadows, reflection, and 3D transformations.tumult-hyoe

7.       Radi

Radi is another visual design application for Mac OS X. It is designed from the ground up to help you create animated content taking full advantage of HTML5 features. Animations and interactive web pages designed in Radi can be embedded into anything that uses web technology, even HTML5-compatible electronic books like Apple iBooks. It also works for producing web video or real time animation.

radi-visual-designer

8.       SVG to HTML5 Canvas Converter

If you want to statically generate some Canvas javascript from a SVG file, you can try this tool. SVG to HTML5 Canvas Converter uses a modified version of the excellent Canvg library to renders the SVG immediately. Then you can study and manipulate the canvas statements as required. The operation is very easy, just paste SVG on the site and click the convert button, then you will get the JavaScript HTML5 canvas function.

svg-to-html5-canvas-converter

Ok, these are the eight practical approaches to creating HTML5 animations. Hope the above methods do provide you valuable assistance. If you know any other ways, please share with us in comment. That will be grateful.

Author : Viki Hoo

Name: Viki hoo
Viki is the Founder and Editor-in-chief of 7plusdezine. She’s graphic
designer with 6 years of experience in vector, logo design?flash to HTML5.
Meanwhile, She also likes writing articles about her experience, summary
and analysis. She is writing for several sites at the moment. You can
follow her on Facebook @Viki Hoo

{ 1 comment… read it below or add one }

Marco Berrocal March 28, 2012 at 2:30 am

Hello Viki,

I have a question. I have to make a project where I have to allow the user to “fill” in certain parts of an irregular shape and save those values. Which would be the best way to do this? Using the canvas element or SVG?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics