Skip to content

Allow cubic bezier to accept value outside [0,1] #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
suzyh merged 2 commits into from
Aug 2, 2016
Merged

Allow cubic bezier to accept value outside [0,1] #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a17c54
Allow cubic bezier to accept value outside [0,1]
suzyh Jul 29, 2016
36b96e2
Use gradient to extrapolate instead of linear fn
suzyh Jul 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions src/timing-utilities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,23 @@
return linear;
}
return function(x) {
if (x == 0 || x == 1) {
return x;
if (x <= 0) {
var start_gradient = 0;
if (a > 0)
start_gradient = b / a;
else if (!b && c > 0)
start_gradient = d / c;
return start_gradient * x;
}
if (x >= 1) {
var end_gradient = 0;
if (c < 1)
end_gradient = (d - 1) / (c - 1);
else if (c == 1 && a < 1)
end_gradient = (b - 1) / (a - 1);
return 1 + end_gradient * (x - 1);
}

var start = 0, end = 1;
while (start < end) {
var mid = (start + end) / 2;
Expand Down
13 changes: 2 additions & 11 deletions test/web-platform-tests-expectations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -839,23 +839,14 @@ module.exports = {
},

'test/web-platform-tests/web-animations/interfaces/KeyframeEffect/effect-easing.html': {
'effect easing produces values greater than 1 with keyframe easing cubic-bezier(0, 0, 0, 0)':
'assert_approx_equals: The left of the animation should be approximately 102.40666638411385 at 250ms expected 102.40666638411385 +/- 0.01 but got 100',

'effect easing produces values greater than 1 with keyframe easing cubic-bezier(1, 1, 1, 1)':
'assert_approx_equals: The left of the animation should be approximately 102.40666638411385 at 250ms expected 102.40666638411385 +/- 0.01 but got 100',

'effect easing produces negative values 1 with keyframe easing cubic-bezier(0, 0, 0, 0)':
'assert_approx_equals: The left of the animation should be approximately -29.501119758965654 at 250ms expected -29.501119758965654 +/- 0.01 but got 0',

'effect easing produces negative values 1 with keyframe easing cubic-bezier(1, 1, 1, 1)':
'assert_approx_equals: The left of the animation should be approximately -29.501119758965654 at 250ms expected -29.501119758965654 +/- 0.01 but got 0',

'effect easing produces values greater than 1 with keyframe easing producing values greater than 1':
'assert_approx_equals: The left of the animation should be approximately 101.9006796334848 at 240ms expected 101.9006796334848 +/- 0.01 but got 100',

'effect easing produces negative values with keyframe easing producing negative values':
'assert_approx_equals: The left of the animation should be approximately -16.589193103032184 at 10ms expected -16.589193103032184 +/- 0.01 but got 0',
'effect easing which produces values greater than 1 and the tangent on the upper boundary is infinity with keyframe easing producing values greater than 1':
'assert_approx_equals: The left of the animation should be approximately 100 at 240ms expected 100 +/- 0.01 but got 99.5333',
},

'test/web-platform-tests/web-animations/interfaces/KeyframeEffect/effect-easing-steps.html': {
Expand Down