Javascript 缓进和缓出“曲线进”for循环

我有这样一个for循环：

var speed = 100; 
var curve = [];

for (var i = 0; i < 5; i++) {
        curve.push(i*speed);
}

var速度=100；
var曲线=[]；
对于（变量i=0；i<5；i++）{
曲线推力（i*速度）；
}

因此，对于最后一个循环ITS400，问题是如何在for循环中实现易入易出？大概到最后结果应该是这样的？[0,52200348400]

编辑：

var defaultSpin=24；
var totalSlices=12；
对于（var i=0；i

---

它是一个带有高光的旋转轮，而不是实际旋转它。我用循环调用上面的函数。现在它只有恒定的速度，因为每个环路的差值只有100，所以第一个强光延迟为0，它立即启动。第二个是100，第三个是200，以此类推。

这里显示了许多常见的缓解功能：

下面是一个如何使用的示例：

// from http://gizma.com/easing/
var easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

var steps = 4
var speed = 100
var curve = []
for (var i = 0; i < steps+1; i++) {
  var stepValue = easeInOutQuad(i, 0, speed*steps, steps);
  curve.push(stepValue);
}

console.log(curve); // [0, 50, 200, 350, 400]

//来自http://gizma.com/easing/
var easeInOutQuad=函数（t，b，c，d）{
t/=d/2；
如果（t<1）返回c/2*t*t+b；
t--；
返回-c/2*（t*（t-2）-1）+b；
};
var步骤=4
无功转速=100
var曲线=[]
对于（变量i=0；i

他们记下这个片段

/*\
 * Raphael.easing_formulas
 [ property ]
 **
 * Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
 # <ul>
 #     <li>“linear”</li>
 #     <li>“&lt;” or “easeIn” or “ease-in”</li>
 #     <li>“>” or “easeOut” or “ease-out”</li>
 #     <li>“&lt;>” or “easeInOut” or “ease-in-out”</li>
 #     <li>“backIn” or “back-in”</li>
 #     <li>“backOut” or “back-out”</li>
 #     <li>“elastic”</li>
 #     <li>“bounce”</li>
 # </ul>
 # <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
\*/
var ef = R.easing_formulas = {
    linear: function (n) {
        return n;
    },
    "<": function (n) {
        return pow(n, 1.7);
    },
    ">": function (n) {
        return pow(n, .48);
    },
    "<>": function (n) {
        var q = .48 - n / 1.04,
            Q = math.sqrt(.1734 + q * q),
            x = Q - q,
            X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
            y = -Q - q,
            Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
            t = X + Y + .5;
        return (1 - t) * 3 * t * t + t * t * t;
    },
    backIn: function (n) {
        var s = 1.70158;
        return n * n * ((s + 1) * n - s);
    },
    backOut: function (n) {
        n = n - 1;
        var s = 1.70158;
        return n * n * ((s + 1) * n + s) + 1;
    },
    elastic: function (n) {
        if (n == !!n) {
            return n;
        }
        return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
    },
    bounce: function (n) {
        var s = 7.5625,
            p = 2.75,
            l;
        if (n < (1 / p)) {
            l = s * n * n;
        } else {
            if (n < (2 / p)) {
                n -= (1.5 / p);
                l = s * n * n + .75;
            } else {
                if (n < (2.5 / p)) {
                    n -= (2.25 / p);
                    l = s * n * n + .9375;
                } else {
                    n -= (2.625 / p);
                    l = s * n * n + .984375;
                }
            }
        }
        return l;
    }
};
ef.easeIn = ef["ease-in"] = ef["<"];
ef.easeOut = ef["ease-out"] = ef[">"];
ef.easeInOut = ef["ease-in-out"] = ef["<>"];
ef["back-in"] = ef.backIn;
ef["back-out"] = ef.backOut;

/*\
*拉斐尔·拉斐尔公式
[物业]
**
*对象，该对象包含动画的缓和公式。你可以用你自己的扩展它。默认情况下，它具有以下缓和列表：
#

#
“线性”
#
”或“easeIn”或“easeIn”
#
“>”或“放松”或“放松”
#
“>”或“easeInOut”或“easeInOut”
#
“后退”或“后退”
#
“退出”或“退出”
#
“弹性”
#
“反弹”
#
#另见

\*/
var ef=R.u公式={
线性：函数（n）{
返回n；
},
“”：函数（n）{
返回功率（n.48）；
},
“”：函数（n）{
var q=.48-n/1.04，
Q=数学sqrt（.1734+Q*Q），
x=Q-Q，
X=功率（绝对值X，1/3）*（X<0？-1:1），
y=-Q-Q，
Y=功率（绝对值（Y），1/3）*（Y<0？-1:1），
t=X+Y+0.5；
返回（1-t）*3*t*t+t*t*t；
},
后退：函数（n）{
var s=1.70158；
返回n*n*（（s+1）*n-s）；
},
回退：函数（n）{
n=n-1；
var s=1.70158；
返回n*n*（（s+1）*n+s）+1；
},
弹性：函数（n）{
如果（n==！！n）{
返回n；
}
返回功率（2，-10*n）*数学sin（（n-.075）*（2*PI）/.3）+1；
},
反弹：函数（n）{
var s=7.5625，
p=2.75，
L
如果（n<（1/p））{
l=s*n*n；
}否则{
如果（n<（2/p））{
n-=（1.5/p）；
l=s*n*n+0.75；
}否则{
如果（n<（2.5/p））{
n-=（2.25/p）；
l=s*n*n+0.9375；
}否则{
n-=（2.625/p）；
l=s*n*n+984375；
}
}
}
返回l；
}
};
ef.easeIn=ef[“easeIn”]=ef[“”]；
ef.easeInOut=ef[“ease-in-out”]=ef[“”]；
ef[“返回”]=ef.backIn；
ef[“回退”]=ef.回退；

这是来自的一个片段。在这里，您可以看到一个动画易用公式列表

让我们试试其中的一种，例如放松

var-pow=Math.pow；
函数easeIn（n）{
返回功率（n，1.7）；
}
功能输出（n）{
返回功率（n.48）；
}
函数过程（最小值、最大值、间隔值、fN）{
var diff=1/间隔，
差值=最大值-最小值，
曲线=[]；
for（i=diff；i）你所说的for循环中的易入易出是什么意思？呃…真的很难描述。我想它被称为立方贝塞尔？如果你可以用jQuery实现这一点…那么，你想要一个点为（0,0），（0.42,0），（0.58,1），（1,1）的立方贝塞尔，就像在？@Oriol中不是只有四个点。实际上，循环可以更复杂…使用上面的函数给我的函数带来了完全相反的效果
/*\
 * Raphael.easing_formulas
 [ property ]
 **
 * Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
 # <ul>
 #     <li>“linear”</li>
 #     <li>“&lt;” or “easeIn” or “ease-in”</li>
 #     <li>“>” or “easeOut” or “ease-out”</li>
 #     <li>“&lt;>” or “easeInOut” or “ease-in-out”</li>
 #     <li>“backIn” or “back-in”</li>
 #     <li>“backOut” or “back-out”</li>
 #     <li>“elastic”</li>
 #     <li>“bounce”</li>
 # </ul>
 # <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
\*/
var ef = R.easing_formulas = {
    linear: function (n) {
        return n;
    },
    "<": function (n) {
        return pow(n, 1.7);
    },
    ">": function (n) {
        return pow(n, .48);
    },
    "<>": function (n) {
        var q = .48 - n / 1.04,
            Q = math.sqrt(.1734 + q * q),
            x = Q - q,
            X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
            y = -Q - q,
            Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
            t = X + Y + .5;
        return (1 - t) * 3 * t * t + t * t * t;
    },
    backIn: function (n) {
        var s = 1.70158;
        return n * n * ((s + 1) * n - s);
    },
    backOut: function (n) {
        n = n - 1;
        var s = 1.70158;
        return n * n * ((s + 1) * n + s) + 1;
    },
    elastic: function (n) {
        if (n == !!n) {
            return n;
        }
        return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
    },
    bounce: function (n) {
        var s = 7.5625,
            p = 2.75,
            l;
        if (n < (1 / p)) {
            l = s * n * n;
        } else {
            if (n < (2 / p)) {
                n -= (1.5 / p);
                l = s * n * n + .75;
            } else {
                if (n < (2.5 / p)) {
                    n -= (2.25 / p);
                    l = s * n * n + .9375;
                } else {
                    n -= (2.625 / p);
                    l = s * n * n + .984375;
                }
            }
        }
        return l;
    }
};
ef.easeIn = ef["ease-in"] = ef["<"];
ef.easeOut = ef["ease-out"] = ef[">"];
ef.easeInOut = ef["ease-in-out"] = ef["<>"];
ef["back-in"] = ef.backIn;
ef["back-out"] = ef.backOut;