Chuyển đổi hoạt ảnh CSS3 thành JavaScript thuần túy

Question

Tôi muốn chuyển đổi một hình động CSS3 đơn giản thành JavaScript thuần túy (không phải trong jQuery, vì tôi nghĩ quá tải để tải toàn bộ thư viện cho một thứ đơn giản như vậy).

Đó là về hoạt ảnh bounceInUp từ http://daneden.me/animate/. bản demo mẫu: 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); 
    } 
} 

Tại http://javascript.info/tutorial/animation, có một hướng dẫn về làm thế nào để làm hình ảnh động với JavaScript. Nhưng tôi không giỏi toán học, vì vậy tôi làm một đồ thị trong Photoshop để hiển thị như thế nào hình ảnh động nên chạy trong JavaScript (ước tính):

_{(Đồ thị vẽ cho khác 'đồng bằng châu thổ' có thể được tìm thấy here)}

Có thể tạo công thức toán học từ biểu đồ này bằng JavaScript thuần túy trả về "delta" của hoạt ảnh không?

Tôi đã thử một số thứ với bounce function, nhưng nó không thực sự hiệu quả. (http://jsfiddle.net/ELDf7/2/)

Edit: tôi quản lý để thực hiện một công thức tốt toán học:

_{-Math.cos (2 * Math.PI * tiến bộ) + Math.pow (tiến bộ , 1) * ((1,5 + 1) * tiến độ - 1,5);}

Nhưng giờ tôi gặp sự cố khác, hoạt ảnh bắt đầu bằng một nửa hình ảnh hiển thị và không phải toàn bộ hình ảnh bị ẩn, giống như hình ảnh xuất hiện như hình động CSS3.

Đối với một bản demo trực tiếp của hoạt Javascript, xem tại đây: http://jsfiddle.net/ELDf7/14/

Có ai biết làm thế nào tôi có thể thay đổi nó để hình ảnh là hoàn toàn ẩn ban đầu? Có thể tạo một biến chứa chiều cao của hình ảnh và sau đó JavaScript thực hiện phép tính sao cho hoạt ảnh không bắt đầu cho đến khi một nửa hình ảnh xuất hiện.

Answer 1

Xem nếu điều này updated demo là một bước đi đúng hướng.

Cosine sóng

Công thức toán học cần thiết để được refactored một chút.Toán học để từng bước mở rộng quy mô sóng cosin xuống 0 là không hoàn toàn làm việc:

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

giá trị mẫu cho công thức và cho bottom, như progress đi 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 

bắt đầu() function

Tôi đã thêm một chức năng start(), được sử dụng khi trang tải lần đầu và khi hình ảnh được nhấp. Hàm này kiểm tra biến toàn cầu để đảm bảo hoạt ảnh chưa chạy, trước khi bắt đầu một hoạt ảnh. Biến toàn cục được đặt lại khi hoạt ảnh kết thúc. Thay vào đó, hoạt ảnh hiện tại có thể bị hủy và hoạt ảnh mới bắt đầu. Nhưng nó cần phải là một hoặc khác, để tránh có nhiều hình ảnh động chạy cùng một lúc, trông xấu trực quan.

<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

Với mã của bạn, nó chỉ là một sự thay đổi nhỏ: (http://jsfiddle.net/ELDf7/17/)

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

Hope đây là những gì bạn có nghĩa là.