Hız (JavaScript kitaplığı) - Velocity (JavaScript library)

Hız
Orijinal yazar (lar)Julian Shapiro
Kararlı sürüm
1.4.3[1] / 16 Şubat 2017[2]
Depo
Bunu Vikiveri'de düzenleyin
YazılmışJavaScript
İşletim sistemiÇapraz platform
PlatformGörmek Tarayıcı desteği
TürJavaScript kitaplığı, animasyon
LisansMIT[3]
İnternet sitesivelocityjs.org

Hız bir çapraz platform JavaScript kitaplığı basitleştirmek için tasarlanmış istemci tarafı komut dosyası web sitesi animasyonu.[4] Hız ücretsiz, açık kaynak altında lisanslı yazılım MIT Lisansı.[3] En popüler açık kaynaklı web animasyon motorudur.[5]

Velocity'nin sözdizimi, karmaşık animasyonlar oluşturmayı kolaylaştırmak için tasarlanmıştır. HTML ve SVG elementler.[6] Velocity, iş akışı avantajlarına ek olarak, rekabet gücü yüksek animasyon performansı sağlar. CSS tabanlı animasyon.[7] Velocity, performansına dahili bir animasyon durumları önbelleğini koruyarak ve "düzeni" en aza indirerek ulaşır ezici, "istenmeyen davranış internet tarayıcıları hızlı bir şekilde görsel olarak güncellenirken geçirilir.[7] Hepsi birlikte, iş akışı ve performans avantajları, Velocity'nin hem web hem de mobil uygulamalara entegre edilebilen sofistike animasyon programlaması için kullanılmasına izin verir.[8] Geniş tarayıcı ve cihaz desteği, onu düşük güçlü cihazları desteklemesi gereken büyük kurumsal dağıtımlar için ideal hale getirir.[9]

Hız, birçok önemli web sitesinin kullanıcı arayüzlerini güçlendirmek için kullanılır. Uber, Samsung, Naber, Tumblr, HTC, Mazda, ve Microsoft Windows.[10] Kod barındırma hizmetinde en çok tercih edilen projelerden biridir GitHub.[11] 2015 yılında Velocity, Yılın Açık Kaynak Projesi tarafından Net Ödüller.[12]

Özellikleri

Velocity'nin özellikleri şunları içerir:[4]

  • Tarayıcı penceresi ve öğe kaydırma
  • Bağımsızlık jQuery çerçeve[13]
  • Animasyonu ters çevirme (önceki animasyonu geri alma yeteneği) ve animasyon döngüsü
  • SVG öğe animasyonu[14]
  • RGB ve altıgen renkli animasyon
  • CSS 's dönüştürmek mülkiyet animasyonu
  • Velocity ile önceden oluşturulmuş animasyon efektleri UI Paketi[15]
  • Aracılığıyla fiziğe dayalı hareket ilkbahar hareket hızı türü
  • Sözler entegrasyon

Tarayıcı desteği

Velocity, tüm büyük masaüstü tarayıcılarını destekler (Firefox, Google Chrome, ve Safari ) artı iOS ve Android mobil işletim sistemleri. Desteği, Internet Explorer 8 ve Android 2.3.[16]

Kullanım

Kütüphane dahil

Velocity kitaplığı, tüm temel işlevlerini içeren tek bir JavaScript dosyasıdır. Yerel bir kopyaya veya genel sunucularda bulunan birçok kopyadan birine bağlanarak bir web sayfasına dahil edilebilir. MaxCDN 's jsDelivr veya Cloudflare 's cdnjs.

<senaryo src="velocity.min.js"></senaryo>

Velocity'i doğrudan içerik dağıtım ağlarından dahil etmek de mümkündür. (Bütünlük özniteliği, Alt Kaynak Bütünlüğü Her zaman kullanılması tavsiye edilir. HTTPS kaynaklar için ancak bu ile değiştirilebilir // faydalanmak protokole bağlı URL'ler.

<senaryo src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js" bütünlük="sha256-NtPQd / Jy7Ze2E72YS8WJDGMu6xFYomLYibE0hpyLTjs =" çaprazlama="anonim"></senaryo>

Kullanım stilleri

Velocity'nin iki kullanım stili vardır:

  • $ .Velocity bir işlev olan fabrika yöntemi uzatılmış jQuery kök nesne. Bu yöntem ham canlandırır DOM yerine elemanlar jQuery sarılmış elemanlar. Bu, sayfada jQuery olmadan Velocity kullanıldığında uygulanan stildir.
  • $ element.velocity () işlevi. Bu, jQuery olduğunda jQuery öğesi nesnelerine animasyon uygulamak için kullanılan stildir. dır-dir sayfada mevcut.

Velocity'deki animasyon çağrıları, canlandırmak için istenen öğelerin sağlanmasından oluşur. animasyon özellik haritası belirtmek için CSS canlandırılacak özellikler ve isteğe bağlı seçenekler nesnesi animasyon ayarlarını belirtmek için (ör. süresi).

Argümanlar

Hız, bir veya daha fazla argümanı kabul eder. Gerekli olan ilk argüman önceden tanımlanmış bir Hız komutunun adı olabilir (ör. kaydırma veya tersine çevirmek) veya canlandırılacak CSS özelliklerinden oluşan bir nesne:

// Bir öğenin genişliğini 100 piksele ve sol özelliğini 200 piksele canlandırın$ element.hız({ Genişlik: "100 piksel", ayrıldı: "200 piksel" });

İsteğe bağlı olan ikinci argüman bir nesnedir. Gibi animasyon seçeneklerini belirtmek için kullanılır. süresi, hafifletme, ve tamamlayınız (animasyon tamamlandıktan sonra yürütülecek rastgele bir işlev):

// Bir öğenin genişliğini 100 saniyelik bir gecikme için duraklattıktan sonra 1000 ms'lik bir sürede 100 piksel olacak şekilde canlandırın.$ element.hız({ Genişlik: "100 piksel" }, { süresi: 1000, gecikme: 100 });

Zincirleme

Velocity'de bir dizi ardışık animasyon çağrısı oluşturmak, hız () Hedefi arka arkaya çağırır jQuery öğe nesnesi:

$ element    .hız({ yükseklik: 300 }, { süresi: 1000 })    // Bir önceki tamamlandığında bu animasyona devam edin    .hız({ üst: 200 }, { süresi: 600 })   // Ve bir kez daha ...    .hız({ opaklık: 0 }, { süresi: 200 });

Kaydırma ve ters çevirme

Hız içinde kaydırma, içeri girmekten ibarettir "kaydırma" Velocity'nin ilk argümanı olarak - tipik CSS özellikleri haritası yerine:

// 750 ms süreli kaydırma$ element.hız("kaydırma", { süresi: 750 });

Tarayıcı daha sonra Velocity'nin çağrıldığı öğenin üst kenarına doğru aşağı kaydıracaktır.

Velocity'de animasyonun tersine çevrilmesi, geçişten oluşur "tersine çevirmek" Velocity'nin ilk argümanı olarak:

// Bir öğenin yüksekliğini canlandırma$ element.hız({ yükseklik: "500 piksel" }, { süresi: 500 });// Önceki animasyonu tersine çevirin; önceki süreyi kullanarak öğenin orijinal yüksekliğine geri dönün$ element.hız("tersine çevirmek");

Hız tersine çevirmek komut varsayılan olarak önceki çağrıda kullanılan animasyon seçenekleridir. Yeni bir options nesnesine geçmek bir öncekini genişletir:

$ element.hız({ yükseklik: "500 piksel" }, { süresi: 500 });// Önceki ters çağrının options nesnesini yeni bir süre değeriyle genişlet$ element.hız("tersine çevirmek", { süresi: 1000 });

Tarih

Hız, performans ve tasarımcı odaklılık eksikliğini gidermek için Julian Shapiro tarafından geliştirildi JavaScript animasyon kitaplıkları.[17][18] Şerit, popüler web geliştiricisi odaklı internet teknolojisi şirket, Velocity üzerinde tam zamanlı geliştirmeye devam etmek için gerekli mali kaynakları sağlamaya yardımcı olmak için Shapiro'ya sponsor oldu.[19]

Velocity'nin dahili animasyon motorunun yüksek performansı, önceden gözden düşmüş olan JavaScript tabanlı web animasyonunu yeniden popüler hale getirmeye yardımcı oldu. CSS animasyona odaklanmayan eski JavaScript kitaplıklarına göre hız avantajları nedeniyle tabanlı animasyon.[20]

Eylül 2014'te Shapiro piyasaya çıktı Velocity Motion Designer, canlı prodüksiyon web sitelerinde animasyonlar tasarlamak için, oluşturulan animasyon kodunun daha sonra bir IDE.[21] Mart 2015'te, Peachpit Shapiro'nun JavaScript kullanan Web Animasyonu Velocity kullanarak web animasyonları geliştirmenin hem başlangıcını hem de gelişmiş ilkelerini öğreten kitap.[22] 2015 ortasından itibaren Velocity, yalnızca Shapiro tarafından geliştirilmeye ve korunmaya devam etmektedir.[23]

Velocity'nin profesyonel kurumsal ortamlarda kullanımına ek olarak, aynı zamanda web Geliştirme deneme ve başlangıç ​​alıştırması. Velocity üzerine inşa edilen kavram kanıtı web geliştirme projeleri genellikle CodePen (misal ), önde gelen bir topluluk kodu paylaşım hizmeti.

Ayrıca bakınız

daha fazla okuma

Dış bağlantılar

Referanslar

  1. ^ julianshapiro. "velocity / README.md at master · julianshapiro / velocity · GitHub". Github.com. Alındı 2017-03-17.
  2. ^ "Package.json için geçmiş - julianshapiro / velocity · GitHub". Github.com. Alındı 2017-03-17.
  3. ^ a b julianshapiro (2014-10-09). "velocity / LICENSE.md at master · julianshapiro / velocity · GitHub". Github.com. Alındı 2016-01-20.
  4. ^ a b http://davidwalsh.name/intro-javascript-animation
  5. ^ "Açık Kaynak Teknolojilerinin Başlıca Katılımcısı Julian Shapiro, SAAS Kullanımında Perdeleri Geri Çekiyor". Forbes.com. Alındı 2016-01-20.
  6. ^ "Tasarımcılar için Velocity.js". Stüdyo Wolf. Alındı 2016-01-20.
  7. ^ a b http://davidwalsh.name/css-js-animation
  8. ^ "Hız, JavaScript Kitaplıklarının Güç Merkezi".
  9. ^ Julian Shapiro (2014-06-16). "Velocity.js Kullanarak İnanılmaz Hızlı UI Animasyonu". Sitepoint.com. Alındı 2016-01-20.
  10. ^ http://libscore.com/#$.Velocity
  11. ^ "Ara · yıldızlar:> 1 · GitHub". Github.com. Alındı 2016-01-20.
  12. ^ "Kısa Liste The Net Awards 2015 Web tasarımı ve geliştirmede en iyileri kutluyoruz". Thenetawards.com. Alındı 2016-01-20.
  13. ^ "JQuery Olmadan Animasyon - Smashing Magazine". Smashingmagazine.com. 2014-09-04. Alındı 2016-01-20.
  14. ^ http://davidwalsh.name/svg-animation
  15. ^ "Uygulama benzeri hareket efektleri uygulamak için Velocity.js kullanın | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21. Alındı 2016-01-20.
  16. ^ "Velocity.js". Julian.com. Alındı 2016-01-20.
  17. ^ Takım, Awwwards. "Julian Shapiro ile Röportaj". Awwwards.com. Alındı 2016-01-20.
  18. ^ Shapiro, Julian (2014-05-21). "Açık Kaynağı Bir Başlangıç ​​Gibi Değerlendirin ★ Mozilla Hacks - Web geliştirici blogu". Hacks.mozilla.org. Alındı 2016-01-20.
  19. ^ Greg Brockman (2014-06-06). "Açık Kaynak Geri Çekilme hakkı sahipleri". Stripe.com. Alındı 2016-01-20.
  20. ^ Aurelio De Rosa (2014-06-23). "JQuery Animasyonlarını Kolayca İyileştirme". Sitepoint.com. Alındı 2016-01-20.
  21. ^ Bu videoyu remiksleyin (2014-09-06). "Velocity Motion Designer: Genel Bakış". Youtube. Alındı 2016-01-20.
  22. ^ [kaynak belirtilmeli ]
  23. ^ https://github.com/julianshapiro/velocity/graphs/contributors