Skip to content

Commit

Permalink
Increase Bezier timing function accuracy
Browse files Browse the repository at this point in the history
The polyfill evaluation of cubic Bezier timing functions
gives slightly different results than the native Blink
implementation.

In my testing, this change reduced the absolute error by 63%
while only increasing the number of cubic function evaluations
by 31%

This closes #139
  • Loading branch information
ericwilligers committed Apr 21, 2016
1 parent fb701cb commit 83c9090
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/timing-utilities.js
Expand Up @@ -168,7 +168,7 @@
var mid = (start + end) / 2;
function f(a, b, m) { return 3 * a * (1 - m) * (1 - m) * m + 3 * b * (1 - m) * m * m + m * m * m};
var xEst = f(a, c, mid);
if (Math.abs(x - xEst) < 0.001) {
if (Math.abs(x - xEst) < 0.0001) {
return f(b, d, mid);
}
if (xEst < x) {
Expand Down
6 changes: 3 additions & 3 deletions test/js/timing-utilities.js
Expand Up @@ -23,15 +23,15 @@ suite('timing-utilities', function() {
var f = toTimingFunction('ease');
var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.0)');
assertTimingFunctionsEqual(f, g, 'ease should map onto preset cubic-bezier');
assert.closeTo(f(0.1844), 0.2601, 0.01);
assert.closeTo(g(0.1844), 0.2601, 0.01);
assert.closeTo(f(0.1844), 0.2599, 0.001);
assert.closeTo(g(0.1844), 0.2599, 0.001);
assert.equal(f(0), 0);
assert.equal(f(1), 1);
assert.equal(g(0), 0);
assert.equal(g(1), 1);

f = toTimingFunction('cubic-bezier(0, 1, 1, 0)');
assert.closeTo(f(0.104), 0.392, 0.01);
assert.closeTo(f(0.104), 0.3920, 0.001);

function assertIsLinear(easing) {
var f = toTimingFunction(easing);
Expand Down

0 comments on commit 83c9090

Please sign in to comment.