जावास्क्रिप्ट नियम के साथ हार्डवेयर त्वरण के साथ CSS3 रूपांतरण के मूल्य को एनिमेट करना क्या करता है?

Question

आप एनीमेशन अवधि सेट करके और CSS3 ट्रांसफॉर्म के प्रारंभिक और अंतिम मानों को सेट करके हार्डवेयर त्वरित एनिमेशन का लाभ उठा सकते हैं।

क्या होगा यदि एनीमेशन अवधि निर्धारित करने और कीफ्रेम का उपयोग करने के बजाय, आप जावास्क्रिप्ट के साथ वांछित CSS3 ट्रांसफॉर्म के मूल्य को एनिमेट करते हैं? क्या आप अभी भी हार्डवेयर त्वरण का लाभ उठा रहे हैं, या हार्डवेयर त्वरण से इंकार कर दिया गया है?

Answer 1

यह हार्डवेयर त्वरित है, लेकिन अमीर उल्लेख के रूप में, यह सीएसएस संक्रमण के साथ ऐसा करना आसान और अधिक कुशल है। बात यह है कि jQuery के साथ एनिमेटिंग 3 डी ट्रांसफॉर्म सरल नहीं है, यदि आप करते हैं:

$('div').animate({ 
    '-vendor-transform' : "translate3d(100px,0,0)"; 
}, 500) 

यह काम नहीं करता है। यहां तक ​​कि अगर आप ऐसा करेंगे:

$('div').css("-webkit-transform", "translate3d(0,0,0)"); 
alert($('div').css("-webkit-transform")) 

आप वापस translate3d(0,0,0) नहीं मिलता है, तो आप matrix(1, 0, 0, 1, 100, 0)

मिलता तो तुम मैट्रिक्स को शामिल बस स्क्रीन पर चलती कराने के लिए कस्टम एनिमेशन कोड का एक बहुत कुछ लिखना चाहिए।

यहां एक कस्टम एनिमेटेड 3 डी ट्रांसफॉर्म उदाहरण है: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, यह देखने के लिए स्रोत कोड पर एक नज़र डालें कि यह जावास्क्रिप्ट का स्तर है जिसके साथ आप सहज हैं।

Answer 2

जब तक आप संक्रमण का उपयोग नहीं करते हैं तब तक यह वेबकिट ब्राउज़र के लिए हार्डवेयर त्वरित नहीं होगा। ,

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0); 

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

एनिमेटिंग का पुराना तरीका वास्तव में अप्रचलित माना जाना चाहिए, क्योंकि यह संक्रमण से बहुत कम कुशल है, और आम तौर पर आईओएस पर कम फ्रेमरेट होता है।