/ Nieuws

Wiego Bergsma

Verslag van de demo animated vector graphics

Afgelopen vrijdag was de kennisoverdracht avond over animated vector graphics.

Dit was een leuke oefening met vanilla javascript (javascript zonder frameworks zoals jQuery) die resulteerde in een lichtgewicht animatie framework voor karakter animatie in SVG. 

Hieronder volgt een samenvatting in het engels.

I recently wrote a lightweight javascript utility for animating vector graphics (SVG) and created a plugin for it on October.

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) are images that store their information in XML rather than pixels (Think Adobe Illustrator versus Adobe Photoshop). Vector graphics have the big advantage that you can scale them without losing quality. This also means that you can use them for both print and screen. Because vector graphics are basically text files they are not only relatively small, but can actually be used inline with the rest of your HTML. When you use vector graphics inline you can manipulate them using CSS and javascript, just like any other element in HTML. That is where the real fun begins!

Animating SVG

Javascript animation libraries like GSAP and SnapSVG already allow you to animate vector graphics and have done for years. You can even use these great utilities to handle your 2D Character Animation needs. I simply choose to write my own for the simple sake of the exercise. I call it “Slim Jim” (after my own test character).

Slim Jim works by interpolating the frames between your keyframes (much like Adobe flash does). My plugin Briddle.Animate automagically converts uploaded SVG files to inline SVG files and allows you to write animations for them.

Rigging

When you prepare a character you design in Adobe Illustrator or Inkscape, you have to construct it in a certain way so it can be animated later. This is called "Rigging".

Unlike in the real world, a computer character is not restricted by any laws of nature. There is nothing preventing you from rotating your character's upperarm without affecting your character's lower arm. In other words, without correction, the upper- and lower-arm of your character would simply separate at the elbow if you rotate the upperarm. Leaving your character's lowerarm floating in the air. So how do we constrain this?

The following is a representation of a humanoid character in a "base" pose (facing us with arms and legs spread out).


|__.__ O __.__|
|__.__ | __.__|
  • If we rotate a leg, we really rotate a group of the upperleg, lowerleg and foot
  • If we rotate a lowerleg, we really rotate a group of the lowerleg and foot
  • If we rotate a foot, we rotate just the foot

Ofcourse, the same is true for the arms and also for the torso.

  • If we rotate our torso, we really rotate a group of the torso, both arms and the head
  • If we rotate our head, we rotate just the head

Animation

For humanoid characters, the right- and left-side do not just mirror eachother in terms of modelling but also in terms of animation. A positve rotation of the right arm equals a negative rotation of the left arm.

We could add constraints for each joint but... because we are animating in 2D we probably do not want to do this because without these constraints we can trick our audience into believing our character is also able to rotate over an (imaginary) z-axis.

Interaction

Ofcourse animations could also be interactive. You could change things based on the season, the time, the scroll position, the cursor position, hovers, clicks, etc. or you can go crazy with background panning, zooming and scrolling to create truly immersive experiences that do not require super-hero skills or larger-than-life budgets. Just be different!

Wrapping up

Now you know the basics of 2D Character Animation in SVG it is time for you to get creative and give incorporating SVG character animations into your own design a try...

Happy coding :)

The Conditional Pixel is een handelsnaam van:

briddle logo