CSS3 एनीमेशन को शुद्ध जावास्क्रिप्ट में कनवर्ट करें

Question

मैं एक साधारण CSS3 एनीमेशन को शुद्ध जावास्क्रिप्ट में परिवर्तित करना चाहता हूं (jQuery में नहीं, क्योंकि मुझे लगता है कि यह इतनी सरल चीज़ के लिए पूरी लाइब्रेरी लोड करने के लिए ओवरकिल है)।

यह से एनीमेशन bounceInUp के बारे में है। नमूना डेमो: 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 पर, वहाँ कैसे जावास्क्रिप्ट के साथ एनिमेशन करने के बारे में एक ट्यूटोरियल है। लेकिन मैं गणित में बहुत अच्छा नहीं कर रहा हूँ, इसलिए मैं यह दिखाने के लिए कि कैसे एनीमेशन जावास्क्रिप्ट में चलाना चाहिए (लगभग) फ़ोटोशॉप में एक ग्राफ बनाया: अन्य 'डेल्टा' के लिए

_{(ग्राफ प्लॉटर कर सकते हैं here)}

क्या इस ग्राफ से शुद्ध जावास्क्रिप्ट में गणितीय सूत्र बनाना संभव है जो एनीमेशन के "डेल्टा" को लौटाता है?

मैंने bounce function के साथ कुछ चीजों की कोशिश की है, लेकिन यह वास्तव में काम नहीं करता था। (http://jsfiddle.net/ELDf7/2/)

संपादित करें:

_{-Math.cos (2 * Math.PI * प्रगति) + Math.pow (प्रगति:} मैं एक अच्छा गणितीय सूत्र बनाने में कामयाब , 1) * ((1.5 + 1) * प्रगति - 1.5);

लेकिन अब मुझे एक और समस्या है, एनीमेशन छवि के आधे भाग से शुरू होता है, और पूरी छवि छिपी हुई नहीं है, जैसे यह CSS3 एनीमेशन की तरह दिखाई देता है।

जावास्क्रिप्ट एनीमेशन के एक लाइव डेमो के लिए, यहाँ देखें: http://jsfiddle.net/ELDf7/14/

किसी को भी पता है मैं इसे कैसे ताकि छवि पूरी तरह से शुरू में छिपा हुआ है बदल सकता हूँ? हो सकता है कि एक वैरिएबल बनाना संभव हो जिसमें छवि की ऊंचाई हो और फिर जावास्क्रिप्ट एक गणना करता है ताकि एनीमेशन तब तक शुरू नहीं हो जाता जब तक छवि का आधा भाग प्रकट न हो जाए।

Answer 1

देखें कि यह updated demo सही दिशा में एक कदम है या नहीं।

कोसाइन लहर

गणितीय सूत्र एक छोटे से पुनर्संशोधित की जरूरत है।के रूप में progress 0 से 1 तक से चला जाता है, सूत्र के लिए और bottom के लिए

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

मानों का नमूना:

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 

शुरुआत धीरे-धीरे कोज्या लहर 0 करने के लिए नीचे स्केलिंग के लिए गणित काफी काम कर रहा था() फ़ंक्शन

मैंने 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(); 
}; 

Answer 2

अपने कोड को देखते हुए, यह सिर्फ एक छोटा सा परिवर्तन किया गया था: (http://jsfiddle.net/ELDf7/17/)

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

आशा यह आप क्या मतलब है।