Over a million developers have joined DZone.

HTML5 Animation: Examples and Code from Simple to Complex

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Deep down, animation in HTML5 isn't fundamentally different from any other kind of computer graphics programming. You use math to describe objects, and then to describe alterations of those objects. In HTML5, you'll be doing these calculations in JavaScript, and outputting the results to an HTML5 Canvas.

But Canvas opens the animation door to many new web developers -- many of whom haven't done (much or any) animation before, however comfortable they are with JavaScript.

The book Foundation HTML5 Animation with JavaScript is written for such developers -- also for experienced Flash developers looking to head toward HTML5, as Adobe is already doing.

But even without the book, you can browse all the examples, with source code, from how to setup a Canvas, to small necessities like 'listening for keyboard events', to basic animation geometry (will take you back to high school), to specific rendering techniques, basic physics, object deformation, complex collisions, etc.

Simplified TOC:

  1. Basic Animation Concepts
  2. Basics of JavaScript for Animation
  3. Trigonometry for Animation
  4. Rendering Techniques
  5. Velocity and Acceleration
  6. Boundaries and Friction
  7. User Interaction: Moving Objects Around
  8. Easing and Springing
  9. Collission Detection
  10. Coordinate Rotation and Bouncing Off Angles
  11. Billiard Ball Physics
  12. Particle Attraction and Gravity
  13. Forward Kinematics: Making Things Walk
  14. Inverse Kinematics: Dragging and Reaching
  15. 3D Basics
  16. 3D Lines and Fills
  17. Backface Culling and 3D Lighting
  18. Matrix Math
  19. Tips and Tricks

Straightforward examples, incremental difficulty, really informative code. Walks you from 'I sort of know JavaScript syntax' to creating squishy, bouncy 3D balls in Canvas.

Definitely worth checking out.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}