Konwersja animacji CSS3 na czysty JavaScript

Question

Chcę przekonwertować prostą animację CSS3 na czysty JavaScript (nie w jQuery, ponieważ moim zdaniem przesadą jest załadowanie całej biblioteki na tak prostą rzecz).

Chodzi o animację bounceInUp z http://daneden.me/animate/. demo próbki: 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); 
    } 
} 

Na http://javascript.info/tutorial/animation, jest to poradnik o tym, jak zrobić animacje z JavaScript. Ale nie jestem bardzo dobry w matematyce, więc zrobiłem wykres w Photoshopie, aby pokazać, w jaki sposób należy uruchomić animację w JavaScript (w przybliżeniu):

_{(wykres plotera dla innych „delty” puszka zostanie znalezione: here)}

Czy możliwe jest wykonanie wzoru matematycznego z tego wykresu w czystym JavaScript, który zwraca "deltę" animacji?

Próbowałem niektórych rzeczy z bounce function, ale tak naprawdę nie działa. (http://jsfiddle.net/ELDf7/2/)

Edit: udało mi się zrobić dobry wzór matematyczny:

_{-Math.cos (2 * Math.PI * toku) + Math.pow (PROGRESS , 1) * ((1,5 + 1) * postęp - 1,5);}

Ale teraz mam inny problem, animacja zaczyna się od połowy obrazu, a nie z całego obrazu ukrytego, jak wygląda jak animacja CSS3.

Na żywo demo animacji JavaScript, zobacz tutaj: http://jsfiddle.net/ELDf7/14/

Czy ktoś wie jak mogę ją zmienić tak, że obraz jest całkowicie ukryty początkowo? Być może możliwe jest utworzenie zmiennej, która zawiera wysokość obrazu, a następnie JavaScript wykonuje obliczenia, aby animacja nie rozpoczęła się, dopóki nie pojawi się połowa obrazu.

Answer 1

Sprawdź, czy ten updated demo jest krokiem we właściwym kierunku.

cosinus fali

Wzór matematyczny potrzebne do refactored trochę.Matematyka dla stopniowo skalowania cosinus fali w dół do 0 nie było dość pracy:

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

Przykładowe wartości do wzoru i dla bottom, jak progress idzie od 0 do 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 

początek() funkcja

Dodałem funkcję start(), która jest używana, gdy strona ładuje się po raz pierwszy i po kliknięciu obrazu. Ta funkcja sprawdza zmienną globalną, aby upewnić się, że animacja nie jest jeszcze uruchomiona przed rozpoczęciem animacji. Zmienna globalna jest resetowana po zakończeniu animacji. Alternatywnie, bieżącą animację można anulować i rozpocząć nową. Ale musi to być jedno lub drugie, aby uniknąć jednoczesnego uruchamiania wielu animacji, które wyglądają źle.

<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(); 
}; 

Answer 2

Biorąc swój kod, to była tylko mała zmiana: (http://jsfiddle.net/ELDf7/17/)

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

nadzieję, że to, co masz na myśli.