應用三次貝塞爾曲線功能為屬性更改設置動畫

Question

我正在Javascript中嘗試使用三次貝塞爾曲線計時功能對各種元素進行動畫處理。

（我知道通常最好使用CSS3或Javascript動畫庫來完成。我只是在這里使用Javascript來了解bezier函數的工作原理，並向他們自我介紹。）

因此，我得到了基本概念，並使用了由Stephen McKamey編寫的簡單貝塞爾曲線庫，這是Webkit實現的一個很棒的Javascript端口。

我無法理解如何實際使用此功能來控制Javascript中的動畫。 因此，從一個非常簡單的東西開始：一個基本的黑色正方形，我可以通過將其向右移動，通過增加其style.left屬性來進行動畫style.left ：

CSS：

.parent {
    position: relative;
}   

.foo {
    border: 1px solid #000000;
    background-color: black;
    height: 200px;
    width: 200px;
    position: absolute;
}

HTML：

<div class = "parent">
    <div class = "foo" id = "target"></div>
</div>

好的，給定三次貝塞爾函數“ bezier ”，定義如下：

   function bezier(p1x, p1y, p2x, p2y, x, duration) { ... }

其中p1x，p1y，p2x和p2y是曲線控制點（介於0和1.0之間）， x是x坐標的值， duration是毫秒數的持續時間。 該函數返回相應的y坐標。 我正在嘗試通過將其向右移動400px來簡單地動畫化此黑盒。

對於我的第一次嘗試，我用的是標准的“緩解”貝塞爾值，CSS3使用，所以我們ease貝塞爾函數可以寫成：

function ease(x, duration) {
    return function() {
        Bezier.cubicBezier(0.25, 0.1, 0.25, 1.0, x, duration);
    }
}

因此，這應該給我們一個緩慢的開始，然后快速移動，然后緩慢結束。

好的，所以我假設實現此目的的基本方法是使用window.setInterval ，然后對於每個間隔，使用x的新值調用bezier函數，然后將結果以某種方式應用於我們要設置動畫的屬性。

問題是，我不確定這里的“ x”值是多少。 我假設在這種情況下，x實際上是時間 ， y是舊位置和新位置之間的增量（移動距離），但是我不確定。 我可能是錯的。

無論如何，將其全部插入，我將編寫一個類似以下的函數：

var startPos = 0;
var endPos = 400; // pixels
var duration = 400; // milliseconds
var millisecondsPerInterval = 10;

var target = document.getElementById("target");
var t = 0;
var pos = 0;

var bezierFunction = Bezier.cubicBezier;

var interval = window.setInterval(
    function() {
        pos = pos + bezierFunction(0.25, 0.1, 0.25, 1.0, t / 1000, duration); // "ease" values
        target.style.left = (pos * millisecondsPerInterval) + "px";
        t += millisecondsPerInterval;
        if (t === duration) { window.clearInterval(interval); }
    },
    millisecondsPerInterval
);

這似乎可行-盒子開始緩慢移動，然后加速。 但是然后它只是突然停止，而不是放松。 因此，我可能無法正確應用此功能。 我什至不確定“ x ”是否應該是我的時間值，而“ y ”應該是位置增量（移動距離），但這似乎是唯一可行的方法。

那么，我在這里做錯了嗎？ 將立方貝塞爾函數應用於要使用Java動畫制作的屬性的正確方法是什么？

Answer 1

如果使用JQuery，則可以使過程更簡單。

基於對類似問題的答案（ https://stackoverflow.com/a/6824695/363099 ），您可以擴展jQuery緩動以添加自定義緩動功能：

根據jQuery 1.6.2的源代碼，緩動函數的含義如下。 在動畫期間的各個時間點調用該函數。 在瞬間被稱為

• x和t都說相對於動畫開始的現在時間。 x表示為[0,1]范圍內的浮點數，其中0是開始，1是結束。 t表示自動畫開始以來的毫秒數。

• d是動畫調用中指定的動畫持續時間，以毫秒為單位。

• b = 0，c = 1。

所以這是它對您的代碼的工作方式：

  $.extend(jQuery.easing,{bezier:   function(x,t,b,c,d) {

        return (
          x <= 0 ? 0 :
          x >= 1 ? 1 :
          bezierFunction(0.25, 0.1, 0.25, 1.0, x, d)
            );   
     } });

然后就可以使用JQuery動畫功能：

$('#target').animate({right:'400px'},400,'bezier');