Velocity (JavaScript library)
વેલોસિટી એ ક્રોસ-પ્લેટફોર્મ જાવાસ્ક્રિપ્ટ લાઇબ્રેરી છે જે વેબસાઇટ એનિમેશનના ક્લાયન્ટ-સાઇડ સ્ક્રિપ્ટીંગને સરળ બનાવવા માટે રચાયેલ છે. વેલોસિટી એ એમ. આઈ. ટી. લાઇસન્સ હેઠળ લાઇસન્સ ધરાવતું મફત, ઓપન સોર્સ સોફ્ટવેર છે. તે સૌથી લોકપ્રિય ઓપન સોર્સ વેબ એનિમેશન એન્જિન છે. વેલોસિટીનું વાક્યરચના એચટીએમએલ અને એસવીજી ઘટકો માટે જટિલ એનિમેશન બનાવવાનું સરળ બનાવવા માટે રચાયેલ છે. તેના વર્કફ્લો લાભો ઉપરાંત, વેલોસિટી એનિમેશન પ્રદર્શન પ્રદાન કરે છે જે CSS-આધારિત એનિમેશન સાથે સ્પર્ધાત્મક છે. વેગ એનિમેશન સ્થિતિઓના આંતરિક કેશને જાળવી રાખીને અને "લેઆઉટ થ્રેશિંગ" ને ઘટાડીને તેની કામગીરી હાંસલ કરે છે, જે અનિચ્છનીય વર્તન છે જે વેબ બ્રાઉઝર્સ ઝડપી દરે દૃષ્ટિની રીતે અપડેટ કરતી વખતે પસાર કરે છે. એકંદરે, તેના વર્કફ્લો અને પ્રદર્શન લાભો વેલોસિટીનો ઉપયોગ અત્યાધુનિક એનિમેશન પ્રોગ્રામિંગ માટે કરવાની મંજૂરી આપે છે જેને વેબ અને મોબાઇલ એપ્લિકેશન્સ બંનેમાં એકીકૃત કરી શકાય છે. તેનું વ્યાપક બ્રાઉઝર અને ઉપકરણ સમર્થન તેને મોટા એન્ટરપ્રાઇઝ વિતરણો માટે આદર્શ બનાવે છે જે ઓછા-સંચાલિત ઉપકરણોને સમર્થન આપે છે. વેલોસિટીનો ઉપયોગ ઉબેર, સેમસંગ, વોટ્સઅપ, ટમ્બલર, એચટીસી, મઝદા અને માઈક્રોસોફ્ટ વિન્ડોઝ સહિતની ઘણી નોંધપાત્ર વેબસાઇટ્સના વપરાશકર્તા ઇન્ટરફેસને શક્તિ આપવા માટે થાય છે. તે કોડ હોસ્ટિંગ સેવા GitHub પર સૌથી વધુ મનપસંદ પ્રોજેક્ટ્સમાંથી એક છે. 2015માં, ધ નેટ એવોર્ડ્સ દ્વારા વેલોસિટીને ઓપન સોર્સ પ્રોજેક્ટ ઓફ ધ યર માટે નામાંકિત કરવામાં આવી હતી. વેલોસિટીની વિશેષતાઓમાં નીચેનાનો સમાવેશ થાય છેઃ બ્રાઉઝર વિન્ડો અને એલિમેન્ટ સ્ક્રોલિંગ જેક્વેરી ફ્રેમવર્ક એનિમેશન રિવર્સલ (અગાઉના એનિમેશનને પૂર્વવત્ કરવાની ક્ષમતા) થી સ્વતંત્રતા અને એનિમેશન લૂપિંગ એસવીજી એલિમેન્ટ એનિમેશન આરજીબી અને હેક્સ કલર એનિમેશન સીએસએસની ટ્રાન્સફોર્મ પ્રોપર્ટી એનિમેશન વેલોસિટીના યુઆઈ પેક ફિઝિક્સ-આધારિત ગતિ દ્વારા પૂર્વ-સર્જિત એનિમેશન અસરો સ્પ્રિંગ ઇઝિંગ પ્રકાર દ્વારા એકીકરણ વચન બ્રાઉઝર સપોર્ટ વેલોસિટી તમામ મુખ્ય ડેસ્કટોપ બ્રાઉઝર્સ (ફાયરફોક્સ, ગૂગલ ક્રોમ અને સફારી) વત્તા આઇઓએસ અને એન્ડ્રોઇડ મોબાઇલ ઓપરેટિંગ સિસ્ટમ્સને સપોર્ટ કરે છે. તેનું સમર્થન ઇન્ટરનેટ એક્સપ્લોરર 8 અને એન્ડ્રોઇડ 2.3 સુધી વિસ્તરે છે. વેલોસિટી લાઇબ્રેરી એ એક જ જાવાસ્ક્રિપ્ટ ફાઇલ છે જે તેના તમામ મુખ્ય કાર્યો ધરાવે છે. તેને સ્થાનિક નકલ સાથે અથવા સાર્વજનિક સર્વરમાંથી ઉપલબ્ધ ઘણી નકલોમાંથી એક સાથે લિંક કરીને વેબ પૃષ્ઠમાં સામેલ કરી શકાય છે, જેમાં મેક્સસીડીએનની જેએસડેલીવર અથવા ક્લાઉડફ્લેયરની સીડીએનજેનો સમાવેશ થાય છે. <સ્ક્રિપ્ટ src = "velocity.min.js"> </સ્ક્રિપ્ટ> સામગ્રી વિતરણ નેટવર્કમાંથી સીધા જ વેગનો સમાવેશ કરવો પણ શક્ય છે. (અખંડિતતા લક્ષણનો ઉપયોગ સબસોર્સ અખંડિતતા માટે થાય છે.) સંસાધનો માટે હંમેશા HTTPS નો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છે પરંતુ પ્રોટોકોલ સંબંધિત URL નો ઉપયોગ કરવા માટે આને// સાથે બદલી શકાય છે. <સ્ક્રિપ્ટ src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" અખંડિતતા = "sha384-fcLDUAwcSMMfmpKMJ0dO2// SL2WJ5/kkyz/yvgtMLXBEp3GdqrQF9ahRerhdLXn +" ક્રોસઓરિજિન = "અનામી"> </સ્ક્રિપ્ટ> વપરાશ શૈલીઓ વેગમાં બે ઉપયોગ શૈલીઓ છેઃ $. વેલોસિટી કાર્ય, જે જેક્વેરી રુટ ઑબ્જેક્ટથી વિસ્તૃત ફેક્ટરી પદ્ધતિ છે. આ પદ્ધતિ જેક્વેરી-લપેટી ઘટકોને બદલે કાચા ડીઓએમ તત્વોને એનિમેટ કરે છે. પૃષ્ઠ પર જેક્વેરી વિના વેલોસિટીનો ઉપયોગ કરતી વખતે આ શૈલીનો ઉપયોગ થાય છે. $element.velocity () કાર્ય. જ્યારે પૃષ્ઠ પર જેક્વેરી હાજર હોય ત્યારે આ શૈલી જેક્વેરી એલિમેન્ટ ઓબ્જેક્ટ્સને એનિમેટ કરવા માટે વપરાય છે. વેલોસિટીમાં એનિમેશન કૉલ્સમાં એનિમેટ કરવા માટે ઇચ્છિત તત્વ (ઓ), એનિમેટેડ કરવાના CSS ગુણધર્મોને સ્પષ્ટ કરવા માટે એનિમેશન પ્રોપર્ટી મેપ અને એનિમેશન સેટિંગ્સને સ્પષ્ટ કરવા માટે વૈકલ્પિક વિકલ્પો ઓબ્જેક્ટ (દા. ત. એનિમેશન સેટિંગ્સ) નો સમાવેશ થાય છે. સમયગાળો). દલીલો વેગ એક અથવા વધુ દલીલો સ્વીકારે છે. પ્રથમ દલીલ, જે જરૂરી છે, તે પૂર્વવ્યાખ્યાયિત વેગ આદેશનું નામ હોઈ શકે છે (દા. ત. સ્ક્રોલ કરો અથવા રિવર્સ કરો) અથવા એનિમેટેડ થવા માટે CSS ગુણધર્મો ધરાવતી વસ્તુઃ// તત્વની પહોળાઈને 100 પીએક્સ અને તેની ડાબી મિલકતને 200 પીએક્સ $element.velocity ({પહોળાઈઃ "100 પીએક્સ", ડાબેઃ "200 પીએક્સ"}) પર એનિમેટ કરો; બીજી દલીલ, જે વૈકલ્પિક છે, તે ઑબ્જેક્ટ છે. તેનો ઉપયોગ એનિમેશન વિકલ્પોને સ્પષ્ટ કરવા માટે થાય છે જેમ કે સમયગાળો, સરળતા અને પૂર્ણ (એનિમેશન પૂર્ણ થયા પછી ચલાવવા માટે એક મનસ્વી કાર્ય):// 100s વિલંબ માટે થોભાવ્યા પછી 1000ms સમયગાળામાં તત્વની પહોળાઈને 100px સુધી એનિમેટ કરો. $element.velocity ({પહોળાઈઃ "100px"}, {સમયગાળોઃ 1000, વિલંબઃ 100}); ચેઇનિંગ વેલોસિટીમાં સતત એનિમેશન કૉલ્સની શ્રેણી બનાવવી જેમાં લક્ષ્ય જેક્વેરી એલિમેન્ટ ઓબ્જેક્ટ પર વેગ () કોલ્સ બેક-ટુ-બેક મૂકવાનો સમાવેશ થાય છેઃ $એલિમેન્ટ. વેગ ({ઊંચાઈઃ 300}, {સમયગાળોઃ 1000})// અગાઉના એનિમેશન પૂર્ણ થયા પછી આ એનિમેશન પર ચાલુ રાખો. વેગ ({ટોચઃ 200}, {સમયગાળોઃ 600})// અને ફરી એકવાર. વેગ ({અપારદર્શકતાઃ 0}, {સમયગાળોઃ 200}); સ્ક્રોલિંગ અને રિવર્સલ સ્ક્રોલિંગ ઇન વેલોસિટીમાં "સ્ક્રોલ" ને વેગ તરીકે પસાર કરવાનો સમાવેશ થાય છે. વેલોસિટીમાં એનિમેશન રિવર્સલમાં વેલોસિટીની પ્રથમ દલીલ તરીકે "રિવર્સ" માં પસાર થવાનો સમાવેશ થાય છેઃ// એલિમેન્ટની ઊંચાઈને એનિમેટ કરો $element.velocity ({ઊંચાઈઃ "500px"}, {સમયગાળોઃ 500});// અગાઉના એનિમેશનને રિવર્સ કરો; અગાઉના સમયગાળાનો ઉપયોગ કરીને એલિમેન્ટની મૂળ ઊંચાઈ પર પાછા એનિમેટ કરો $element.velocity ("રિવર્સ"); વેલોસિટીનો રિવર્સ કમાન્ડ અગાઉના કોલમાં ઉપયોગમાં લેવાતા એનિમેશન વિકલ્પોને ડિફોલ્ટ કરે છે. નવા ઓબ્જેક્ટ ઓબ્જેક્ટમાં પાસ થવાથી અગાઉના ઓબ્જેક્ટને લંબાવવામાં આવે છેઃ $element.velocity ({ઊંચાઈઃ "500x"}, {સમયગાળોઃ 500});// અગાઉના રિવર્સ કોલના ઓબ્જેક્ટ ઓબ્જેક્ટ ઓબ્જેક્ટને નવા સમયગાળાના મૂલ્ય $element.velocity ("રિવર્સ", {સમયગાળોઃ 1000}) સાથે વિસ્તૃત કરો; પર્ફોર્મન્ટ અને ડિઝાઇનર-ઓરિએન્ટેડ જાવાસ્ક્રિપ્ટ એનિમેશન લાઇબ્રેરીઓના અભાવને સંબોધવા માટે જુલિયન શાપિરો દ્વારા હિસ્ટ્રી વેલોસિટી વિકસાવવામાં આવી હતી. સ્ટ્રીપ, એક લોકપ્રિય વેબ ડેવલપર-કેન્દ્રિત ઈન્ટરનેટ ટેકનોલોજી કંપની છે, જેણે વેલોસિટી પર પૂર્ણ-સમયના વિકાસને ચાલુ રાખવા માટે જરૂરી નાણાકીય સંસાધનો પ્રદાન કરવામાં મદદ કરવા માટે અનુદાન પર શાપિરોને પ્રાયોજિત કર્યું છે. વેલોસિટીના આંતરિક એનિમેશન એન્જિનના ઉચ્ચ પ્રદર્શનથી જાવાસ્ક્રિપ્ટ-આધારિત વેબ એનિમેશનને ફરીથી લોકપ્રિય બનાવવામાં મદદ મળી, જે અગાઉ જૂની જાવાસ્ક્રિપ્ટ લાઈબ્રેરીઓ પર તેના ઝડપ લાભોને કારણે સીએસએસ-આધારિત એનિમેશનની તરફેણમાંથી બહાર નીકળી ગયું હતું, જેમાં એનિમેશન પર ધ્યાન કેન્દ્રિત કરવામાં આવ્યું ન હતું. સપ્ટેમ્બર 2014 માં, શાપિરોએ વેલોસિટી મોશન ડિઝાઇનર રજૂ કર્યું, જે જીવંત ઉત્પાદન વેબસાઇટ્સ પર એનિમેશન ડિઝાઇન કરવા માટેનું એક સાધન છે જે IDE ની અંદર અનુગામી ઉપયોગ માટે જનરેટેડ એનિમેશન કોડની રીઅલ-ટાઇમ નિકાસ માટે મંજૂરી આપે છે. માર્ચ 2015 માં, પીચપિટે જાવાસ્ક્રિપ્ટ પુસ્તકનો ઉપયોગ કરીને શાપિરોનું વેબ એનિમેશન પ્રકાશિત કર્યું, જે વેલોસિટીનો ઉપયોગ કરીને વેબ એનિમેશન વિકસાવવાના શરૂઆત અને અદ્યતન સિદ્ધાંતો બંને શીખવે છે. 2015ના મધ્ય સુધીમાં, વેગનો વિકાસ અને જાળવણી ફક્ત શાપિરો દ્વારા જ કરવામાં આવી રહી છે. વ્યાવસાયિક એન્ટરપ્રાઇઝ વાતાવરણમાં વેલોસિટીના ઉપયોગ ઉપરાંત, તેનો વ્યાપકપણે વેબ વિકાસ પ્રયોગો અને શિખાઉ માણસની પ્રેક્ટિસ માટે પણ ઉપયોગ થાય છે. વેલોસિટીની ટોચ પર બનેલા પ્રૂફ-ઓફ-કન્સેપ્ટ વેબ ડેવલપમેન્ટ પ્રોજેક્ટ્સ સામાન્ય રીતે કોડપેન (ઉદાહરણ તરીકે) પર પોસ્ટ કરવામાં આવે છે, જે અગ્રણી કોમ્યુનિટી કોડ શેરિંગ સર્વિસ છે. આ પણ જુઓ D3.js રાફેલ Three.js જેક્વેરી જાવાસ્ક્રિપ્ટ માળખું જાવાસ્ક્રિપ્ટ લાઈબ્રેરી વધુ વાંચન જેક્વેરી વિના એનિમેશન કેવી રીતે વેલોસિટીનો ઉપયોગ કરવો એનિમેશન સરળતાથી ઉમેરવા માટે ઝડપી UI એનિમેશન Velocity.js બાહ્ય લિંક્સ વેલોસિટી ડેમો ગેલેરી સંદર્ભો જાવાસ્ક્રિપ્ટ લાઈબ્રેરીઓ એમઆઇટી લાઇસન્સ 2014 સોફ્ટવેરનો ઉપયોગ કરીને જાવાસ્ક્રિપ્ટ એજેક્સ (પ્રોગ્રામિંગ) સોફ્ટવેરમાં પ્રોગ્રામ કરેલ મફત સોફ્ટવેર