एक SVG पथ तत्व को चेतन करें

मुझे लगता है कि कई ने पॉलीगॉन (वोक्स मीडिया) से अगली पीढ़ी के गेमिंग कंसोल की समीक्षा देखी है। ये वे हैं जहाँ शान्ति शैली में कन्सोल तैयार किए गए थे:


समीक्षा शांत, बल्कि असामान्य और नई लग रही थी। आप इस बारे में पता लगा सकते हैं कि समीक्षाओं की मुख्य विशेषता - एसवीजी एनीमेशन, स्वयं के समान कुछ कैसे करना है, और अन्य पुराने "गुप्त" संभावनाएं अच्छे पुराने एसवीजी द्वारा path तत्व को एनिमेट करने के मामले में छिपी हैं - बिल्ली के नीचे।

स्ट्रोक-डशररे प्रक्षेप, सिद्धांत

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

वोक्स मीडिया के लोगों ने एक हाइब्रिड संस्करण का इस्तेमाल किया (जो, मेरी राय में, बेमानी है), जिस तरह से आप उनके ब्लॉग पर पढ़ सकते हैं (और ज़रूरत है): बहुभुज फ़ीचर डिज़ाइन: मज़े और लाभ के लिए एसवीजी एनिमेशन ।

एसवीजी एनिमेशन का कार्यान्वयन

Vox Media ने सुगम एनीमेशन के लिए requestAnimationFrame का उपयोग करने का सुझाव दिया है, लेकिन हमारे पास कुछ अलग लक्ष्य हैं, इसलिए हम एक सरल तरीके से जाएंगे , इसमें लागू किए गए D3.js लाइब्रेरी और अवधि-आधारित एनीमेशन का उपयोग करें।

यहाँ लेख की शुरुआत से कंसोल को चेतन करने के लिए उपयोग किया जाने वाला वास्तविक कार्य कोड है।

 queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var paths = svg.selectAll("path") .call(transition); function transition(path) { path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() { d3.select(this).call(transition); }); // infinite loop } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr return function(t) { return i(t); }; } } 

transition(path) फ़ंक्शन में, हम ट्रांज़िशन tweenDash() नाम, ट्वीन) का उपयोग करते हैं, जो कि tweenDash() फ़ंक्शन में परिभाषित tweenDash() कॉल करता है। लंबाई की गणना करने के लिए एसवीजी path तत्वों के लिए परिभाषित गेटटोटलट्रिक्स () विधि का उपयोग किया जाता है। फिर, d3.interpolateString (a, b) का उपयोग करते हुए , stroke-dasharray प्रॉपर्टी के stroke-dasharray को stroke-dasharray , जो stroke-dasharray: 0,l; से मूल्यों को stroke-dasharray: 0,l; stroke-dasharray: l,l; पहले stroke-dasharray: l,l; (यहां पहला मूल्य स्ट्रोक की लंबाई और दूसरा अंतराल लंबाई निर्धारित करता है)। आप देख सकते हैं कि यह bl.ocks.org पर कैसे काम करता है: PlayStation 4: SVG एनीमेशन ।

मुझे लगता है कि आपने देखा कि कुछ तत्व लगातार प्रदर्शित होते हैं, इसका कारण यह है कि वे path का उपयोग करके तैयार नहीं हैं। सामान्य तौर पर, वेब के लिए वेक्टर छवियों की तैयारी और अनुकूलन बहुत अधिक बारीकियों के साथ एक व्यापक विषय है, एक अलग लेख के लिए ड्राइंग।

पथ तत्व के साथ आंदोलन

path की एक और बहुत उपयोगी विधि है - getPointAtLength (फ्लोट में दूरी) । यह आपको लाइन की शुरुआत से एक निश्चित दूरी पर स्थित बिंदु के निर्देशांक प्राप्त करने की अनुमति देता है। इसका उपयोग करके, आप लाइन के साथ किसी भी मार्कर के आंदोलन को लागू कर सकते हैं, और, महत्वपूर्ण रूप से, मौजूदा लाइन के स्पर्शरेखा की गणना करके चिकनी रोटेशन।


चलिए बिना लाइन के चलते हुए बस शुरू करते हैं।

 queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var path = svg.select("path#wiggle"), startPoint = pathStartPoint(path); var marker = svg.append("circle"); marker.attr("r", 7) .attr("transform", "translate(" + startPoint + ")"); transition(); //Get path start point for placing marker function pathStartPoint(path) { var d = path.attr("d"), dsplitted = d.split(" "); return dsplitted[1].split(","); } function transition() { marker.transition() .duration(7500) .attrTween("transform", translateAlong(path.node())) .each("end", transition);// infinite loop } function translateAlong(path) { var l = path.getTotalLength(); return function(i) { return function(t) { var p = path.getPointAtLength(t * l); return "translate(" + px + "," + py + ")";//Move marker } } } } 

यहां pathStartPoint(path) path तत्व के डी विशेषता से लाइन की शुरुआत के निर्देशांक खींचती है। TranslAlong translateAlong(path) हमारे मार्कर translateAlong(path) निर्देशांक एक इंटरपोलर का उपयोग करके सेट किए जाते हैं। एक उदाहरण यहां देखा जा सकता है: एसवीजी पथ तत्व के साथ 3 डी.जेएस के साथ मार्कर एनीमेशन आप लाइन ड्राइंग एनीमेशन और मार्कर आंदोलन को भी जोड़ सकते हैं, यह इस तरह दिख सकता है: एसवीजी पथ तत्व के साथ मार्कर एनीमेशन D3.js II ।

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

इंटरपोलर को परिभाषित करने वाला translateAlong(path) फ़ंक्शन इस तरह दिखेगा:

 function translateAlong(path) { var l = path.getTotalLength(); var t0 = 0; return function(i) { return function(t) { var p0 = path.getPointAtLength(t0 * l);//previous point var p = path.getPointAtLength(t * l);////current point var angle = Math.atan2(py - p0.y, px - p0.x) * 180 / Math.PI;//angle for tangent t0 = t; //Shifting center to center of rocket var centerX = px - 24, centerY = py - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12" +")"; } } } 

कार्यान्वयन यहां देखें: D3.js III के साथ SVG पथ तत्व के साथ मार्कर एनीमेशन ।

इसका उपयोग कहां और किस लिए किया जा सकता है

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

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

वह सब है। कोशिश करो, प्रयोग करो, सृजन करो - सब कुछ तुम्हारे हाथ में है। और इस साल आपका साथ अच्छा हो सकता है।

युपीडी:
इस विषय पर अधिक लेख:

• एसवीजी ड्राइंग एनीमेशन
• एसवीजी में एनिमेटेड लाइन ड्राइंग
• SVG के साथ एनिमेटिंग सेक्टर्स