Over a million developers have joined DZone.

HTML5 Animation: Examples and Code from Simple to Complex

DZone's Guide to

HTML5 Animation: Examples and Code from Simple to Complex

· Web Dev Zone ·
Free Resource

Building real-time chat? Enroll in a Free Course on Mobile Chat Development. 

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.

Power realtime chat, IoT and messaging apps at scale. Pubsub realtime messaging, functions, chat, presence, push, notifications, blocks catalog and more.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}