Skip to content

Instantly share code, notes, and snippets.

@gre

gre/EasingFunctions.json

Last active January 11, 2023 10:28
Show Gist options
  • Save gre/1926947 to your computer and use it in GitHub Desktop.
Save gre/1926947 to your computer and use it in GitHub Desktop.
Download ZIP
DEPRECATED Please use http://github.com/gre/bezier-easing for latest vrrsion.
Raw
EasingFunctions.json
{
"ease": [0.25, 0.1, 0.25, 1.0],
"linear": [0.00, 0.0, 1.00, 1.0],
"ease-in": [0.42, 0.0, 1.00, 1.0],
"ease-out": [0.00, 0.0, 0.58, 1.0],
"ease-in-out": [0.42, 0.0, 0.58, 1.0]
}
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS and Canvas Bezier timing function editor</title>
<style type="text/css">
* {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#wrapper {
margin: 0 auto;
width: 550px;
}
#bezierEditor, #clock {
float: left;
}
#clock {
margin-right: 30px;
}
#bezierEditor {
position: relative;
width: 225px;
height: 225px;
}
#yaxis {
position: absolute;
top: 0;
left: 0;
width: 20px;
}
#xaxis {
position: absolute;
bottom: 0;
left: 15px;
height: 20px;
}
#bezier {
position: absolute;
left: 20px;
top: 5px;
}
#info {
margin-top: 10px;
clear: both;
}
p {
padding: 0;
margin: 0;
}
footer {
margin-top: 10px;
padding-top: 10px;
text-align: center;
}
footer a {
color: #09f;
}
dl {
display: block;
margin: 0;
padding: 0;
}
dt {
padding: 0;
margin: 0;
font-weight: bold;
}
dt:after {
content: ': ';
}
</style>
<script type="text/javascript" src="KeySpline.js"></script>
</head>
<body>
<div id="wrapper">
<canvas id="clock" width="200" height="200"></canvas>
<div id="bezierEditor">
<canvas id="bezier" width="200" height="200"></canvas>
<canvas id="yaxis" width="20" height="210"></canvas>
<canvas id="xaxis" width="210" height="20"></canvas>
</div>
<div id="info">
<h2>Usage</h2>
<dl>
<dt>CSS</dt>
<dd><code>transition-timing-function: cubic-bezier(<strong id="transitionTimingFunctionValue"></strong>);</code></dd>
</dl>
<dl>
<dt>JavaScript with KeySpline</dt>
<dd><code>var k = new KeySpline(<strong id="keySplineParams"></strong>); <em style="opacity: 0.5"> ... k.get(time);</em></code></dd>
</dl>
</div>
<footer id="footer">
<a href="http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/">Read the article</a> -
<a href="https://gist.github.com/1926947">Gist</a>
</footer>
</div>
<script type="text/javascript">(function(){
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
if (window.parent != window) {
var node = document.getElementById("footer");
node.style.display = "none";
}
var cumulativeOffset = function(element) {
var top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
};
var bezier;
var fun;
var currentStep = [0, 0];
var transitionTimingFunctionValue = document.getElementById("transitionTimingFunctionValue");
var keySplineParams = document.getElementById("keySplineParams");
function setBezier (b) {
bezier = b;
fun = new KeySpline(b[0], b[1], b[2], b[3]).get;
for (var i = 0; i < b.length; ++i)
b[i] = Math.floor(b[i]*100)/100;
var str = b+"";
transitionTimingFunctionValue.innerHTML = str;
keySplineParams.innerHTML = str;
}
function getBezierFunction () {
return fun;
}
(function(){
var canvas = document.getElementById("xaxis");
var ctx = canvas.getContext("2d");
for (var i=0; i<=10; ++i) {
var n = i / 10;
var high = (i % 5 == 0);
var x = 5 + n*(canvas.width-10);
x = Math.floor(x);
ctx.font = "9px monospace";
ctx.textBaseline = "top";
ctx.textAlign = "center";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, 0);
if (high) {
ctx.lineTo(x, 8);
ctx.stroke();
ctx.fillText(""+n, x, 10);
}
else {
ctx.lineTo(x, 4);
ctx.stroke();
}
ctx.textBaseline = "bottom";
ctx.fillText("time", canvas.width-40, 20);
}
}());
(function(){
var canvas = document.getElementById("yaxis");
var ctx = canvas.getContext("2d");
for (var i=0; i<=10; ++i) {
var n = i / 10;
var high = (i % 5 == 0);
var y = 5 + (1-n)*(canvas.height-10);
y = Math.floor(y);
ctx.font = "9px monospace";
ctx.textBaseline = "middle";
ctx.textAlign = "right";
ctx.beginPath();
ctx.moveTo(20, 0);
ctx.lineTo(20, canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20, y);
ctx.lineTo(16, y);
ctx.stroke();
if (high) {
ctx.fillText(""+Math.floor(n*100), 15, y);
}
}
ctx.textAlign = "left";
ctx.textBaseline = "bottom";
ctx.rotate(Math.PI/2);
ctx.fillText("percentage", 20, 0);
}());
(function(){
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");
var DURATION = 1500;
var LINE_WIDTH = 0.3;
// state variables
var tStart = +new Date();
function setup () {
ctx.scale(canvas.width, canvas.height);
}
function render () {
var bezierf = getBezierFunction();
var now = +new Date();
var t = (now - tStart) % (2*DURATION);
var reverse = t > DURATION;
if (reverse) t -= DURATION;
var x = t / DURATION;
var y = bezierf(x);
currentStep = [ x, y ];
ctx.clearRect(0,0,1,1);
ctx.strokeStyle = 'red';
ctx.lineWidth = LINE_WIDTH;
ctx.beginPath();
ctx.arc(0.5, 0.5, 0.3, 0, y*2*Math.PI, reverse);
ctx.stroke();
}
setup();
(function loop () {
requestAnimFrame(function() {
loop();
render();
}, canvas);
}());
}());
(function(){
var canvas = document.getElementById("bezier");
var ctx = canvas.getContext("2d");
var HANDLE_RADIUS = 0.03;
// state variables
// handles positions
var handle = [ null, [0.25, 0.25], [0.75, 0.75] ];
var draggingHandle = 0;
var hoveringHandle = 0;
var hovering = false;
var stime = +new Date();
var oneHandleClicked = false;
function positionWithE (e) {
var o = cumulativeOffset(canvas);
return { x: relativeX(e.clientX-o.left), y: relativeY(e.clientY-o.top) };
}
function setup() {
canvas.addEventListener("mousedown", function (e) {
var p = positionWithE(e);
var hnum = findHandle(p.x, p.y);
if (hnum) {
draggingHandle = hnum;
oneHandleClicked = true;
}
});
canvas.addEventListener("mouseup", function (e) {
var p = positionWithE(e);
if (draggingHandle) {
setHandle(draggingHandle, p.x, p.y);
draggingHandle = 0;
}
});
canvas.addEventListener("mousemove", function (e) {
var p = positionWithE(e);
if (draggingHandle) {
setHandle(draggingHandle, p.x, p.y);
}
hoveringHandle = draggingHandle || findHandle(p.x, p.y);
});
canvas.addEventListener("mouseover", function (e) {
hovering = true;
hasChanged = true;
});
canvas.addEventListener("mouseout", function (e) {
hovering = false;
hasChanged = true;
draggingHandle = 0;
hoveringHandle = 0;
});
syncBezier();
}
function render () {
var now = +new Date();
ctx.save();
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw grid
ctx.translate(0, canvas.height);
ctx.scale(canvas.width, -canvas.height);
// Draw projections
ctx.lineWidth = 0.01;
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.beginPath();
ctx.moveTo(currentStep[0], 0);
ctx.lineTo(currentStep[0], currentStep[1]);
ctx.lineTo(0, currentStep[1]);
ctx.stroke();
// Draw bezier
ctx.lineWidth = 0.02;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(handle[1][0], handle[1][1], handle[2][0], handle[2][1], 1, 1);
ctx.stroke();
// Draw handle
ctx.strokeStyle = "red";
ctx.fillStyle = "white";
ctx.lineWidth = 0.01;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(handle[1][0], handle[1][1]);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(handle[2][0], handle[2][1]);
ctx.stroke();
var r = HANDLE_RADIUS;
if (!oneHandleClicked) {
r += 0.2*HANDLE_RADIUS*Math.cos((stime-now)/150);
}
for (var i=1; i<handle.length; ++i) {
var h = handle[i];
ctx.beginPath();
ctx.arc(h[0], h[1], r, 0, Math.PI*2);
ctx.fillStyle = (hoveringHandle == i) ? "red" : "white";
ctx.fill();
ctx.stroke();
}
ctx.restore();
}
function syncBezier () {
setBezier([ handle[1][0], handle[1][1], handle[2][0], handle[2][1] ]);
}
function findHandle (x, y) {
for (var i=1; i<handle.length; ++i) {
var h = handle[i];
var radius = HANDLE_RADIUS;
var dx = x - h[0];
var dy = y - h[1];
if (dx*dx+dy*dy < HANDLE_RADIUS*HANDLE_RADIUS)
return i;
}
return 0;
}
function setHandle (num, x, y) {
handle [num] = [x, y];
syncBezier();
render();
}
function relativeX (x) {
return x/canvas.width;
}
function relativeY (y) {
return 1-y/canvas.height;
}
setup();
(function loop () {
requestAnimFrame(function() {
loop();
render();
}, canvas);
}());
}());
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9919624-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Raw
KeySpline.js
/** MIT License
*
* KeySpline - use bezier curve for transition easing function
* Copyright (c) 2012 Gaetan Renaudeau <renaudeau.gaetan@gmail.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*/
/**
* KeySpline - use bezier curve for transition easing function
* is inspired from Firefox's nsSMILKeySpline.cpp
* Usage:
* var spline = new KeySpline(0.25, 0.1, 0.25, 1.0)
* spline.get(x) => returns the easing value | x must be in [0, 1] range
*/
function KeySpline (mX1, mY1, mX2, mY2) {
this.get = function(aX) {
if (mX1 == mY1 && mX2 == mY2) return aX; // linear
return CalcBezier(GetTForX(aX), mY1, mY2);
}
function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C(aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function CalcBezier(aT, aA1, aA2) {
return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
}
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function GetSlope(aT, aA1, aA2) {
return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
function GetTForX(aX) {
// Newton raphson iteration
var aGuessT = aX;
for (var i = 0; i < 4; ++i) {
var currentSlope = GetSlope(aGuessT, mX1, mX2);
if (currentSlope == 0.0) return aGuessT;
var currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
}
@sandermarechal
Copy link

I think I found a bug. Drag the left handle to (1, 90). Drag the right handle to (0, 10). You can see the circular graph go wild.

@gre
Copy link
Author

gre commented Mar 2, 2012

Thanks,

It occurs when you make the slope very high ( like this one http://desmond.imageshack.us/Himg811/scaled.php?server=811&filename=capturedecran20120302a1.png&res=medium )

This is an extrem case, but I still need to fix it, I probably need to use the dichotomic search when slope is high, exactly like in the moz algorithm.

@gre
Copy link
Author

gre commented Mar 2, 2012

And BTW I just figure out it was logical that it could not work http://en.wikipedia.org/wiki/Newton%27s_method
If the derivate of f is near zero, the value is going to be very high or low and we have lot of approximation error.

@sandermarechal
Copy link

Can't you just approach the limit of the near-vertical from just one side? The problem seems to be that, when the slope is near-vertical that the circular graph rapidly swings wildly between low and high (probably due to approximation error). The goal of your library is of course to make it go up (e.g. movement from start to destination, never backwards).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment