创造简单的功能40％的折扣设置 [英] Create easy function 40% off set

问题描述

我有动画跟随这个计时功能：cubic-bezier（0.25,0.1,0.25,1.0）

我想修改这个功能所以我得到了结局40％。为了简单起见，我只想说我希望结束50％的功能。我怎么能这样做。

图形上就是这样：
（我们需要评估两次。一次是我们的x值，一次是我们的y值）。我们对P2，P3和P4做同样的事情（尽管我们的第四点当然仍然是相同的，所以我们不需要打扰。它是（1,1）并且是分裂后仍然（1,1）。

所以，让我们在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]] ; 
返回{left：left，right：right}; 
} 
  

完成交易。这个函数将给我们两个子曲线（称为左和右，x1 / y1 /中的Number [8]数组x2 / y2 / ...排序）在数学上完全相同如果一起使用，除了建模为两个新的 t = [0,1] 区间，对于任何分裂点 t = z ，z在0和1之间。我们的工作永远完成。

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.

解决方案

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:

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.

这篇关于创造简单的功能40％的折扣设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！