aframe
एनीमेशन
खोज…
परिचय
ए-फ्रेम में एनिमेशन और बदलाव को एक बच्चे के रूप में <a-animation> तत्व का उपयोग करके परिभाषित किया गया है। सिस्टम वेब एनिमेशन विनिर्देशन के बाद मोटे तौर पर आधारित है। A- फ़्रेम आंतरिक रूप से tween.js का उपयोग करता है।
टिप्पणियों
गुण
यहाँ एनीमेशन विशेषताओं का अवलोकन है। हम नीचे और अधिक विस्तार में जाएंगे।
| गुण | विवरण | डिफ़ॉल्ट मान |
|---|---|---|
| गुण | चेतन को गुण। एक घटक विशेषता को निर्दिष्ट करने के लिए, componentName.property उपयोग करें। light.intensity सिंटैक्स (जैसे, light.intensity )। | रोटेशन |
| शुरू | एनीमेशन शुरू करने से पहले प्रतीक्षा करने के लिए इवेंट का नाम। | '' |
| विलंब | देरी (मिलीसेकंड में) या घटना का नाम एनीमेशन शुरू होने से पहले प्रतीक्षा करने के लिए। | 0 |
| दिशा | एनीमेशन की दिशा (के बीच from और to )। alternate एक, alternateReverse , normal , reverse । | साधारण |
| dur | एनीमेशन की अवधि (मिलीसेकंड) में। | 1000 |
| आसान | एनीमेशन का आसान कार्य। चुनने के लिए बहुत सारे हैं। | आराम |
| समाप्त | एनीमेशन को रोकने से पहले प्रतीक्षा करने के लिए इवेंट का नाम। | '' |
| भरण | सक्रिय रूप से खेलने में नहीं होने पर एनीमेशन के प्रभाव को निर्धारित करता है। backwards की backwards , both , forwards , none । | आगे |
| से | मान शुरू करना। | वर्तमान मूल्य। |
| दोहराना | बार-बार गिनती या indefinite । | 0 |
| सेवा | अंतिम मूल्य। निर्दिष्ट होना चाहिए। | कोई नहीं |
शुरू
begin विशेषता परिभाषित करता है जब एनीमेशन खेल शुरू कर देना चाहिए।
यह या तो एक संख्या हो सकती है, प्रतीक्षा करने के लिए मिलीसेकंड का प्रतिनिधित्व कर सकती है, या प्रतीक्षा करने के लिए एक घटना का नाम । उदाहरण के लिए, हम एक एनीमेशन को परिभाषित कर सकते हैं जो किसी इकाई को स्केल करने से 2 सेकंड पहले प्रतीक्षा करता है।
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
या हम एक एनीमेशन को परिभाषित कर सकते हैं जो मूल तत्व के लिए इंतजार कर रहा है एक इकाई को लुप्त होने से पहले fade नामक एक घटना को ट्रिगर करने के लिए।
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
दिशा
direction विशेषता प्रारंभिक मूल्य और अंतिम मूल्य के बीच चेतन करने का कौन सा तरीका निर्धारित करती है।
जब हम एक वैकल्पिक दिशा को परिभाषित, एनीमेशन आगे और पीछे के बीच जाना होगा from और to यो-यो की तरह मान। जब हम एनिमेशन दोहराते हैं तब केवल वैकल्पिक दिशाएँ ही प्रभावित होती हैं।
| मूल्य | विवरण |
|---|---|
| वैकल्पिक | सम-संख्यांकित चक्र पर, से चेतन from करने to । विषम-चक्रों पर, एनीमेशन से to पर from |
| वैकल्पिक-रिवर्स | विषम क्रमांकित चक्र पर, से चेतन from करने to । सम-संख्यांकित चक्र पर, एनीमेशन से to के लिए from |
| साधारण | से चेतन from करने to । |
| उलटा | से चेतन to करने के लिए from । |
आसान
easing विशेषता एनीमेशन के आसान कार्य को परिभाषित करती है, जो ease चूक जाती ease । सूचीबद्ध करने के लिए बहुत सारे आसान कार्य हैं, लेकिन हम उन्हें स्पष्ट रूप से समझा सकते हैं।
एक संभावित मान linear । और बुनियादी ढील कार्य ease , ease-in , ease-out , और ease-in-out ।
फिर सहज कार्यों के अधिक समूह हैं। उपर्युक्त मूलभूत सहजता वाले कार्य प्रत्येक समूह को आसान बनाने वाले कार्यों का उपसर्ग करते हैं। आसान कार्यों के समूह हैं cubic , quad , quart , quint , sine , expo , circ , elastic , back और bounce ।
उदाहरण के लिए, सहजता वाले कार्यों के cubic समूह में ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic ।
भरण
fill विशेषता एनीमेशन के प्रभाव को परिभाषित करती है जब सक्रिय रूप से खेलने में नहीं। प्रत्येक एनीमेशन चक्र से पहले और / या बाद में इकाई पर एनीमेशन का क्या मान है, इसे fill बारे में सोचें। नीचे fill और उनके प्रभावों के लिए संभावित मान नीचे दिए गए हैं।
| मूल्य | विवरण |
|---|---|
| पीछे की ओर | एनीमेशन शुरू होने से पहले, शुरू मान सेट from मूल्य। |
| दोनों | बैकवर्ड फिल और फॉरवर्ड फिल दोनों के प्रभावों को मिलाएं। |
| आगे | एनीमेशन समाप्त होने के बाद, अंतिम मूल्य पर बनी रहेगी to मूल्य। डिफ़ॉल्ट भरण। |
| कोई नहीं | एनीमेशन शुरू होने से पहले, प्रारंभिक मूल्य को प्रारंभिक मूल्य पर सेट करें। एनीमेशन खत्म होने के बाद, मूल्य को प्रारंभिक मूल्य पर रीसेट करें। |
दोहराना
repeat विशेषता यह परिभाषित करती है कि एनिमेशन कितनी बार दोहराता है। हम एनीमेशन के प्रत्येक दोहराने को एक चक्र कहते हैं। रिपीट या तो एक संख्या हो सकती है जो प्रत्येक ऐनिमेशन चक्र पर नीचे गिना जाता है जब तक कि यह 0 तक नहीं पहुंच जाता है जिस पर एनीमेशन समाप्त हो जाएगा, या हम repeat से indefinite लिए सेट कर सकते हैं और जब तक एनीमेशन मैन्युअल रूप से हटा या बंद नहीं हो जाता है तब तक ऐनिमेशन लगातार लूप करेगा।
आयोजन
<a-animation> -एनीमेशन <a-animation> तत्व कुछ घटनाओं का उत्सर्जन करता है।
| कार्यक्रम नाम | विवरण |
|---|---|
| animationend | एनीमेशन समाप्त होने पर उत्सर्जित। दोहराने के मामले में, दोहराने की संख्या 0 तक पहुंचने पर उत्सर्जित होती है। अनिश्चित पुनरावृत्ति के लिए उत्सर्जित नहीं। |
| animationstart | एनीमेशन खेलना शुरू करने पर तुरंत उत्सर्जित। |
उदाहरण एनिमेशन
परिचयात्मक उदाहरण के रूप में, Y- अक्ष के बारे में एक इकाई पर 5-मीटर की कक्षा को परिभाषित करने के लिए जो कि 10 सेकंड लेता है, हम स्थिति को बदल सकते हैं और रोटेशन को चेतन कर सकते हैं। यह एनीमेशन 0 डिग्री के Y- अक्ष के बारे में प्रारंभिक घुमाव के साथ शुरू होता है, और 360 डिग्री के आसपास जाता है। यह 10000 मिलीसेकंड की अवधि के साथ परिभाषित किया गया है, एनीमेशन के प्रत्येक चक्र पर अंतिम मूल्य बनाए रखता है, और अनंत रूप से छोरों।
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
विभिन्न प्रकार के गुणों को एनिमेट करना
ए-फ़्रेम की एनीमेशन प्रणाली विभिन्न प्रकार के गुणों को चेतन कर सकती है।
vec3 गुण
ए-फ्रेम में मानक vec3 घटक हैं (यानी, position , rotation और scale )। ये घटक तीन कारकों से मिलकर बनता है: पहला, दूसरा और Z हम करने के लिए तीन अंतरिक्ष-सीमांकित संख्या पारित कर सकते हैं from और to गुण बस के रूप में हम उन्हें एक इकाई पर परिभाषित करेगा। इस मामले में, एनीमेशन सिस्टम यह मान लेगा कि हम एक vec3 मान को एनिमेट कर रहे हैं।
उदाहरण के लिए, यदि हम एक स्थान से दूसरे स्थान पर जाने वाली इकाई को चेतन करना चाहते हैं, तो हम position घटक को चेतन कर सकते हैं।
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
बूलियन गुण
ए-फ्रेम में मानक घटक होते हैं जो एकल बूलियन मान को स्वीकार करते हैं। प्रत्येक एनीमेशन चक्र के अंत में बूलियन को फ्लिप करके बूलियन मान "एनिमेटेड" हो सकता है।
उदाहरण के लिए, हम एक एनीमेशन को परिभाषित कर सकते हैं जो 5 सेकंड के बाद एक इकाई की दृश्यता को बंद कर देता है।
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
संख्यात्मक गुण
हम संख्यात्मक विशेषताओं को भी चेतन कर सकते हैं। उदाहरण के लिए, हम प्रकाश आदिम की तीव्रता को चेतन कर सकते हैं।
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
रंग के गुण
हम किसी भी घटक गुण को देख सकते हैं जिसका रंग प्रकार है। उदाहरण के लिए, हम एक बॉक्स को सफेद से लाल कर सकते हैं।
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
घटक गुण
हम एक बहु-संपत्ति घटक की एक निश्चित संपत्ति को चेतन कर सकते हैं। ऐसा करने के लिए, हम डॉट सिंटैक्स का उपयोग करके घटक गुण का चयन करते हैं: componentName.propertyName ।
उदाहरण के लिए, एक शंकु के शीर्ष त्रिज्या को चेतन करने के लिए, हम geometry.radiusTop साथ radiusTop मान का चयन कर सकते हैं।
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>