2010-12-26 6 views
19

मैं एनीमेशन के लिए थोड़ा नया हूं, इसलिए मुझे माफ़ कर दो अगर मुझे यहां एक बड़ी अवधारणा याद आ रही है। मुझे एक तीर को एनिमेट करने की आवश्यकता है जो वक्र पर एक बिंदु पर इंगित कर रहा है, चलिए बस यह कहें कि यह इस पोस्ट के लिए एक क्यूबिक वक्र है। तीर वक्र की रेखा के साथ चलता है, हमेशा इसके नीचे कुछ पिक्सल इंगित करता है।क्या प्रत्येक कुंजीफ्रेम के बजाय संपूर्ण एनीमेशन पर लागू करने के लिए -webkit-animtion-timing-function का कोई तरीका है?

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
} 

}

हालांकि, जब मैं -webkit-एनीमेशन-समय-समारोह का उपयोग कर इस एनीमेशन चलाएँ:: आसानी

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

क्या कोई अलग तरीका है कि मुझे यह करना चाहिए? क्या प्रत्येक कीफ्रेम की बजाय पूरे अनुक्रम में आसानी लाने के लिए कुछ संपत्ति है?

उत्तर

13

आप कीफ्रेम की एक श्रृंखला पर एक आसान कार्य लागू नहीं कर सकते हैं क्योंकि आप विशेष रूप से किसी विशेष समय पर ऑब्जेक्ट को विशिष्ट बिंदु पर बता रहे हैं। यदि आपने कुंजीफ्रेम की एक श्रृंखला पर आसानी से उपयोग किया है, तो 25% पर ऑब्जेक्ट इसके "चेकपॉइंट" के पीछे होगा, अंततः 100% तक पकड़ने तक तेज़ हो जाएगा।

अपने अंक कम या ज्यादा समान दूरी पर हैं, तो आप आवेदन कर सकते हैं:

.animatedobject { 
    -webkit-animation-timing-function: linear; 
} 

और अपने एनीमेशन, और अधिक अधिक कम अच्छा लगेगा अगर एक छोटे रोबोट।

एक अधिक प्राकृतिक दृष्टिकोण, तेजी लाने के लिए गति को बनाए रखने, और उसके बाद "ब्रेक" होगा:

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
    -webkit-animation-timing-function: ease-in; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
    -webkit-animation-timing-function: linear; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
    -webkit-animation-timing-function: linear; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
    -webkit-animation-timing-function: linear; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
    -webkit-animation-timing-function: ease-out; 
} 
} 

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

+1

हाँ, मैंने इसे एक समाधान के रूप में माना लेकिन यह अत्यधिक जटिल लगता है, पथ के साथ प्रत्येक के प्लेसमेंट/समय को समझने का प्रयास करने में बहुत समय लग सकता है। हालांकि, यह सबसे अच्छा जवाब है। –

1

आप के लिए कुछ संदर्भ प्यार: http://www.w3.org/TR/css3-animations/

अधिक विशेष रूप से

: http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

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

+0

यह काम वेबकिट के साथ करता है?संपत्ति को जोड़ने के लिए बस -webkit- जोड़ें? –

+0

यह करीब है, लेकिन समय फ़ंक्शन केवल अंतिम कीफ्रेम पर लागू होगा ... मैं चाहता हूं कि संपूर्ण एनीमेशन अनुक्रम में सभी कीफ्रेम पर टाइमिंग फ़ंक्शन लागू हो - क्या आप CSS3 में एनीमेशन स्टैकिंग पर विस्तार कर सकते हैं? –

2

जब आप एनीमेशन के विभिन्न पहलुओं पर लागू करने के लिए अलग-अलग आसान कार्य करना चाहते हैं तो आपको अपनी सामग्री को दो divs में घोंसले से अलग करना चाहिए।

इस मामले में, आपको एक आंदोलन एनीमेशन लागू करने के लिए एक पैरेंट div बनाना चाहिए, और एक बच्चे div को अस्पष्टता एनीमेशन लागू करने के लिए बनाना चाहिए। अस्पष्टता एनीमेशन में एक आसान वक्र होना चाहिए: रैखिक, और आंदोलन एनीमेशन में जो भी आसान कार्य आपके लिए सबसे अच्छा दिखता है। हालांकि, मैं दोहराता हूं कि डुओपिक्सेल आसान घटता और निश्चित चेकपॉइंट्स को मिश्रित करने के बारे में क्या कहता है - इस मामले में आपको वास्तव में एनिमेशन की आवश्यकता नहीं है, केवल दो 0%: 100% एनिमेशन - माता-पिता के लिए और एक बच्चे के लिए एक।

बहुत सी CSS3 एनीमेशन करने के बाद, मैंने अपने सेन्चा एनीमेटर उत्पाद के लिए this guide लिखा - इसमें कुछ उपयोगी सामान्य जानकारी है कि CSS3 के साथ काम कर रहे जटिल एनिमेशन कैसे प्राप्त करें - भले ही आप टूल का उपयोग नहीं करना चाहते हैं।

संबंधित मुद्दे

 संबंधित मुद्दे