Last active
August 29, 2015 14:00
-
-
Save Noitidart/f43e3e8f42e7e7476bee to your computer and use it in GitHub Desktop.
_js-snippet-PointOnCubicBezier - Plug in the final transition time and final transition property value and it will tell you what the values are along the curve, this snippet is using the ease coordinates of cubic-bezier(.25,.1,.25,1). Cubic bezier javascript functions from: http://13thparallel.com/archive/bezier-curves/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var coord = function (x,y) { | |
if(!x) var x=0; | |
if(!y) var y=0; | |
return {x: x, y: y}; | |
} | |
function B1(t) { return t*t*t } | |
function B2(t) { return 3*t*t*(1-t) } | |
function B3(t) { return 3*t*(1-t)*(1-t) } | |
function B4(t) { return (1-t)*(1-t)*(1-t) } | |
function getBezier(percent,C1,C2,C3,C4) { | |
var pos = new coord(); | |
pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent); | |
pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent); | |
return pos; | |
} | |
var finalHeight = 300; | |
var finalTime = 250; | |
var me = Services.ww.activeWindow; | |
var ease = { //cubic-bezier(0.25, 0.1, 0.25, 1.0) | |
xs: [0, .25, .25, 1], | |
ys: [0, .1, 1, 1] | |
}; | |
var theBezier = ease; | |
me.alert(getBezier(.8, new coord(theBezier.xs[3]*finalTime,theBezier.ys[3]*finalHeight), new coord(theBezier.xs[2]*finalTime,theBezier.ys[2]*finalHeight), new coord(theBezier.xs[1]*finalTime,theBezier.ys[1]*finalHeight), new coord(theBezier.xs[0]*finalTime,theBezier.ys[0]*finalHeight)).toSource()); | |
me.alert(getBezier(.8, new coord(theBezier.xs[0]*finalTime,theBezier.ys[0]*finalHeight), new coord(theBezier.xs[1]*finalTime,theBezier.ys[1]*finalHeight), new coord(theBezier.xs[2]*finalTime,theBezier.ys[2]*finalHeight), new coord(theBezier.xs[3]*finalTime,theBezier.ys[3]*finalHeight)).toSource()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
README
Rev1
Rev2