haotianblog
2D Animation Principles
An interactive route from layered SVG to bone matrices, two-bone IK, skinning weights, and keyframe easing.
Search
Ask the AI

2D Animation Principles

2D Animation Principles: From Layered SVG to Bones, IK, Skinning, and Keyframes

This series continues after character-image segmentation and layered SVG generation. It answers the harder question: how do clean layers become a controllable, reusable character without visible gaps around joints?

The route follows mathematical dependencies rather than software menus. Build local coordinates and parent-child transforms first, solve poses with inverse kinematics, deform a mesh with skinning weights, and finally control speed and rhythm with time functions.

Four stages solve four different problems

Bones, IK, skinning, and keyframes are often grouped under “rigging,” but they operate on different state. Classifying a bug as a coordinate, target-solving, deformation, or time-sampling problem prevents one stage from hiding an error created by another.

StageMain inputCore constraintObservable outputTypical failure
Hierarchy transformsLocal pivots, parent IDs, translation, rotation, scaleM_world = M_parent M_localWorld matrix and joint position for every boneOrbiting the canvas origin, detached children, wrong matrix order
Two-bone IKShoulder, target, bone lengths, elbow direction|a-b| <= d <= a+bShoulder angle, elbow angle, clamped end pointacos NaN, elbow flips, violated joint limits
Linear blend skinningVertices, inverse bind matrices, bone matrices, weightsw_j >= 0 and sum(w_j)=1Deformed vertices and a continuous silhouetteCollapsed joints, white fringes, cracks from discontinuous weights
Time interpolationKeyframe times, pose values, easing functionu=(t-t0)/(t1-t0)Local pose and velocity at any timeVelocity jumps, drift after dropped frames, mechanical synchronization

Coordinate convention used in the series

The numerical examples use screen coordinates with x to the right and y downward; each formula states its angle sign when it matters. A layer pivot is stored in layer-local coordinates, and bone length is the Euclidean distance between two joints in the bind pose. Matrices use column vectors, so the rightmost transform acts first. Row-vector engines must reverse the multiplication order consistently.

asset layer -> local pivot -> local bone matrix
            -> parent/world matrix -> IK pose
            -> skinning deformation -> timeline sample -> render

For each frame, sample keyframes to obtain local channels, solve constrained IK, traverse the hierarchy from the root to build world matrices, and then skin the mesh. Skinning before IK uses stale matrices; writing a world angle back into a local channel accumulates the parent rotation twice.

End-to-end acceptance record

Do not rely only on whether the character “looks close.” Save pivots, angles, end-point coordinates, and weight sums for one fixed pose, then compare those values after each change.

  • With a 30-degree parent rotation and zero child-local rotation, the child world angle must be 30 degrees.
  • For bone lengths 150 and 125, a target 300 units from the shoulder must clamp to 275 instead of producing NaN.
  • Every joint-region vertex must have a weight sum of 1 within tolerance; the bind pose must remain unchanged after skinning.
  • An 800 ms action must reach its end at the same real time at 60 Hz, 120 Hz, and with intentionally skipped frames.
  • Inspect the transparent asset over dark and light backgrounds to expose white seams, black fringes, and translucent overlap bands.

From assets to motion

Build coordinates first, then solve pose, deformation, and timing

This route starts with the layered SVG produced by the Animation Asset Lab, then explains bone hierarchies, IK, skinning weights, and keyframe interpolation. Every step includes a browser-side experiment.

Prepare animation assets first
  1. 01 Matrices · FK Skeletal Transforms and Forward Kinematics Derive parent-child world coordinates from pivots, local space, and homogeneous matrices.
  2. 02 Geometry · IK Two-Bone Inverse Kinematics Use the law of cosines to solve shoulder and elbow angles, unreachable targets, and elbow flips.
  3. 03 Weights · Deformation Skinning Weights and Seams Understand linear blend skinning, normalized weights, and why joints collapse or reveal gaps.
  4. 04 Time · Curves Keyframes, Interpolation, and Easing Compare linear, ease-in-out, and cubic Bezier curves through velocity and timing.
Layered assets Bone hierarchy IK Skinning Timing curves

How to use this series

  1. If you do not yet have layered artwork, use the Animation Asset Lab to prepare SVG groups with stable IDs.
  2. Read steps 01 through 04 in order. Each article derives the equations before exposing the parameters in an interactive demo.
  3. Record the local coordinates, weights, and time values, then map them to Spine, Live2D, After Effects, or browser SVG.
  4. When a joint reveals a white seam, do not only add a stroke. Inspect shared boundaries, overlap margins, normalized weights, and alpha compositing.

Every interactive demo runs in the current browser. It uploads no image and calls no model API.

Scroll down