Accelerate, Then Coast
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 descriptionThis 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.