सीएसएस 3 एनिमेशन। translate3d बनाम मैट्रिक्स

Question

मैं ऐसी परियोजनाएं कर रहा हूं जिनके लिए चिकनी संक्रमण और एनिमेशन आवश्यक हैं। हमने हाल ही में जावास्क्रिप्ट का उपयोग सीएसएस एनिमेशन में लगभग 100% समय से माइग्रेट कर दिया है।

मैंने अनुवाद 3 डी का उपयोग करके पाया है मोबाइल और डेस्कटॉप दोनों पर एक बहुत चिकनी अच्छी एनीमेशन प्रदान करता है।

मेरे वर्तमान animating शैली इस तरह है:

सीएसएस:

.animation-up{ 
    transform: translate3d(0, -100%, 0); 
} 

.animation-down{ 
    transform: translate3d(0, 100%, 0); 
} 

.animation-left{ 
    tranform: translate3d(-100%, 0, 0); 
} 

.animation-right{ 
    tranform: translate3d(-100%, 0, 0); 
} 

हाल ही में, मैं अलग व्यवस्थाएं कि चर्चा का एक बहुत हो रही करने लगते हैं में देखना शुरू कर दिया है। विशिष्ट ग्रीनसाक में दो (http://greensock.com/tweenmax) और Famo.us (http://famo.us)। दोनों शानदार फ्रेम दर और अद्भुत प्रदर्शन दिखाते हैं।

मुझे लगता है कि वे एक मार्टिक्स ट्रांसफॉर्म का उपयोग कर रहे हैं।

Greensock उदाहरण (मैट्रिक्स का उपयोग करते हुए):

<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div> 

Famo.us उदाहरण (3 डी-मैट्रिक्स का उपयोग करते हुए):

<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div> 

मेरा प्रश्न है ... क्या फर्क है translate3d और मैट्रिक्स के बीच? अनुवाद 3 डी पर मैट्रिक्स का उपयोग कर एक बड़ा सुधार है? क्या वहां कोई और तरीका है जो बेहतर परिणाम भी प्रदान करता है?

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

Answer 1

नाइट सही है - अधिकांश वास्तविक दुनिया परिदृश्यों में, अनुवाद translate3d() और matrix3d ​​() के बीच अलग-अलग होगा। आखिरकार, सभी परिवर्तन कुछ स्तर पर एक मैट्रिक्स में परिवर्तित हो जाते हैं क्योंकि इस प्रकार GPU चीजें प्रस्तुत करता है (कम से कम यह मेरी समझ है)।

एक मैट्रिक्स() और matrix3d ​​() में न केवल स्थितित्मक डेटा होता है, बल्कि घूर्णन, स्केल और स्कू भी होता है।

आपने पूछा कि क्या मैट्रिक्स() और matrix3d ​​() के बीच एक प्रदर्शन अंतर है और उत्तर "कभी-कभी" होता है।matrix3d ​​() (या कोई 3 डी-संबंधित ट्रांसफॉर्म) आम ​​तौर पर ब्राउजर को उस तत्व को "लेयरइज़" करने के लिए मजबूर करता है (इसके बारे में सोचें कि इसकी पिक्सेल की तस्वीर लेना और उन्हें GPU पर संग्रहीत करना) जो उसके पिक्सेल अलग होने के बाद से हेरफेर करने के लिए तेज़ होता है बाकी स्क्रीन/परतों से '। आम तौर पर आप इस तकनीक के साथ चिकनी एनिमेशन देखेंगे। हालांकि, शुरू में कुछ को परतित करने के लिए एक छोटी सी लागत है (GPU को पिक्सेल शटल करें)।

matrix3d ​​() के लिए दूसरी तरफ यह है कि अधिकांश ब्राउज़र एक विशिष्ट आकार (तत्व के प्राकृतिक आकार) पर पिक्सल को कैप्चर करते हैं, इसलिए यदि आप इसे स्केल करते हैं, तो चीजें अस्पष्ट या पिक्सलेटेड लगती हैं। दोबारा, यह आम तौर पर केवल तभी मायने रखता है जब आप कुछ यूपी स्केल कर रहे हैं। ओह, और कुछ लेयरिंग मेमोरी लेता है। यदि आप GPU की स्मृति को पार करते हैं, तो यह चीजों को धीमा कर सकता है। मेरे अनुभव में, यह शायद ही कभी होता है।

GreenSock's GSAP का हालिया संस्करण स्वचालित रूप से सबसे आसान परिणाम देने की संभावना है जो भी तकनीक का उपयोग करेगा। यदि आप केवल स्थिति बदल रहे हैं, तो यह translate3d() का उपयोग करेगा। यदि आप स्केल और ले जाते हैं, तो यह translate3d() और स्केल() का उपयोग करेगा। यदि आपके पास कोई रोटेशन या स्कू है, तो यह matrix3d ​​() में स्थानांतरित हो जाएगा क्योंकि यह सबसे तेज़ है। संस्करण 1.15.0 के रूप में, यह फोर्स 3 डी: "ऑटो" का उपयोग करता है जिसका अर्थ है कि यह लेविन के लाभ प्राप्त करने के लिए ट्यून के दौरान 3 डी का उपयोग करेगा, लेकिन फिर एपीआई GPU स्मृति को मुक्त करने के लिए 2 डी पर वापस स्विच करें। यह एक बेहद अनुकूलित प्रणाली है। आप इसे जो भी तकनीक चाहते हैं उसका उपयोग करने के लिए मजबूर कर सकते हैं।

सीएसएस और जेएस एनीमेशन के प्रदर्शन का विश्लेषण करते समय मैंने कुछ रोचक खोजों में ठोकर खाई। मैंने एक स्क्रीनकास्ट रिकॉर्ड किया है जिसे आप देखना चाहते हैं: http://greensock.com/css-performance/ (टिप्पणियां भी पढ़ना सुनिश्चित करें)।

Answer 2

उनके मूल पर, translate3d() और matrix3d() दोनों मैट्रिक्स ट्रांसफॉर्म हैं।

translate3d(dx, dy, dz):

matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4):

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

Answer 3

एक और चीज जो आपको विचार करना है वह यह है कि एनिमेटिंग मैट्रिक्स आपको उन सभी विकल्पों को नहीं देगा जो आपके पास एनिमेटिंग ट्रांसफॉर्म हैं, विशेष रूप से यदि आप रोटेशन सेट कर रहे हैं।

सबसे स्पष्ट एक घूर्णन (0deg) घुमाने के लिए एनिमेटिंग (360deg) है। दोनों के बराबर मैट्रिक्स वही है (जाहिर है)। आपको घूर्णन के साथ ट्रांसफॉर्म सेट करने की आवश्यकता है, या यह काम नहीं करेगा।

जटिल परिवर्तनों में, आम तौर पर मैट्रिस के साथ ट्रांसफॉर्म सेट करने से आपको वह एनीमेशन नहीं मिलेगा जो आप उम्मीद करते हैं।

लेकिन, यदि आप केवल अनुवाद का उपयोग, के रूप में अपने शीर्षक से स्पष्ट है, इस बात का कुछ भी एक मुद्दा