क्या सीएसएस संक्रमण के लिए कस्टम टाइमिंग फ़ंक्शन निर्दिष्ट करना संभव है?

Question

मैं अक्सर सीएसएस संक्रमण का उपयोग करता हूं लेकिन इसे आसानी से आसानी से एक्सेस करने के लिए सीमित करता हूं, आसानी से बाहर इत्यादि। बेजियर-वक्र विकल्प सबसे अधिक नियंत्रण की अनुमति देता है लेकिन यहां तक ​​कि यह आपको वास्तविक easing निर्दिष्ट करने की अनुमति नहीं देता है समीकरण जो लोचदार easing आदि अनुकरण करेगा .. क्या कोई और विकल्प है या किसी को इस प्रकार की एनीमेशन करने के लिए जावास्क्रिप्ट का सहारा लेने की आवश्यकता है?

Answer 1

मुझे पता चला कि शुद्ध सीएसएस के साथ लोचदार संक्रमण करने का कोई तरीका नहीं है। हालांकि आप सीएसएस एनीमेशन धोखा दे सकते हैं और कर सकते हैं।

@-webkit-keyframes open-1 { 
    from { opacity:0; -webkit-transform:translate3d(210px, -145px, 0); } 
    25% { opacity:1; -webkit-transform:translate3d(-15.6px, 4.1px, 0); } 
    30% { opacity:1; -webkit-transform:translate3d(-10.3px, 2.7px, 0); } 
    35% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    40% { opacity:1; -webkit-transform:translate3d(4.5px, -1.2px, 0); } 
    45% { opacity:1; -webkit-transform:translate3d(2.9px, -0.8px, 0); } 
    50% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    55% { opacity:1; -webkit-transform:translate3d(-1.3px, 0.3px, 0); } 
    60% { opacity:1; -webkit-transform:translate3d(-0.8px, 0.2px, 0); } 
    65% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    70% { opacity:1; -webkit-transform:translate3d(0.4px, -0.1px, 0); } 
    75% { opacity:1; -webkit-transform:translate3d(0.2px, -0.1px, 0); } 
    80% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    85% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    90% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
} 

इन एनिमेशन एप्पल के स्वयं की वेबसाइट पर काफी हद तक इस्तेमाल कर रहे हैं: यह वही है सेब अपनी साइट पर उपयोग करता है http://www.apple.com/mac/

जाहिर है इस में कुछ हद तक शक्तिशाली है - के बाद से एनिमेशन प्रतिशत हैं आप कर सकते हैं आसानी से वह अवधि बदलते हैं और प्रभाव बरकरार रखते हैं।

हालांकि, यह अभी भी बहुत स्थिर है। मान लीजिए कि आप एक बटन पर क्लिक करना चाहते हैं और इसे लोचदार स्केलिंग एनीमेशन करना है। कोई समस्या नहीं, प्रत्येक एनीमेशन के लिए एक एनीमेशन का इस्तेमाल बार-बार किया जा सकता है। लेकिन मान लीजिए कि आप एक तत्व को अपनी स्थिति को बड़े पैमाने पर स्नैप करना चाहते हैं जहां उपयोगकर्ता ने हाल ही में स्क्रीन पर क्लिक किया या टैप किया हो। वैसे इस मामले में आपको गतिशील रूप से कीफ्रेम को फिर से गणना करने की आवश्यकता होगी और उसके बाद तत्व को एनीमेशन लागू करना होगा।

इस लेखन के समय मुझे नहीं पता कि जावास्क्रिप्ट के अंदर फ्लाई पर गतिशील रूप से सीएसएस एनिमेशन उत्पन्न करने के कोई अच्छे उदाहरण हैं। वास्तव में यह शायद एक और सवाल वारंट करता है। यह सब एकमात्र शुद्ध सीएसएस तरीका है जिसे मैंने जटिल जटिल समीकरण प्रदान किया है जैसे कि सीएसएस के साथ पूरी तरह से लोचदार easing।

Answer 2

आप विभिन्न समीकरणों के लिए सीएसएस उत्पन्न करने के लिए Caesar का उपयोग कर सकते हैं।

Answer 3

मुझे पता है कि आप mootools उपयोग कर रहे हैं आप अपने खुद के समीकरण लिख सकते हैं:

http://mootools.net/docs/core/Fx/Fx.Transitions

कक्षा: Fx.Transition

इस वर्ग के गणित के लिए ही उपयोगी है जीनियस जो अपने समीकरण समीकरण लिखना चाहते हैं। 'EasyIn', 'easeOut', और 'easeInOut' विधियों के साथ एक Fx संक्रमण फ़ंक्शन देता है।

शायद अन्य पुस्तकालयों जैसे jquery या प्रोटोटाइप के समान वर्ग हैं, शायद उनके पास कुछ समान है।

शुभकामनाएं!

Answer 4

दरअसल आपको जटिल आसानी से काम करने के लिए जावास्क्रिप्ट लाइब्रेरी की आवश्यकता नहीं है जैसे उछाल-आसानी-या लोचदार-आसानी से बाहर। यहाँ CSS3 के एनीमेशन जेनरेटर उपकरण जो आपके लिए मुख्य-फ़्रेम उत्पन्न करता है, और W3C कल्पना द्वारा समर्थित नहीं 12 अतिरिक्त सहजता कार्यों सक्षम बनाता है:

http://www.css3animationgenerator.com/