將CSS3動畫轉換爲純JavaScript

我想將一個簡單的CSS3動畫轉換爲純JavaScript（不是在jQuery中，因爲我認爲將這個簡單的東西加載到整個庫是矯枉過正）。將CSS3動畫轉換爲純JavaScript

這是關於動畫bounceInUp從http://daneden.me/animate/。示例演示：http://jsfiddle.net/ELDf7/

@keyframes bounceInUp { 
    0% { 
     opacity: 0; 
     transform: translateY(2000px); 
    } 

    60% { 
     opacity: 1; 
     transform: translateY(-30px); 
    } 

    80% { 
     transform: translateY(10px); 
    } 

    100% { 
     transform: translateY(0); 
    } 
}

在http://javascript.info/tutorial/animation，有一個關於如何用JavaScript做動畫教程。但我不是在數學非常好，所以我提出在PhotoShop圖形來展示如何動畫應該在JavaScript中運行（大約）：

Plot

_{（圖表繪圖儀等「增量」可以被發現here）}

是否有可能在這個純粹JavaScript的圖表中創建一個返回動態「delta」的數學公式？

我試了一些bounce function，但它並沒有真正的工作。（http://jsfiddle.net/ELDf7/2/）

編輯： 我設法讓一個很好的數學公式：

Plot 2

_{-Math.cos（2 * Math.PI *進度）+ Math.pow（進度，1）*（（1.5 + 1）*進度 - 1.5）;}

但是現在我又遇到了另一個問題，動畫以圖片的一半顯示開始，而不是隱藏整個圖片，就像CSS3動畫一樣。

對於JavaScript動畫的現場演示，在這裏看到：http://jsfiddle.net/ELDf7/14/

有誰知道我可以改變它，使圖像完全隱藏最初？也許可以創建一個包含圖像高度的變量，然後JavaScript進行計算，以便動畫在圖像的一半出現之前不會啓動。

來源

2013-04-06 user1480019

jQuery將爲您提供事件和定時器，以及一個動畫方法，這使得這非常容易。否則，你將不得不自己設置WindowTimeout，並進行這些計算。坦率地說，當jQueryUI有一些非常適合的東西時，自己實現它可能很愚蠢。 http://docs.jquery.com/UI/Effects/Bounce 如果你真的想推出自己的，它可能有助於研究其來源。 – 2013-04-06 10:55:53

這不是[CSS3 transitions]（http://dev.w3.org/csswg/css-transitions/）;它是[CSS3動畫]（http://www.w3.org/TR/css3-animations/）。轉場使用'transition'速記屬性。動畫使用'動畫'速記屬性和'@ keyframes'。 – 2013-04-06 13:59:36

對於你的最後一個問題，只需將'progress + = 1;'''在'bounce'內部加入即可。 [見]（http://jsfiddle.net/ELDf7/5/） – searlea 2013-04-06 18:23:12

看看這個updated demo是朝着正確方向邁出的一步。

餘弦波

需要進行重構一點的數學公式。對於逐漸下降到0縮放餘弦波數學不太工作：

return -Math.cos(2.5 * Math.PI * progress) * Math.pow(0.33, progress * 2.5) * 3;

的公式和bottom採樣值，progress從0到1：

progress formula bottom 
-------- ------- ------- 
    0.0  -3.0  -150px 
    0.2   0.0   0px 
    0.4   1.0  50px 
    0.6   0.0   0px 
    0.8  -0.3  -17px 
    1.0   0.0   0px

啓動（）函數

我添加了一個start()函數，該函數在頁面第一次加載和單擊圖像時使用。該函數在啓動動畫之前檢查全局變量以確保動畫尚未運行。動畫結束時，全局變量將重置。或者，當前的動畫可以被取消，並開始新的動畫。但它必須是一個或另一個，以避免同時運行多個動畫，這在視覺上看起來很糟糕。

<div onclick="start()">...</div> 
... 
var isAnimationRunning = false; 
... 
function start(){ 
    if (isAnimationRunning) return; // Make sure an animation isn't already running 
    isAnimationRunning = true;  // Set the global variable 
    move(document.getElementById('frame'), bounce, 1200); 
} 
onload = function() { 
    start(); 
};

來源

2013-04-07 16:24:56

哇，謝謝！它現在工作完美！當進度爲1時，我已經修復了一個問題，底部是：'bottom：-0.000000000000002872847850556344px;'在if後面添加'document.getElementById（'frame'）。style.bottom =「0px」;' == 1）{'它是固定的。但是這個問題並不重要，因爲瀏覽器可能會將其讀爲「bottom：0px;'。 – user1480019 2013-04-07 16:57:46

鑑於你的代碼，它只是一個小的變化：（http://jsfiddle.net/ELDf7/17/）

step: function(delta) { 
    var animationHeight = to + element.scrollHeight 
    element.style.bottom = (animationHeight * delta) + "px";  
}

希望這是你的意思。

來源

2013-04-07 14:18:45 mrks

謝謝，但圖像不是'底部：[±50 px]（http://i.imgur.com/TLJtaJE.png）'，而是'底部：[±180 px]（http：// i。 imgur.com/6GUWx0Q.png）'圖像可能會變成'底部：±50 px'？ – user1480019 2013-04-07 14:40:54

將CSS3動畫轉換爲純JavaScript

回答

相關問題