2016-12-03 15 views
19

मैं वर्तमान में कोणीय 2 की एनीमेशन का प्रयास कर रहा हूं और मैं सोच रहा था कि वे मानक सीएसएस एनिमेशन/संक्रमणों पर किस विशिष्ट लाभ को लाते हैं।कोणीय 2 एनीमेशन बनाम सीएसएस एनीमेशन - कब उपयोग करें?

उदा। बॉक्स की छाया के साथ एक ठेठ सामग्री डिजाइन कार्ड और होवर प्रभाव। अधिकांश सीएसएस ढांचे का उपयोग: होवर और सीएसएस-संक्रमण। कोणीय 2 एनिमेशन का उपयोग करने में कोई विशेष फायदा है?

मैंने कहीं पढ़ा है कि कुछ सीएसएस एनीमेशन गुण GPU को उतना ही नहीं बुलाते हैं, इसलिए कुछ देरी और झटके हैं। कोणीय 2 एनिमेशन के बारे में क्या?

+2

ठीक है, मुझे कोणीय के बारे में बहुत कुछ पता नहीं है, लेकिन मुझे लगता है कि वे सिर्फ सीएसएस एनिमेशन का लाभ उठाते हैं। [वास्तव में उनके दस्तावेज़ कहते हैं] (https://angular.io/docs/ts/latest/guide/animations.html): * "कोणीय की एनीमेशन प्रणाली आपको ऐसे एनिमेशन बनाने की सुविधा देती है जो ** उसी तरह के देशी प्रदर्शन के साथ चलती हैं * * शुद्ध सीएसएस एनिमेशन में पाया गया। "*। वे यह भी निर्दिष्ट करते हैं कि वे [वेब एनिमेशन] का उपयोग करते हैं (https: //w3c.github।आईओ/वेब-एनीमेशन /) जहां [संभव] (http://caniuse.com/#feat=web-animation)। जब आप "कोणीय 2 एनीमेशन" के लिए Google पर पहली बार हिट करते हैं तो यह पहली हिट है – GolezTrol

+1

मेरा मानना ​​है कि कोणीय 2 एनिमेशन केवल संकलित होने पर सीएसएस एनीमेशन बनाते हैं। लाभ घटक स्तर पर एनिमेशन को जोड़ने और नियंत्रित करने में सक्षम है। –

+0

त्वरित प्रतिक्रिया के लिए धन्यवाद, इसलिए मूल रूप से जो मैं कोणीय 2 एनिमेशन के साथ प्राप्त कर रहा हूं वे विधियां हैं (जैसे एनिमेट() और स्टाइल()) जो एनिमेशन को अधिक नियंत्रित करने योग्य बनाता है (?) –

उत्तर

19

प्रश्न वास्तव में जावास्क्रिप्ट एनीमेशन बनाम सीएसएस एनीमेशन (क्योंकि कोणीय 2 एनिमेशन एनिमेशन जावास्क्रिप्ट-एनीमेशन पर आधारित हैं)।

उत्तर यह है कि जब आप कर सकते हैं - सीएसएस एनीमेशन का उपयोग करें।

आधुनिक ब्राउज़र सीएसएस एनीमेशन के लिए different thread का उपयोग करता है, इसलिए जावास्क्रिप्ट-थ्रेड सीएसएस एनिमेशन से प्रभावित नहीं होता है।

आप अपने ब्राउज़र में विभिन्न ढांचे (जावास्क्रिप्ट-आधारित) वीएस सीएसएस एनीमेशन के पूर्वरूपता की जांच के लिए HTML5 Animation Speed Test का उपयोग कर सकते हैं।

सामान्य में:

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

आप विशेष रूप से Angular2 एनिमेशन के बारे में जानना चाहते हैं - बस आपके ब्राउज़र में तत्व का निरीक्षण किया और देखें कि क्या एनीमेशन वहाँ एक सीएसएस है (संक्रमण/animationFrame आधारित या जावास्क्रिप्ट (आप में मूल्य देखने के लिए सक्षम हो जाएगा । एनीमेशन दौरान style विशेषता परिवर्तन)

+0

यह अच्छा है, लेकिन हालांकि कोणीय जावास्क्रिप्ट है, मुझे लगता है कि यह अभी भी एनिमेट करने के लिए सीएसएस का उपयोग करता है। यहां कोई विशेषज्ञ नहीं है, लेकिन मेरी पिछली टिप्पणी में उल्लिखित लिंक इस बारे में स्पष्ट हैं। – GolezTrol

+0

@GolezTrol, 1 मिनट पहले मेरे उत्तर में अपडेट की जांच करें :) यह बताता है कि एंजुलर 2 द्वारा एनीमेशन सीएसएस या जेएस आधारित है या नहीं। – Dekel

2

जवाब डॉक्स में वास्तव में है:

https://angular.io/guide/animations

कोणीय की एनीमेशन प्रणाली y की सुविधा देता है ou निर्माण एनिमेशन जो के साथ चलते हैं, शुद्ध सीएसएस एनिमेशन में पाए जाते हैं। आप आसानी से नियंत्रण के लिए अपने एनीमेशन तर्क को अपने शेष एप्लिकेशन कोड के साथ कड़ाई से एकीकृत कर सकते हैं।

यह ब्राउज़र को अधिभारित करने, या एनिमेशन को चेन करने से बचने के लिए एनिमेशन की लंबाई का ट्रैक रखने की आवश्यकता को दूर करता है।

आम तौर पर, यदि आपके पास एक साधारण छोटी बात है, तो सीएसएस शायद आसान है। लेकिन अगर आप लगातार अपने ऐप में एनीमेशन कर रहे हैं तो आपको कोणीय एनिमेशन से थोड़ी सी तरफ से बहुत सारी शक्ति मिलती है।

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