0

I have animation follows this timing function: cubic-bezier(0.25, 0.1, 0.25, 1.0)

I want to mod this function so i just get the ending 40% of it. To make things easy lets just say I want the end 50% of the function. How can I do this.

So graphically this is what it is: https://developer.mozilla.org/files/3429/cubic-bezier,ease.png

and I want to to make a cubic-bezier with parameters such that graphically we only see the top portion, so what we see from 0.5 to 1 (on the yaxist) porition of this graph, i want to make that same line but from 0 to 1.

Please help me how to make this function.

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • Maybe a bezier like this one: cubic-bezier(0.24,0.55,0.33,0.96) ? – R. Schifini May 04 '14 at 02:10
  • Thanks @R.Schifini for fast reply. I plugged it in hree: http://cubic-bezier.com/#.24,.55,.33,.96 and it looks rightish but I'm not 100% sure, can you please show me how to do that calculation, this will help me because when I need to do other percentages, like 40% etc. – Noitidart May 04 '14 at 02:15

1 Answers1

3

If you want only a section of a cubic curve, with t from 0 to 1, there are "simple" formulae to determine what the new coordinates need to be. I say simple because it's pretty straight forward to implement, but if you also want to know why the implementation actually works, that generally requires diving into maths, and some people consider that scary.

(The end result of the section on matrix splitting pretty much gives you the new coordinates for an arbitrary split-point without needing to read the explanation of why that works)

Let's take your example curve: first, we need to figure out what the curve's original coordinates are. We go with a guess of (0,0)-(0.4,0.25)-(0.2,1)-(1,1). We then want to split that curve up at t=0.4, so we ignore all of section 7 except for the final bit that tells us how to derive new coordinates. For any splitting point t=z (where z is somewhere between 0 and 1` we'll have two new sets of coordinates. One for the curve "before" the splitting point, and one for "after" the splitting point. We want the latter, so we pick:

coordinate derivation for the post-split curve

So we just plug in 0.4 for z and off we go. Our new first point is 0.064 * P4 - 3 * 0.096 * P3 + 3 * 0.144 * P2 + 0.216 * P1 = 0.2944 (which we need to evaluate twice. Once for our x values, and one for our y values). We do the same for P2, P3 and P4 (although our fourth point is of course still the same so we don't need to bother. It was (1,1) and is still (1,1) after the split).

So, let's implement that in javascript:

function split(options) {

  var z = options.z,
      cz = z-1,
      z2 = z*z,
      cz2 = cz*cz,
      z3 = z2*z,
      cz3 = cz2*cz,
      x = options.x,
      y = options.y;

  var left = [
    x[0],
    y[0],
    z*x[1] - cz*x[0], 
    z*y[1] - cz*y[0], 
    z2*x[2] - 2*z*cz*x[1] + cz2*x[0],
    z2*y[2] - 2*z*cz*y[1] + cz2*y[0],
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0]];

  var right = [
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0],
                    z2*x[3] - 2*z*cz*x[2] + cz2*x[1],
                    z2*y[3] - 2*z*cz*y[2] + cz2*y[1],
                                    z*x[3] - cz*x[2], 
                                    z*y[3] - cz*y[2], 
                                                x[3],
                                                y[3]];
  return { left: left, right: right};
}

Done deal. This function will give us two subcurves (called left and right, both Number[8] arrays in x1/y1/x2/y2/... ordering) that are mathematically identical to our original curve if taken together, except modeled as two new t=[0,1] intervals, for any splitting point t=z with z between 0 and 1. Our work is done forever.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • I looked at the articles and I'm confused. Can you please show me how to implement with javascript :( – Noitidart May 04 '14 at 04:41
  • I figured out my other issue, but Im still stuck on this :( Can you please show me how to get implement to get the 4 points if I want ease slice from say .4 and onwards – Noitidart May 04 '14 at 05:58
  • 1
    I've update the answer to help you out on this one, but hopefully you're going to take away how to turn a matrix computation into JavaScript. – Mike 'Pomax' Kamermans May 04 '14 at 19:23
  • Thank you! I didn't test but your effort is so appreciated! I'll test and get back to you within a day or few please! :) – Noitidart May 04 '14 at 20:46
  • Hey Mike it didn't work out quite right. I can't put the detail in comment box its too small ill post in solution below but its not a solution i need your help plz – Noitidart May 05 '14 at 02:46
  • I just verified the code in http://jsfiddle.net/DfpLk/2/ and it works exactly as advertised. The split function creates two new bezier curves, both running from `t=[0,1]`, with the "left" curve covering the original curve from original `t=[0,0.4]` and the "right" curve covering the original curve from `t=[0.4,1]`. – Mike 'Pomax' Kamermans May 05 '14 at 04:59
  • Ah yeah I think it works correclty I just compared it to another method I found last night here: http://stackoverflow.com/questions/3958257/how-to-calculate-control-points-on-a-bezier-curve but could you please help me figure out how ease-in is half of ease-in-out, thats the thing i'm going for please. i think it has to do with extrapolation of the left curve to 1,1 – Noitidart May 05 '14 at 05:28
  • don't overload questions on SO - if your original question was answered, and you have a new one because of that, ask a new question instead and mention what it's based on (I strongly recommend removing that "answer" you posted, and posting it as new question, for instance, because it's not an answer to your original question at all) – Mike 'Pomax' Kamermans May 05 '14 at 14:39
  • Ok thanks man. My original wasn't fully answered as my issue is to get the first half extrapolated to `1,1` ill split to another topic right now. Thx man – Noitidart May 05 '14 at 14:44