जीवित कैसे बने थे?

http://livicons.com/जीवित कैसे बने थे?

मुझे आश्चर्य है कि कोई भी मुझे इन आइकनों को कैसे बनाया गया था, इस पर मूलभूत ब्रेक दे सकता है। मुझे लगता है कि वे एसवीजी हैं और राफेल जेएस के साथ एनिमेटेड हैं, लेकिन कैनवास पर खींचे गए प्रत्येक आइकन हैं? या आइकन वास्तविक svg फ़ाइल हैं जो रैपिला.जेएस के साथ स्वतंत्र रूप से एनिमेटेड हैं?

मेरे पास एक आइकन है जिसका मैं स्वयं का उपयोग करना चाहता हूं, और देखें कि क्या मैं इसे उन आइकनों के समान अपना रास्ता एनिमेट कर सकता हूं। क्या इस तकनीक के बारे में किसी के पास कोई विचार या ट्यूटोरियल है? मैं राफेल जेएस के माध्यम से पढ़ रहा हूं लेकिन ऐसा लगता है कि यह मुख्य रूप से एसवीजी ड्राइंग करने और फिर इसे एनिमेट करने के लिए है, इसलिए मैं 100% नहीं हूं।

मैं भी निरीक्षक के माध्यम से पढ़ने की कोशिश कर रहा है, लेकिन मैं वास्तव में क्या नहीं समझ सकता प्रत्येक एनीमेशन कर रहा है (यह कैसे जान लेता है कि आइकन का कौन सा हिस्सा आदि? हेरफेर करने के लिए)

धन्यवाद किसी को!

स्रोत

2013-07-26 EHerman

मैं डी, LivIcons 'लेखक हूँ। बस मेरी साइट के आंकड़ों पर स्टैक ओवरफ्लो से यातायात देखा :)

उत्तर दिया गया है, लेकिन फिर भी, मैं एक संक्षिप्त स्पष्टीकरण देने की कोशिश करूंगा कि मैंने LivIcons कैसे बनाया।

सभी जादू राफेल जेएस lib (दिमित्री बरानोवस्कीय के लिए विशेष धन्यवाद) में है।

ये आइकन हमेशा एसवीजी नहीं होते हैं, वे आईई 6-आईई 8 में वीएमएल हैं।
पहला चरण एसवीजी फ़ाइल को किसी भी वेक्टर सॉफ़्टवेयर में किसी आइकन के प्रत्येक आकार के लिए पथ (एस) के साथ बना रहा है जैसे पूर्व के लिए। एडोब इलस्ट्रेटर।
यदि एनीमेशन सरल नहीं होगा (घुमाएं, स्थानांतरित करें या स्केल करें) तो आपको प्रत्येक फ्रेम के लिए अतिरिक्त पथ बनाने की आवश्यकता है। तो आपकी एनीमेशन इन फ्रेमों से शुरुआत से अंत तक जायेगी।
इसके बाद आप अपनी स्क्रिप्ट के लिए इन पथों के मूल्य लेते हैं।
एक फ़ंक्शन में राफेलज की सहायता से आप आइकन के लिए प्रारंभिक स्थिति बनाते हैं - Paper.path ([pathString]) विधि, और Element.animate (...) विधि के साथ इन पथों को एनिमेट करें। यह फ़ंक्शन होवर पर होवर या ईवेंट को बदलने और रंग बदलने पर भी होवर करता है।

तो यह एक बहुत ही कम गाइड है। मैं 4 महीने के दौरान पहले 303 आइकनों पर काम कर रहा हूं। यदि आपके पास समय और आकांक्षा है तो आप भी कोशिश कर सकते हैं।

शुभकामनाएँ और शुभकामनाएं!

डी

स्रोत

2013-07-26 19:39:01 DeeThemes

वे एसवीजी (वेक्टर) जावास्क्रिप्ट का उपयोग कर तत्वों एनिमेट और घटना मंडराना .. के बारे में यह here

उदाहरण पढ़ा जाता है:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;"> 
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc> 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> 
    <path fill="#000000" stroke="none" d="M25.59,13.368C25.814,13.598,26,13.52,26,13.197V6.584C26,6.262,25.738,6,25.416,6H18.803C18.481,6,18.403000000000002,6.186,18.633,6.41L21.227,9.004L15.999,14.231L10.774000000000001,9.006L13.369000000000002,6.41C13.598,6.185,13.52,6,13.198,6H6.584C6.262,6,6,6.262,6,6.584V13.198C6,13.519,6.185,13.597000000000001,6.411,13.369L9.007,10.774L14.232,15.998999999999999L9.004999999999999,21.226999999999997L6.41,18.633C6.186,18.402,6,18.48,6,18.803V25.416C6,25.738,6.262,26,6.584,26H13.197C13.518999999999998,26,13.597,25.816,13.367999999999999,25.59L10.771999999999998,22.994L15.998999999999999,17.766L21.226999999999997,22.994L18.632999999999996,25.59C18.402999999999995,25.815,18.480999999999995,26,18.802999999999997,26H25.415999999999997C25.738,26,26,25.738,26,25.416V18.803C26,18.481,25.814,18.403000000000002,25.59,18.633L22.994,21.227L17.766,15.999L22.994,10.772L25.59,13.368Z" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> 
    <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect> 
</svg>

स्रोत

2013-07-26 17:44:21

हे सहायक टिप्पणी के लिए धन्यवाद। मैं इसे पढ़ रहा हूं, बहुत जटिल लगता है। मुझे इसे एक भंवर देना होगा और देखें कि मैं किसके साथ आ सकता हूं। मैं किसी भी चीज़ से अपने ज्ञान के लिए और जानना चाहता हूं। जितना अधिक आप बेहतर जानते हैं! एक बार फिर धन्यवाद! – EHerman

जीवित कैसे बने थे?

उत्तर

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