एनीमेशन विकल्प एचटीएमएल 5 कैनवास/CSS3/jQuery

Question

मुझे या तो कुछ और फ्लैश-जैसी एनीमेशन करने में दिलचस्पी है, या HTML5/JQuery का संयोजन।

उड़ने वाले पक्षों में से एक विचार पक्षियों, चरित्र एनीमेशन और 'ट्विन' जैसी एनीमेशन अनुक्रमों में से एक है। मैं पृष्ठभूमि द्वारा एक फ्लैश देव हूं, इसलिए यह फ्लैश की टाइमलाइन आधारित मोशन ट्विन सिस्टम के माध्यम से दूसरी प्रकृति है, इसलिए मैं सोच रहा हूं कि एचटीएमएल 5 कैनवास, CSS3 और jQuery जैसी नई उभरती प्रौद्योगिकियों के साथ क्या संभव है? एनीमेशन की तरह ट्विन में ये कितने कुशल हैं? पढ़ने के लिए एक अच्छा प्रारंभिक बिंदु क्या है?

उदाहरण के लिए http://www.thewildernessdowntown.com/ पर उड़ान पक्षियों अद्भुत हैं, वे 3 डी, परिवर्तनीय दिशा, गति, रोटेशन, फ्लैप, गति प्रतीत होते हैं। फ्लैश में इसे सापेक्ष आसानी से प्राप्त किया जा सकता है, मूवीक्लिप्स के रूप में सेट टुकड़ा एनिमेशन बना सकता है, इन्हें मंच पर उत्पन्न कर सकता है और उन्हें विभिन्न गतियों पर या यहां तक ​​कि पीवी 3 डी में टिंचलाइट में ले जाया जा सकता है लेकिन मुझे पता नहीं है कि कैनवास पर यह कैसे प्राप्त किया जाएगा ।

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

धन्यवाद

Answer 1

आपके पास "HTML5" में तीन एनीमेशन विकल्प हैं: कैनवास, एसवीजी और सीएसएस एनिमेशन (साथ ही अच्छी पुरानी जावास्क्रिप्ट एनीमेशन)। आप जो भी उपयोग करते हैं उस पर निर्भर करता है कि आप क्या हासिल करने की कोशिश कर रहे हैं और आप कौन से ब्राउज़रों को चलाने के लिए चाहते हैं।

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

यहां मेरा intro presentation to CSS animations है और हमारे सेचा एनीमेटर टूल का परिचय भी है, जो अल्फा में बाहर है।

डेस्कटॉप के लिए कैनवास बहुत बढ़िया है - हालांकि यह वास्तव में केवल क्रोम 10 और आईई 9 में उत्कृष्टता से काम करता है - सफारी थोड़ा धीमा हो सकता है, विशेष रूप से एनिमेटेड तत्वों की संख्या चढ़ाई होती है और यह आईई 7/8 में मौजूद नहीं है (और मैं अभी तक एफएफ 4 का परीक्षण नहीं किया है)।

Answer 2

आप बाहर processingjs जो 2 डी और 3 डी दृश्यावलोकन के लिए कैनवास का उपयोग करता है की जाँच कर सकते हैं। मैंने प्रसंस्करण के साथ एक छोटा सा विज़ुअलाइज़ेशन किया है और कुछ अच्छे परिणाम प्राप्त करना काफी आसान है।

प्रसंस्करण का उपयोग करने का लाभ यह है कि आपकी एनीमेशन न केवल ब्राउज़र में बल्कि देशी प्रसंस्करण औजारों में भी चलती है।

Answer 3

चिड़चिड़ाहट में, मुझे लगता है कि पक्षियों को एसवीजी और माउस से दूर भागने के लिए कुछ जावास्क्रिप्ट का उपयोग करके एनिमेटेड किया गया है (क्योंकि सभी जानते हैं कि मकान पक्षियों को खा सकते हैं :))।

मुझे लगता है कि, "संक्रमण क्षण" में जावास्क्रिप्ट/सीएसएस 3 सरल एनीमेशन के लिए बहुत उपयोगी हो सकता है क्योंकि कुछ दिखाई देता है या एक तरफ जाता है। मोज़िला और ओपेरा केवल सीएसएस 3 संक्रमण का समर्थन करता है और पल के लिए कोई एनीमेशन का समर्थन करता है, इसलिए एनिमेशन का उपयोग करने के लिए यह थोड़ा जटिल भी है।

रुको, अभी भी कुछ कठिन एनीमेशन बनाना संभव है लेकिन आपको संक्रमण परिवर्तन के साथ शायद ही कभी खेलना होगा और कभी-कभी मूल रूप से परिवर्तन करना होगा। आप कुछ अच्छी जानकारियां वहाँ हो सकता है: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

svg के साथ अच्छे बिंदु यह अधिक एक "traditionnal फ्लैश एनीमेशन" की तरह एनिमेटेड किया जा करने के लिए का निर्माण किया जाता है और यह जावास्क्रिप्ट और css3 द्वारा नियंत्रित किया जा सकता है। जावास्क्रिप्ट अधिक से अधिक शक्तिशाली हो रहा है क्योंकि सभी "आधुनिक ब्राउज़र" सनस्पीडर परीक्षण जैसे परीक्षण पर लड़ रहे हैं। तो आप जावास्क्रिप्ट के साथ बहुत कुछ कर सकते हैं, मुझे लगता है कि जब तक एक wysiwyg संपादक एक स्वच्छ css3 कोड आउटपुट करेगा (मुझे लगता है कि एडोब सही तरीके से है?)।

दूसरी तरफ ये तकनीकें वेबजीएल को कॉल करती हैं, यह आपको एचटीएमएल 5 कैनवास और 2 डी और 3 डी एप्लिकेशन लिखने के लिए कुछ गंभीर जावास्क्रिप्ट का उपयोग करके अनुमति देती है जो आपको कुछ अद्भुत चीजें करने की अनुमति देती है जो GPU की शक्ति का उपयोग कर सकती हैं।

मुझे आशा है कि इससे आपको उन उभरती प्रौद्योगिकियों के माध्यम से देखने में मदद मिलेगी।

Answer 4

एचटीएमएल 5 और जावास्क्रिप्ट का उपयोग कर एनिमेटेड स्टारफील्ड लिखने के बारे में थोड़ा सा डेमो है। this page में जावास्क्रिप्ट कोड देखें।

Answer 5

पक्षी एनीमेशन बोड्स नामक एल्गोरिदम का उपयोग करके किया जाता है। बोलियां अनूठी हैं कि इसमें एक झुकाव/झुंड/विद्यालय जैसे व्यवहार है जैसे पक्षी और मछली सबसे अच्छा करते हैं।

• आप आविष्कारक क्रिस रेनॉल्ड्स द्वारा Boids के वर्णन की जाँच करने के लिए चाहते हो सकता है: https://github.com/nuterian/Flocking

• यहाँ एक है: Chris Reynolds - Boids

• यहाँ GitHub पर एक स्क्रिप्ट है कि आप मदद कर सकते हैं है डेमो: http://nuterian.github.io/Flocking/