Skip to main content
100%

Accelerate, Then Coast

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Apr 10, 2014

An interactive easing function compares constant acceleration with constant speed. A black curve shows the combined ease, with brown and steelblue dashed lines representing acceleration and coasting phases. A slider adjusts acceleration, and an animated circle travels along the path. This example implements the `easeAccelerateThenCoast` function and uses `d3.svg.line`, `d3.scale.linear`, `transition.attrTween`, and SVG rendering in D3 v3.

AI-generated description

This diagram demonstrates an easing function that first applies constant acceleration and then “coasts” at constant speed. This is useful to constrain the maximum speed of long slow-in transitions.

The constant acceleration curve is shown in <b style="color:brown;">brown</b>, while the constant speed line is shown in <b style="color:steelblue">blue</b>. The combined curve is shown in black. The lines intersect at the point their derivatives are equal, providing C<sup style="line-height:0;">1</sup> continuity.

With acceleration <i>a</i> = 1, this easing function is equivalent to quadratic easing: constant acceleration is applied continuously from <i>t</i> = 0 to <i>t</i> = 1. With infinite acceleration, this easing function is equivalent to linear easing: the acceleration is instantaneous at <i>t</i> = 0.

This easing function can be combined with reflection to incorporate slow-out decceleration.

gpl-3.0 Licensed

Similar vizzes