Problem of Declarative Animation

By Xah Lee. Date: . Last updated: .

When the path of a object in animation cannot be described by a function, the animation cannot be coded declaratively, as in CSS animation.

In another perspective, we see that CSS animation spec, and SVG animation spec, are limited in their use. Or, declarative style of specifying animation, is not encompassing in practice.

What's some example of such animation?

What's some example of animation that can be specified by declaration style as in CSS/SVG animation?

Following explains why.

on the math intrinsics of animation

now, Xah's Edu Corner Extempore! episode №20171221120845, on the math intrinsics of animation or what i've learned!

so, in the past weeks, i've been studying svg animation or web animation tech. Basically read the whole svg 1.1 v2 spec on animation. It turns out, there's something intrinsically complex about 2D animation, and quite interesting.

imagine, you have a rectangle, and a small circle inside. The circle is a billiard ball, you want to bounce it around the rect, as a pool table animation.

normally, you do animation by drawing each frame. Basically, write a timed loop, and in each, say the position of the circle. This, we might call the imperative approach, as in imperative programing, where you say exactly what to do in each step.

but there's a declarative approach. That is, instead of a timed loop, you specify the drawings of the start frame, and end frame, and give a path, and a time duration. The ball, will move thru the path, in linear time, of the given duration. That's declarative approach, and is what svg/css/web animation is about.

[see CSS: Animation]

note that in this declarative approach, the compiler, still actually need to figure out at what frame/time the ball is, and draw it. So, it's like function programing, the compiler, generate things for you.

the declarative approach seems simple. But actually, not quite. There are lots intrinsic complexity. Imagine the billiard ball again. Now, as your ball moves, it needs to slow down. So the timing, isn't “linear”

So, now you need a spec of what's called “calcMode” in svg, that controls the pace of animation. possible values are • linear • discrete • paced • spline. In css animation, you have similar called “animation-timing-function”.

Now, suppose there are 2 billiard balls. 1 hits the other, stops, and the other moves. So, now you kinda have 2 animations, one starts after the other stops. So, now in declarative way, you need to have a spec of when animations starts or connect.

astroidTrammel
Trammel of Archimedes
[see Astroid]

now, look at this animation. The imperative approach, you just draw the thing for each loop, easy. In declarative approach, you draw line segment, then specify a path this thing will move, and the corresponding rotation (of the line). Actually slightly more complex.

the declarative approach, in fact you may break it down into 4 animation sequences. Using mirror (transform) of the 1st part to produce the other 3 animation sequences. It is actually much more complex than the imperative approach.

also, as far as i know, in svg/css/web animation tech, there's no way to create a “leave a trace” effect, as needed in this animation (for the line). So the declarative approach is either impossible by itself, or far more complex to create.

Now, imagine you want to do animation of swarm of birds. You might have seen 3d boids. (web search it) Or, in 2d, a bunch of dots moving about in a particular pattern. (lets stick with 2D) Or, imagine, the flight of 5 jet planes in a air show. Or, many of the screen saver patterns.

so, when the animation becomes complex, the declarative approach breaks down. Cuz it is impossible to nice math describe the change of shapes/orientation/path especially when they change in a pace that's not simply linear or simple function.

The imperative approach, where we “hard code” each shape (2d or 3d)'s position/orientation for each frame. Is actually simpler to do when the animation is complex.

If you have a question, put $5 at patreon and message me.