[css3-transitions] Slightly relaxing cubic-bezier constraints

"The four values specify points P1 and P2  of the curve as (x1, y1,
x2, y2). All values must be in the range [0, 1] or the definition is
invalid."

If the [0, 1] constraints were removed for y1 and y2, one could
describe a curve that overshoots and/or undershoots then returns to
the final destination. A simple example would be P1 = (0, 0); P2 = (1,
7/3) where it reaches 100% out at 50% time then overshoots and returns
to 100% out at 100% time.

The [0, 1] constraints for x1 and x2 would still need to remain to
make sure there's no going backwards in time -- repeated input%; but
there wouldn't be any problems of a repeated output%. Some values
would need to be capped at a max/min, but things like length are fine.

So the bézier curve is described by..
[ x ] = [ x1 * 3t(1-t)^2 + x2 * 3(1-t)t^2 + t^3 ], t = 0..1
[ y ]   [ y1 * 3t(1-t)^2 + y2 * 3(1-t)t^2 + t^3 ]

Removing the [0, 1] constraint for y1 and y2 won't change the fact
that the start and end will always be 0 and 1 respectively. Keeping
them for x1 and x2 retains the monotonically increasing curve from 0
to 1.

Ed

Received on Friday, 15 May 2009 06:27:17 UTC