Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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 how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}