Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active Feb 9, 2016
Embed
What would you like to do?
Custom Easing
license: gpl-3.0

An example of how to implement a custom easing function, here a parameterized bounce. Custom easing functions must return 1 when t ≥ 1, or else transitions will not end on the desired value.

(Warning: many people believe “bounce” easing is gimmicky, and recommend you use the default “cubic-in-out” instead!)

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
parameters = [0.4, 0.3, 0.2, 0.1];
var x = d3.scale.ordinal()
.domain(parameters)
.rangeRoundBands([0, width], .5);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("rect")
.data(parameters)
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.attr("x", x)
.attr("y", -x.rangeBand())
.each(function(d, i) {
d3.select(this).transition()
.duration(1500)
.delay(1500 * i)
.ease(bounce(d))
.attr("y", height - x.rangeBand());
});
function bounce(h) {
if (!arguments.length) h = 0.25;
var b0 = 1 - h,
b1 = b0 * (1 - b0) + b0,
b2 = b0 * (1 - b1) + b1,
x0 = 2 * Math.sqrt(h),
x1 = x0 * Math.sqrt(h),
x2 = x1 * Math.sqrt(h),
t0 = 1 / (1 + x0 + x1 + x2),
t1 = t0 + t0 * x0,
t2 = t1 + t0 * x1,
m0 = t0 + t0 * x0 / 2,
m1 = t1 + t0 * x1 / 2,
m2 = t2 + t0 * x2 / 2,
a = 1 / (t0 * t0);
return function(t) {
return t >= 1 ? 1
: t < t0 ? a * t * t
: t < t1 ? a * (t -= m0) * t + b0
: t < t2 ? a * (t -= m1) * t + b1
: a * (t -= m2) * t + b2;
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.