Keyframe Animation in Computer Graphics

0
130
Keyframe Animation

Keyframe Animation in Computer Graphics


Keyframe Animation in Computer Graphics, Keyframe किसी ऑब्जेक्ट को एनिमेट करने का सबसे सरल रूप है। इस धारणा के आधार पर कि किसी वस्तु की एक प्रारंभिक अवस्था या स्थिति है और समय के साथ, स्थिति, रूप, रंग, प्रकाश मानता या किसी अन्य संपत्ति में कुछ अलग अंतिम रूप में बदल जाएगी।

मीडिया उत्पादन में, एक keyframe एक timeline पर एक स्थान है जो एक transition की शुरुआत या अंत को चिह्नित करता है। यह विशेष जानकारी रखता है जो परिभाषित करता है कि transition कहाँ से शुरू या बंद होना चाहिए। गति के भ्रम को बनाने के लिए उन परिभाषाओं के बीच मध्यवर्ती फ्रेम को समय के साथ interpolated किया जाता है। कंप्यूटर एनीमेशन में, 3D एनीमेशन या गैर-रेखीय वीडियो संपादन की तरह, यह प्रक्षेप सीपीयू द्वारा गणितीय रूप से किया जाता है|

Keyframe Animation in After Effect


Keyframes में से प्रत्येक एनिमेटेड logo की स्थिति को परिभाषित करता है (पहले बाईं ओर, और फिर एक सेकंड बाद दाईं ओर)। जब एनीमेशन play जाता है, तो logo प्रारंभ स्थिति से अंत स्थिति तक आसानी से स्थानांतरित होता है।
Key frames का उपयोग किसी भी समय-आधारित मीडिया उत्पादन प्रक्रिया में किया जा सकता है जहां transitions को परिभाषित किया जाता है, जिसमें ऑडियो उत्पादन और उच्च-अंत डिजिटल वीडियो संपीड़न शामिल हैं।

Keyframe Animation

Keyframe Animation

एक कीफ़्रेम उस बिंदु को चिह्नित करता है जहां आप एक स्थान निर्दिष्ट करते हैं, जैसे स्थानिक स्थिति, अस्पष्टता या ऑडियो वॉल्यूम| Premiere Pro तब keyframes के बीच मूल्यों में एक क्रमिक परिवर्तन बनाता है, जिसे प्रक्षेप कहा जाता है। आप या तो टाइमलाइन में या इफ़ेक्ट कंट्रोल पैनल में कीफ्रेम के साथ काम कर सकते हैं।

Keyframe Animation in Premiere Pro


एक property को animate करना समय के साथ अपने मूल्य को बदलना है। Premiere Pro में, प्रभाव गुण उन्हें keyframes असाइन करके एनिमेटेड किया जा सकता है।

Keyframe Animation

Keyframe Animation

एक कीफ़्रेम उस बिंदु को चिह्नित करता है, जहां आप एक मान निर्दिष्ट करते हैं, जैसे स्थानिक स्थिति, अस्पष्टता या ऑडियो वॉल्यूम। समय के साथ किसी संपत्ति में बदलाव करने के लिए, आप परिवर्तन की शुरुआत में मूल्य के लिए कम से कम दो कीफ्रेम-एक कीफ्रेम सेट करते हैं, और परिवर्तन के अंत में मूल्य के लिए एक और कीफ्रेम। Premiere Pro तब keyframes के बीच मूल्यों में एक क्रमिक परिवर्तन बनाता है, जिसे interpolation कहा जाता है। आप या तो टाइमलाइन में या इफ़ेक्ट कंट्रोल पैनल में कीफ्रेम के साथ काम कर सकते हैं।

आप मौजूदा समय में टाइमलाइन या इफ़ेक्ट कंट्रोल पैनल में कीफ्रेम जोड़ सकते हैं। कीफ्रेमिंग प्रक्रिया को सक्रिय करने के लिए Effect Controls panel में Toggle Animation बटन का उपयोग करें।

यदि आप कीफ़्रेम को modify या कॉपी करना चाहते हैं, तो पहले इसे टाइमलाइन पैनल में चुनें। Unselected कीफॉर्स खोखले दिखाई देते हैं; चयनित कीफ़्रेम ठोस दिखाई देते हैं। आपको कीफ़्रेम के बीच सेगमेंट चुनने की ज़रूरत नहीं है क्योंकि आप सेगमेंट को सीधे खींच सकते हैं। इसके अलावा, जब आप कीफ्रेम को बदलते हैं तो उनके अंत बिंदुओं को परिभाषित करने वाले सेगमेंट automatically रूप से समायोजित हो जाते हैं।

Effect Controls panel और टाइमलाइन पैनल आपको कीफ़्रेम के समय और मूल्यों को समायोजित करने देते हैं, लेकिन वे अलग-अलग तरीकों से काम करते हैं। Effect Controls panel एक ही बार में सभी प्रभाव गुण, keyframes और प्रक्षेप तरीकों को प्रदर्शित करता है। टाइमलाइन पैनल के क्लिप्स एक समय में केवल एक प्रभाव गुण दिखाते हैं। Effect Controls panel में, आपके पास कीफ़्रेम मानों पर पूर्ण नियंत्रण होता है। टाइमलाइन पैनल में, आपके पास सीमित नियंत्रण है।

उदाहरण के लिए, आप किसी टाइमलाइन में x और y निर्देशांक, जैसे स्थिति, का उपयोग करने वाले मानों को नहीं बदल सकते। हालाँकि, आप Effect Controls panel में स्थानांतरित किए बिना कीफ़्रेम समायोजन कर सकते हैं।

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

Keyframe Animation

Keyframe Animation

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

ऑडियो प्रभाव के लिए, एक टाइमलाइन पैनल पूरे ट्रैक के लिए कीफ्रेम प्रदर्शित कर सकता है। प्रत्येक क्लिप या ट्रैक एक अलग संपत्ति प्रदर्शित कर सकता है। हालाँकि, आप किसी एक क्लिप या ट्रैक के भीतर एक समय में केवल एक ही प्रॉपर्टी के लिए कीफ़्रेम प्रदर्शित कर सकते हैं।

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

आप टाइमलाइन के ट्रैक में दिखाए गए कीफ़्रेम के प्रकार निर्दिष्ट कर सकते हैं। आप यह भी निर्दिष्ट कर सकते हैं कि क्या कीफ्रेम डिफ़ॉल्ट रूप से दिखाए गए हैं। उदाहरण के लिए, आप डिफ़ॉल्ट रूप से छिपाए गए keyframes को चुन सकते हैं, ताकि आप क्लिप को संपादित करने की कोशिश करते समय गलती से उन्हें सेट या बदल न सकें।

इफ़ेक्ट कंट्रोल और टाइमलाइन पैनल दोनों में कीफ़्रेम नेवीगेटर होते हैं, जो बाएँ और दाएँ तीर को वर्तमान समय के संकेतक को एक कीफ़्रेम से अगले में ले जाते हैं। टाइमलाइन पैनल में, कीफ़्रेम नाविक को सक्षम किया जाता है, जब आप प्रभाव संपत्ति के लिए कीफ़्रेम सक्रिय करते हैं।

टाइमलाइन और इफ़ेक्ट कंट्रोल पैनल के ग्राफ़ प्रत्येक कीफ़्रेम Keyframe Animation, के मानों और कीफ़्रेम के बीच के प्रक्षेपित मूल्यों को प्रदर्शित करते हैं। जब एक प्रभाव संपत्ति का ग्राफ समतल होता है, तो संपत्ति का मूल्य कीफ्रेम के बीच अपरिवर्तित होता है। जब ग्राफ ऊपर या नीचे जाता है, तो एक संपत्ति का मूल्य कीफ्रेम के बीच बढ़ता या घटता है। आप संपत्ति के परिवर्तनों की गति और चिकनाई को एक कीफ़्रेम से अगले तक प्रभावित कर सकते हैं। बस प्रक्षेप विधि को बदलें और बेज़ियर घटता को समायोजित करें।

एनीमेशन और फिल्म निर्माण में एक कीफ़्रेम एक ड्राइंग है जो किसी भी smooth transition के शुरुआती और समाप्ति बिंदुओं को परिभाषित करता है। कीफ्रेम का एक क्रम परिभाषित करता है कि दर्शक किस आंदोलन को देखेंगे, जबकि फिल्म, वीडियो या एनीमेशन पर कीफ्रेम की स्थिति आंदोलन की timining को परिभाषित करती है।

Keyframe Animation in CSS


Keyframe Animation कोड define करता है। CSS Styles के एक सेट से दूसरे में धीरे-धीरे बदलते हुए एनीमेशन बनाया जाता है। एनीमेशन के दौरान, आप कई बार CSS Styles के सेट को बदल सकते हैं। 0% एनीमेशन की शुरुआत है, 100% एनीमेशन पूरा होने पर है। Styles परिवर्तन प्रतिशत में या From और to कीवर्ड के साथ होगा, जो 0% और 100% के समान है।

Keyframe Animation

Keyframe Animation

Keyframe Animation CSS rule एनीमेशन sequence के साथ keyframes के लिए styles को परिभाषित करके एक CSS एनीमेशन sequence में मध्यवर्ती चरणों को नियंत्रित करता है। यह बदलावों की तुलना में एनीमेशन sequence के मध्यवर्ती चरणों पर अधिक नियंत्रण देता है।

कीफ्रेम का उपयोग करने के लिए, एक नेम के साथ एक @keyframes नियम बनाएं, जो कि animation-name property द्वारा अपने कीफ्रेम घोषणा में एनीमेशन से मेल खाने के लिए उपयोग किया जाता है। प्रत्येक @keyframes के नियम में keyframe चयनकर्ताओं की एक शैली सूची होती है, जो keyframe होने पर एनीमेशन के साथ प्रतिशत निर्दिष्ट करता है, और उस keyframe के लिए शैलियों वाले एक ब्लॉक होता है।

यदि कोई कीफ़्रेम नियम एनीमेशन की शुरुआत या अंत की स्थिति (जो कि, 0% / से और 100% /) तक निर्दिष्ट नहीं करता है, तो ब्राउज़र start/end states के लिए तत्व की मौजूदा शैलियों का उपयोग करेगा। इसका उपयोग इसकी प्रारंभिक अवस्था और back से एक तत्व को animation करने के लिए किया जा सकता है। Keyframe rules में अनुप्राणित गुणों को अनदेखा नहीं किया जा सकता है, लेकिन supported properties अभी भी एनिमेटेड होंगे।

Keyframe Animation

Keyframe Animation

यदि किसी दिए गए नाम के लिए कई कीफ़्रेम सेट मौजूद हैं, तो parser द्वारा सामना किया गया अंतिम उपयोग किया जाता है। Keyframe Animation, @keyframes नियम cascade नहीं होते हैं, इसलिए एनिमेशन कभी भी एक से अधिक नियम सेट से कीफ़्रेम प्राप्त नहीं करते हैं।

यदि किसी दिए गए एनीमेशन टाइम ऑफ़सेट को डुप्लिकेट किया जाता है, तो उस प्रतिशत के लिए @keyframes नियम के सभी कीफ़्रेम उस फ्रेम के लिए उपयोग किए जाते हैं। यदि कई कीफ़्रेम समान प्रतिशत मान निर्दिष्ट करते हैं, तो Keyframe Animation, @keyframes नियम के भीतर कैस्केडिंग है।

हर की-फ़्रेम में निर्दिष्ट गुण यदि संभव हो तो interpolated होते हैं – जिन गुणों को interpolated नहीं किया जा सकता है उन्हें एनीमेशन से हटा दिया जाता है।
For example:

@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}

यहां, top property 0%, 30% और 100% कीफ़्रेम का उपयोग करके एनिमेट करती है, और 0%, 68%, 72% और 100% कीफ़्रेम का उपयोग करते हुए छोड़ दिया जाता है।

यदि एक कीफ़्रेम को कई बार परिभाषित किया जाता है लेकिन सभी प्रभावित गुण प्रत्येक कीफ़्रेम में नहीं होते हैं, तो इन कीफ़्रेम में निर्दिष्ट सभी मानों पर विचार किया जाता है।
Keyframe Animation For Ex.

@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
इस उदाहरण में, 50% कीफ्रेम पर, उपयोग किए गए मान शीर्ष: 10px और बाएं: 20px हैं।

LEAVE A REPLY

Please enter your comment!
Please enter your name here