javascriptcss-transitionsbeziercubic

Opposite of ease cubic-bezier function

I have the ease cubic-bezier function: cubic-bezier(.25,.1,.25,1) (http://cubic-bezier.com/#.25,.1,.25,1)

I want the opposite of this. Here is graphic representation of what I'm trying to accomplish:

The graph on left is what I have, and the function for the graph on the right is what I'm trying to achieve.

Image

Solution

  • If you want to do a rotation as in your updated answer, all we have to do is... well, that. Rotate around (0.5,0.5) by a 180 degree, or π radians, angle. Let's assume we have a curve encoded as an array c with four point objects { x:..., y... }, then we can effect this rotation as:

    c = [ {x:...,y:...}, ..., ..., ...];

function halfUnitTurn(v) {
  // Note: it's actually 0.5 + ((v.x-0.5)*cos(pi) - (v.x-0.5)*sin(pi)),
  // (and x*sin + y*cos for the y:... part) but: cos(pi) is just -1, and
  // sin(pi) is 0, so things REALLY simplify!
  return {
    x: 0.5 - (v.x-0.5),
    y: 0.5 - (v.y-0.5)
  };
}

var rotated = c.map(function(p) { return halfUnitTurn(p); });

    And as demonstrator code: http://jsfiddle.net/mokg77fq/