Question

我有一个像这样的for循环：

var speed = 100; 
var curve = [];

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

所以对于它的最后一个循环400，问题是我如何在for循环中实现轻松进出？大致到底结果应该是这样的？ [0,52,200,348,400]

编辑：

var defaultSpin = 24;
var totalSlices = 12;

for (var i = 0; i < defaultSpin; i++) {
            highlight(divs[i%totalSlices], i*100, 100);
    }

function highlight(el, delay, duration) {
    setTimeout(function() {
        el.className += ' active';
        setTimeout(function() {
            el.className = 'pie';
        }, duration)
    }, delay)
}

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

Answer 1

此处显示了许多常见的缓动功能：

http://gizma.com/easing/

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

// 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]

Answer 2

嘿记下这个片段

{
  "addons": [
    {
      "plan": "heroku-postgresql",
      "options": {
        "version": "9.5"
      }
    }
  ]
}

这是Raphael的摘录。在这里，您可以看到动画缓动公式的列表。

让我们尝试其中一个，例如易于在

＆＃13;

/*\
 * 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;

＆＃13;

这可能与您预期的输出不同步。但这些是Rapahel使用的着名JS SVG库的公式。你会喜欢这个demo

在for循环中缓入和缩小曲线

2 个答案: