by mamoworld

Section 5

Speed Curves vs Value Curves

Many people find speed curves unintuitive and think that value curves are easier to use. My advice: don’t work with value curves. Seriously. If you’ve never heard of value curves, best skip this section, as all these different kinds of curves might confuse you. But if you have worked with value curves already or are used to CSS easing curves (which is yet another flavor of curves) let me clarify the differences here.

Value Graph & 1D Moves = OK

Let’s take a look at the speed graph and the value graph for some very basic movements: a linear move from left to right, and then the same move with Easy Ease applied.

Movie 6.24 Speed Graph vs Value Graphs - Straight Line Move

You already know how to read the speed graph: the higher the curve goes, the faster the movement is at that point. By contrast, the value graph has two lines (for 2D layers). The red line shows how the x value changes over time, while the green line does the same for the y value. Since the circles in our example only move in the x dimension (i.e. not up or down at all), the y line is a flat, horizontal line. Exactly where this line is depends on the actual y value. Also, keep in mind that those y values are flipped in the graph, i.e. y=0 is at the top of the comp but at the bottom of the graph. If the circles were at the very top of the comp (y=0) then the green line would be on the x axis. If the circle were at y=500px, then the green line would be at a height of 500 in the graph. The red x curve goes upward for the left to right move (since increasing the x position moves to the right), and downward for the move back from right to left (since moving left means decreasing x).

So, the height of a value curve doesn’t say anything about the speed, it only tells you about the actual location. If you want to read the speed from the value curve, you have to look at the angle – the steeper it is, the faster the value is changing at that time. You can see that the linear x curve is a straight line, whereas the eased x curve starts flat, then gets very steep in the middle, and finally flattens out again towards the end. So, in the flat areas the layer moves slowly, and in the steep part it moves faster. If you’re used to CSS easing curves, this will feel familiar (more on those in a second).

Value Graph & 2D Moves = useless

So what’s the problem with these value curves? Well, there are a couple of reasons why I prefer speed curves, but the biggest drawback of value curves is that they become entirely useless once you look at curved movements. So let’s take a look at a second example that’s identical to our previous one, except that the motion path is now a curve.

Movie 6.25 Speed Graph vs Value Graphs - Curve Move

Let’s compare this example to the previous one. Again, we have a linear and an eased move. As you can see, their speed graphs are identical to the previous example, because they have the same easing. For the speed graph, only the speed matters – it doesn’t matter which path you’re moving along. The value graph, on the other hand, doesn’t tell you anything about the timing of the move. It just looks weird and useless. The reason for this is that the red curve only plots the movement of the circle in the x direction, and the green one only in the y direction. Note that I’ve tried to visualize this movement for only x and only y with the little red/green circles, respectively. So the angle of the two value curves shows you how the red and green dots change their speed over time, but this has nothing to do with the speed we’re really interested in, namely the speed of the big white dot that’s moving along the actual motion path. For the linear example, the layer moves at a constant speed all the time, but the red and green dots change their speed (and the green one even changes its direction) all the time. This is why looking at the value graph is absolutely useless when fine-tuning the timing of a move. If you’re moving only in the x or only in the y direction, they look similar to CSS easing curves (which are very useful!). But as soon as you start to move along arcs, they become useless. And as you’ll see in the Arcs Section, arcs are pretty common in animation.

CSS Easing Curves

There’s actually a third kind of curve for animations, one that’s mostly popular in the web design world since they can be used to specify the easing of animations inside a webpage with Cascading Style Sheet (CSS). These CSS easing curves are similar to value curves, but the y axis of the graph doesn’t show the actual value, but rather the completion of the move as a percentage. Here’s an example that shows this CSS easing graph together with the speed and value graphs for a basic Easy Ease animation.

Movie 6.26 CSS Easing Graph for Easy Ease Move

Since the layer only moves in x, you can see that the CSS easing graph looks very similar to the x value graph, but the great thing about this is that it would still look exactly the same for any curved motion path, as long as it’s Easy Eased. So, like the speed graph, the CSS easing graph is independent of the actual motion path. You can also see that unlike the value graph it doesn’t flip when the layer moves back – while moving back, the x value decreases and so the x value curve goes down, but the CSS easing curve still rises from 0% to 100% completion.

After Effects doesn’t natively support CSS easing curves, but you can use the excellent Flow extension for that. Here’s a screenshot of its user interface:

Speed graphs are still more powerful than CSS easing curves, to some extent: we’ve learned that bouncing balls have straight lines as speed curves, for example, and in a CSS easing curve it’s nearly impossible to distinguish those from the standard Easy Ease curves: So if you find speed graphs intuitive, stick with them. But if you’re familiar with CSS easing, you should definitely take a look at Flow. Another great thing about this extension is that it comes with a comprehensive library of presets (see the right side of the screenshot), and you can also add your own. So instead of just the default Easy Ease, you have more than 20 different easing variants that you can apply with a single click.

by mamoworld