Verslag van de demo animated vector graphics
Posted on 2019-10-20
Afgelopen vrijdag was de kennisoverdracht avond over animated vector graphics.
Hieronder volgt een samenvatting in het engels.
Scalable Vector Graphics (SVG)
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.
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
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.
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!
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 :)