Mo.JS ile Güzel Kodlu Web Animasyonları Nasıl Yapılır

Kendi web sitenizi başlatmak istiyorsanız, güzel görünen animasyonlar onu parlatabilir. Bunu başarmak için, mevcut bir filmden bir animasyonlu GIF yapmaktan, Blender veya Maya gibi bir yazılımla sıfırdan bir şeyler yapmayı öğrenmeye kadar birçok yol var..

Programlı olarak animasyonlar oluşturmak için kütüphaneler de vardır. Tarihsel olarak, web kodlayıcıları basit animasyonlar oluşturmak için jQuery kullandılar, ancak web geliştirildi ve HTML5 yeni standart haline geldiğinde, taze seçenekler ortaya çıktı. Yeni çerçevede CSS kitaplıkları, tarayıcıda özellikle vektör animasyonları için tasarlanmış JavaScript kitaplıklarının yanı sıra inanılmaz derecede güçlendi..

Bugün, koddan güzel görüntüler oluşturmak için bloktaki en yeni çocuklardan biri olan mo.js'ye bakacağız. Güzel desenler oluşturan kullanıcı reaktif bir animasyon serisi oluşturmadan önce birkaç temel işlevi ele alacağız..

Mo.js adresini girin

Mo.js, web için kolaylıkla hareketli grafikler oluşturmak için bir kütüphanedir. Usta programcıların hiç bilmedikleri sanatsal bir tarafı keşfetmelerine izin verirken, kod meraklısı olmayanlar için güzel şeyler yaratmayı basitleştirmek için tasarlanmıştır. Adından da anlaşılacağı gibi, popüler JavaScript programlama diline dayanıyor, ancak herkesin temel bilgileri kolayca alabileceği şekilde uygulanıyor.

Daha ileri gitmeden önce, bugün ne yaratacağımıza bir göz atalım:

Bugünün projesi için CodePen'i kullanacağız, çünkü aynı tarayıcı penceresinde her şey üzerinde çalışmamızı sağlıyor. İsterseniz, tercih ettiğiniz bir editörde çalışabilirsiniz. Eğer adım adım öğreticiyi atlamak istiyorsanız, kodun tamamı burada.

Yeni bir Kalem ayarlayın; bu ekran ile karşılaşacaksınız:

Başlamadan önce, birkaç değişiklik yapmanız gerekecek. Tıkla Ayarlar sağ üst köşedeki simgeye gidin ve JavaScript çıkıntı.

Kullanacağız Babil bizim kod ön işlemcisi olarak, aşağı açılır menüden bunu seçin. Babel, ECMAScript 6 ES6 Nedir ve Javascript Programcılarının ES6 Nedir ve ES6 Nedir? ES6 Nedir? ES6 Nedir? EC6 Script (Javascript) programlama dilinin 6. sürümünü belirtir. Şimdi ES6'nın JavaScript'e getirdiği bazı önemli değişikliklere bakalım. eski tarayıcılar için destek. Bunun ne anlama geldiğini bilmiyorsanız, endişelenme, sadece burada hayatımızı biraz daha kolaylaştıracak.

Ayrıca mo.js kütüphanesini projeye aktarmamız gerekiyor. Bunu arayarak yapın. mo.js içinde Harici Script / Kalem Ekleme metin istemi ve seçilmesi.

Bu iki şey yerinde olduğunda, Kaydet ve kapat. Başlamaya hazırız!

Mo.js ile Temel Şekiller

Grafiklere başlamadan önce, görünüm panelinde bu beyaz arka plandaki kör edici arka plan hakkında bir şeyler yapalım. Arka plan rengi özelliğini, kodu bu koda yazarak değiştirin. CSS levha.

gövde background: rgba (11,11,11,1); 

Bir şekil oluşturmak basit bir işlemdir ve arkasındaki kavram tüm kütüphaneyi yönlendirir. Varsayılan bir daire şekli ayarlayalım. Bu kodu şuraya girin: JS bölmesi:

const redCirc = yeni mojs.Shape (isShowStart: true);

İşte, biz yarattık const isimdeki değer redCirc ve a yeni mojs.Shape. Kodlama konusunda tamamen yeniyseniz, burada parantez siparişine dikkat edin ve sonunda noktalı virgül unutmayın.!

Şimdiye kadar biz dışında hiçbir parametre geçtik isShowStart: true, yani herhangi bir hareket atamadan önce ekranda görünecek. Ekranın ortasına pembe bir daire yerleştirdiğini göreceksiniz:

Bu çevre varsayılan şekil mo.js. için Kodumuza bir satır ekleyerek bu şekli kolayca değiştirebiliriz:

const redCirc = yeni mojs.Shape (isShowStart: true, shape: 'rect');

Bir nesneye daha fazla özellik eklemek için onu ayırmak için virgül kullanırız. İşte, ekledik şekil özelliği ve bir 'Rect'. Kaleminizi kaydedin; varsayılan şeklin kare şeklinde değiştiğini göreceksiniz..

Bu değerleri değerlere geçirme işlemi şekil Nesne onları nasıl özelleştireceğimizdir. Şu anda pek fazla bir şey yapmayan bir karemiz var. Bir şey canlandırmayı deneyelim.

Hareketin Temelleri

Biraz daha etkileyici görünen bir şey elde etmek için etrafında kırmızı bir vuruşla ve içinde dolgu olmadan bir daire oluşturalım..

const redCirc = yeni mojs.Shape (isShowStart: true, stroke: 'kırmızı', strokeWidth: 5, doldur: 'none', yarıçap: 15);

Gördüğünüz gibi biz de bir Genişlik İnme için değer ve yarıçap daire için. İşler şimdiden biraz farklı görünmeye başladı. Şekliniz güncellenmiyorsa, çevresinde virgül veya tek tırnak işareti kaçırmadığınızdan emin olun. 'kırmızı' veya 'Yok', ve tıkladığınızdan emin olun kayıt etmek sayfanın üstünde.

Buna bir animasyon ekleyelim. Yukarıdaki örnekte, bu kırmızı daire, kullanıcının dışa doğru gitmeden önce tıkladığı yerde belirir. Bunu başarabilmemizin bir yolu zamanla yarıçapı ve opaklığı değiştirmektir. Kodu değiştirelim:

 yarıçap: 15:30, opaklık: 1: 0, süre: 1000

Değiştirerek yarıçap özellik ve ekleme opaklık ve süre özellikleri, zaman içinde gerçekleştirilmesi için şekil talimatlarını verdik. Bunlar Delta nesneler, bu özellikler için başlangıç ​​ve bitiş bilgilerini tutar..

Henüz hiçbir şeyin olmadığını fark edeceksiniz. Bunun nedeni biz eklemedik. .oyun() talimatlarımızı yerine getirmesini söyleme işlevi. Uç parantez ile noktalı virgül arasına ekleyin ve dairenizin canlandığını görmelisiniz..

Şimdi bir yerlere geliyoruz, ancak bunu gerçekten özel kılmak için, biraz daha ayrıntılı olasılıklara bakalım..

Mo.js ile Sipariş Verme ve Kolaylaştırma

Şu anda, daire göründüğü anda solmaya başlar. Bu mükemmel bir şekilde işe yarayacak, ancak biraz daha fazla kontrole sahip olmak güzel olurdu.

Bunu yapabiliriz. .sonra() işlevi. Yarıçap veya opaklık değişikliğimizden ziyade, belirli bir süre sonra değişmeden önce şeklimizi başladığı yerde bırakalım.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, dolgu: 'none', yarıçap: 15, süre: 1000). sonra (// burada daha fazla iş yapın) .oyun();

Şimdi, şeklimiz atadığımız değerlerle görünecek, içine koyduğumuz herhangi bir şeyi yapmadan önce 1000 ms bekleyin. .sonra() işlevi. Parantez arasına bazı talimatlar ekleyelim:

 // burada başka şeyler yapın inme Genişliği: 0, ölçek: 1: 2, hareket hızı: 'sin.in', süre: 500

Bu kod, animasyonun başka bir önemli bölümünü tanıtır. Biz nereye talimat verdik ölçek 1'den 2'ye değiştirmek için, aynı zamanda hareket hızına dayalı sinüs dalgası atadık. sin.in. Mo.js, gelişmiş kullanıcıların kendi ekleyebilme yetenekleri ile yerleşik olarak çeşitli hareket hızı eğrilerine sahiptir. Bu durumda, zaman içindeki ölçek yukarı doğru kıvrılan sinüs dalgasına göre gerçekleşir..

Farklı eğrilerin görsel akışını görmek için easings.net adresini ziyaret edin. Bunu birleştirmek Darbe genişliği ayarlanan süremiz boyunca 0 olarak değiştirilir ve çok daha dinamik bir kaybolan etkiniz olur.

Şekiller, Mo.js'deki her şeyin temelidir, ancak bunlar yalnızca hikayenin başlangıcıdır. Şuna bakalım patlamaları.

Mo.js’de Potansiyel ile patlama

bir Patlamak Mo.js'de merkezi bir noktadan çıkan şekiller topluluğudur. Bunları bitmiş animasyonumuzun temeli haline getireceğiz. Varsayılan bir veri bloğu bir şekil yaptığınız gibi çağırabilirsiniz. Bazı kıvılcım yapalım:

const sparks = yeni mojs.Burst (). play ();

Boş bırakarak görebilirsiniz. Patlamak itiraz edip oynamasını söyleyerek varsayılan patlama efektini elde ederiz. Patlamanın boyutunu ve dönüşünü etkileyebiliriz. yarıçap ve açı özellikleri:

const sparks = new mojs.Burst (radius: 0:30, hareket hızı: 'cubic.out', açı: 0: 90, hareket hızı: 'quad.out',). play ();

Zaten, özel bir yarıçap ekledik ve seri çekimimize dönmeye başladık:

Kıvılcım gibi görünmelerini sağlamak için, çoğuşmanın kullandığı şekilleri ve çoğuşmanın oluşturduğu şekilleri değiştirelim. Bunu, patlamanın çocuklarının özelliklerini ele alarak yapıyorsunuz..

const sparks = yeni mojs.Burst (radius: 0:30, hareket hızı: 'cubic.out', açı: 0: 90, hareket hızı: 'quad.out', sayı: 50, çocuklar: şekil: 'çapraz', vuruş: 'beyaz', puan: 12, yarıçap: 10, dolgu: 'yok', açı: 0: 360, süre: 300).

Alt özelliklerin, daha önce çalıştığımız şekil özellikleriyle aynı olduğunu fark edeceksiniz. Bu sefer şekil olarak bir haç seçtik. Bu şekillerin 50 tanesi şimdi aynı özelliklere sahip. Oldukça iyi görünmeye başladı! Bu, kullanıcının fareyi tıkladığında göreceği ilk şeydir.

Zaten ilk başımızın kırmızı vuruşunu görebiliriz. redCirc şekli çok uzun kalıyor. Her iki animasyonun birbirine uyması için süresini değiştirmeyi deneyin. Bunun gibi bir şeye bakmalı:

Animasyonumuzla işimiz bitmedi, ancak kullanıcı tarafından reaktif hale gelmesi için bir dakikanızı ayıralım.

Ana olay

Animasyonlarımızı kullanıcının tıkladığı konumda tetiklemek için bir olay işleyici kullanacağız. Kod bloğunuzun sonuna şunu ekleyin:

document.addEventListener ('click', işlev (e) );

Bu kod parçası, fare tıklamaları için dinler ve parantez içinde ne talimatlar olursa olsun bizim için yapar. Ekleyebiliriz redCirc ve kıvılcımlar bu dinleyiciye nesneler.

document.addEventListener ('klik', işlev (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); kıvılcım .tune (x: e.pageX, y: e.sayfaY) .replay (););

Burada çağırdığımız iki işlev .ayar () ve .tekrar (). Yeniden oynatma işlevi, oynatma işlevine benzer, ancak animasyonun her tıklanışında yeniden baştan başlaması gerektiğini belirtir.

melodi işlev, nesnelerimize değer olarak geçer, böylece tetiklendiğinde işleri değiştirebilirsiniz. Bu durumda, farenin tıklandığı sayfa koordinatlarından geçiyoruz ve buna göre animasyonumuzun x ve y pozisyonlarını atayacağız. Kodunuzu kaydedin ve ekrana tıklamayı deneyin. Birkaç problem fark edeceksiniz.

İlk olarak, ilk animasyonumuz, kullanıcı hiçbir şeyi tıklamamış olsa bile ekranın ortasında görünmeye devam eder. İkincisi, animasyon fare noktasında tetiklenmez, aşağı ve sağa kaydırılır. Bunların ikisini de kolayca düzeltebiliriz.

Bizim şekil ve patlama .oyun() kendi kod bloklarının sonunda. Buna artık ihtiyacımız yok. .tekrar () olay işleyicisinde aranıyor. Her iki kod bloğundan .play () öğesini kaldırabilirsiniz. Aynı sebepten dolayı kaldırabilirsiniz. isShowStart: true bizim de başlangıçta göstermesi gerekmediğinden.

Konumlandırma problemini düzeltmek için nesnelerimiz için konum değerleri belirlememiz gerekecektir. İlk şeklimizden hatırlayacağınız üzere mo.js bunları varsayılan olarak sayfanın ortasına yerleştirir. Bu değerler fare konumuyla birleştirildiğinde, ofset oluşturulur. Bu ofsetten kurtulmak için bu çizgileri her ikisine de eklemeniz yeterlidir. redCirc ve kıvılcımlar nesneler:

solda: 0, üst: 0,

Artık nesnelerimizin aldığı tek konum değerleri, olay dinleyicisinin geçirdiği fare konum değerleridir. Şimdi işler daha iyi çalışmalı.

Olay işleyicisine nesne ekleme işlemi, tüm animasyonlarımızı nasıl tetikleyeceğimizdir. Bundan sonra her yeni nesneyi eklemeyi unutmayın! Şimdi onları nasıl istediğimizle ilgili temel bilgilere sahip olduk, hadi daha büyük ve daha parlak patlamalar ekleyelim..

Psychedelic'i Başlarken

Bazı dönen üçgenlerle başlayalım. Buradaki fikir hipnotik bir stroboskopik etki yaratmaktı ve bunu ayarlamak aslında oldukça kolay. Bu parametrelerle başka bir veri bloğu ekleyin:

const üçgenler = yeni mojs.Burst (radius: 0: 1000, hareket hızı: 'cubic.out', açı: 1080: 0, hareket hızı: 'quad.out', sol: 0, üst: 0, sayım : 20, çocuklar: şekil: 'çokgen', puan: 3, yarıçap: 10: 100, dolgu: ['kırmızı', 'sarı', 'mavi', 'yeşil'], süre: 3000) ;

Buradaki her şey şu ana kadar aşina olmalı, ancak birkaç yeni nokta var. Şekli bir üçgen olarak tanımlamak yerine, bunu bir çokgen sayısını atamadan önce makas 3 gibi.

Biz de verdik doldurmak çalışmak için bir renk dizisi işlevi görürseniz, her beşinci üçgen kırmızıya döner ve desen devam eder. Değeri açı ayar, patlama sıkma işleminin stroboskopik etkisini üretecek kadar hızlı olmasını sağlar.

Kod sizin için çalışmıyorsa, önceki nesneleri kullandığımız gibi üçgen nesnesini olay dinleyici sınıfına eklediğinizden emin olun..

Oldukça psychedelic! Bunu takip etmek için başka bir patlama ekleyelim.

Beşgenler Dansı

Neredeyse aynı şeyleri kullanabiliriz. üçgenler onu izleyen patlamayı yapmak için itirazda bulunun. Bu hafifçe değiştirilmiş kod, parlak renkli örtüşen eğirme altıgenleri üretir:

const pentagons = new mojs.Burst (radius: 0: 1000, hareket hızı: 'cubic.out', açı: 0: 720, hareket hızı: 'quad.out', sol: 0, üst: 0, sayım : 20, çocuklar: şekil: 'çokgen', yarıçap: 1: 300, puan: 5, doldur: ['mor', 'pembe', 'sarı', 'yeşil'], gecikme: 500, süre: 3000);

Buradaki ana değişiklik biz ekledik olmasıdır gecikme 500ms, böylece patlama üçgenlerin sonuna kadar başlamaz. Birkaç değer değiştirerek, buradaki fikir, patlamanın üçgenlere ters yönde dönmesini sağlamaktı. Mutlu kazayla, beşgenler göründüğünde, üçgenlerin stroboskopik etkisi, birlikte döndükleri gibi görünmesini sağlar.

Küçük Bir Rastgele

Rasgele değerleri kullanan bir etki ekleyelim. Bu özelliklere sahip bir veri bloğu oluşturun:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, yarıçap: 150: 350, açı: 0:90, hareket hızı: 'cubic.out', çocuklar: şekil: 'çizgi', inme: 'kırmızı': 'saydam', inme Genişliği: 5, scaleX: 0.5: 0, degreeShift: 'rand (-90, 90)', yarıçap: 'rand (20, 300)' , süre: 500, gecikme: 'rand (0, 150)',);

Bu patlama zamanla küçülen, kırmızılaşmaya başlayan ve saydamlığa solan çizgiler oluşturacaktır. Bu bileşeni ilginç yapan şey, bazı özelliklerinin belirlenmesinde rastgele değerlerin kullanılmasıdır..

degreeShift alt nesneye bir başlangıç ​​açısı verir. Bunu randomize ederek, her tıklamada tamamen farklı bir patlama sağlar. Rastgele değerler ayrıca yarıçap ve gecikme kaotik etkiyi katacak fonksiyonlar.

İşte tek başına etkisi:

Burada rastgele değerler kullandığımız için, nesne için olay işleyicimize fazladan bir yöntem eklememiz gerekir:

redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generate ();

() Oluşturmak işlev olay her çağrıldığında yeni rasgele değerler hesaplar. Bu olmadan, şekil ilk çağrıldığında rastgele değerleri seçer ve sonraki her çağrı için bu değerleri kullanmaya devam ederdi. Bu etkiyi tamamen mahveder, bu yüzden bunu eklediğinizden emin olun.!

Mo.js nesnelerinin hemen hemen her öğesi için rasgele değerler kullanabilirsiniz ve bunlar benzersiz animasyonlar oluşturmanın basit bir yoludur.

Ancak rasgelelik, animasyonlara dinamik hareketler eklemenin tek yolu değil. Bakalım bakalım sersemleme fonksiyon.

Şaşırtıcı çizgiler

Nasıl olduğunu göstermek için sersemleme fonksiyonu çalışırsa, biraz Catherine Wheel gibi bir şey yapacağız. Bu parametrelerle yeni bir veri bloğu oluşturun:

const lines = new mojs.Burst (radius: 0: 1000, hareket hızı: 'cubic.out', açı: 0: 1440, hareket hızı: 'cubic.out', sol: 0, üst: 0, say : 50, çocuklar: şekil: 'çizgi', yarıçap: 1: 100, hareket hızı: 'elastik.out', dolgu: 'yok', inme: ['kırmızı', 'turuncu'], gecikme: 'şaşırtıcı (10) ', süre: 1000);

Burada her şey şimdi tanıdık, bir patlama kırmızı veya turuncu çizgiler olan 50 çocuk yaratır. Buradaki fark biz geçiyoruz gecikme özellik a karşıya gelmeyen kısım (10) işlevi. Bu, her çocuğun emisyonu arasında 10ms gecikme ekler ve aradığımız eğirme efektini verir..

Sahtekarlık işlevi herhangi bir rasgele değeri kullanmaz, bu nedenle bir üretmek Olay işleyicideki işlevi bu kez. Şimdiye kadar yürüttüğümüz her şeyi görelim:

Kolayca burada durabiliriz, ancak bu projeyi tamamlamak için bir patlama daha ekleyelim..

Akıllı Kareler

Bu son patlama için, dikdörtgenleri kullanarak bir şeyler yapalım. Bu nesneyi kodunuza ve etkinlik dinleyicinize ekleyin:

const redSquares = new mojs.Burst (radius: 0: 1000, hareket hızı: 'cubic.out', açı: 360: 0, hareket hızı: 'quad.out', sol: 0, üst: 0, sayım : 20, çocuklar: shape: 'rect', radiusX: 1: 1000, radiusY: 50, puan: 5, dolgu: 'none', vuruş: 'kırmızı': 'turuncu', kurs genişliği: 5 : 15, gecikme: 1000, süre: 3000);

Bu nesne bugün üzerinde çalıştığımız işe yeni bir şey eklemiyor, sadece karmaşık geometrik desenlerin kodla nasıl kolayca oluşturulabileceğini göstermek için eklenmiş..

Bu, bu yazının test etme aşamalarında yaratıldığı zaman, bu nesnenin amaçlanan sonucu değildi. Bir kez kod çalıştığında, bilerek yapabileceğimden çok daha güzel bir şeye rastladığımı anladım.!

Bu son nesne eklendiğinde, bittik. Her şeyi eylem halinde görelim.

Mo.js: Web Animasyonları İçin Güçlü Bir Araç

Mo.js dosyasına yapılan bu basit tanıtım, güzel animasyonlar oluşturmak için gereken temel araçları kapsar. Bu araçların kullanılması neredeyse her şeyi yaratabilir ve birçok görev için web kitaplıkları Photoshop, After Effects veya diğer pahalı yazılımları kullanmak için basit bir alternatiftir.

Bu kütüphane hem programlama hem de web geliştirme alanında çalışanlar için faydalıdır. Programlama ve Web Geliştirme: Fark Nedir? Programlama ve Web Geliştirme: Fark Nedir? Uygulama programcılarının ve web geliştiricilerin aynı işi yaptığını düşünebilirsiniz, ancak bu doğru değil. İşte programcılar ve web geliştiricileri arasındaki temel farklar. Projede kullanılan olay işleme, web sitelerinde veya uygulamalarda reaktif düğmeler ve metinler oluşturmak için kolayca kullanılabilir. Bununla eğlenin: hata yok, sadece mutlu kazalar var!