Home-theater-designers
eğer arıyorsan kendi web siteni başlat , güzel görünen animasyonlar onu parlatabilir. Bunu başarmanın birden çok yolu vardır, animasyonlu GIF yapmak gibi bir yazılımla sıfırdan kendi filminizi yapmayı öğrenmeye blender veya Maya .
Programlı olarak animasyonlar oluşturmak için kullanılabilecek kütüphaneler de vardır. Tarihsel olarak, web kodlayıcıları jQuery'yi basit animasyonlar oluşturmak için kullandılar, ancak web geliştikçe ve HTML5 yeni standart haline geldi, yeni seçenekler ortaya çıktı. Animasyon için CSS kitaplıkları, tarayıcıda vektör animasyonu için özel olarak tasarlanmış JavaScript kitaplıklarının yanı sıra yeni çerçeve altında inanılmaz derecede güçlü hale geldi.
Bugün, koddan güzel görüntüler oluşturmak için bloktaki yeni çocuklardan biri olan mo.js'ye bakacağız. Güzel desenler oluşturan kullanıcı tepkili bir animasyon serisi oluşturmadan önce birkaç temel işlevi ele alacağız.
Mo.js'yi girin
Mo.js, web için kolaylıkla hareketli grafikler oluşturmaya yönelik bir kitaplıktır. Çok kod meraklısı olmayanlar için güzel şeyler yaratmayı basit hale getirirken, deneyimli programcıların sahip olduklarını hiç bilmedikleri sanatsal bir yön keşfetmelerine izin vermek için tasarlanmıştır. Adından da anlaşılacağı gibi, herkesin temel bilgileri kolayca öğrenebileceği şekilde uygulanmasına rağmen, popüler JavaScript programlama diline dayanmaktadır.
Daha ileri gitmeden önce, bugün ne oluşturacağımıza bir göz atalım:
kullanacağız kod kalemi bugünün projesi için, çünkü aynı tarayıcı penceresinde her şey üzerinde çalışmamıza izin veriyor. Dilerseniz bir şirkette çalışabilirsiniz. seçtiğiniz editör Bunun yerine. Adım adım öğreticiyi atlamak istiyorsanız, kodun tamamı burada mevcuttur.
Yeni bir Kalem kurduğunuzda bu ekranla karşılaşacaksınız:
Başlamadan önce, birkaç değişiklik yapmanız gerekecek. Tıkla Ayarlar sağ üstteki simgeye gidin ve JavaScript sekme.
biz kullanacağız Babil kod ön işlemcimiz olarak, açılır menüden bunu seçin. Babel, JavaScript'in anlaşılmasını biraz daha kolaylaştırıyor. ECMAScript 6 eski tarayıcılar için destek. Bunun ne anlama geldiğini bilmiyorsan, merak etme , 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 Komut Dosyaları/Kalemler Ekle metin istemi ve onu seçme.
Bu iki şey yerindeyken, tıklayın Kaydet ve kapat . Başlamaya hazırız!
Mo.js ile Temel Şekiller
Grafiklere başlamadan önce, görünüm bölmesindeki o göz kamaştırıcı beyaz arka plan hakkında bir şeyler yapalım. Bu kodu aşağıdaki alana yazarak arka plan rengi özelliğini değiştirin. CSS ekmek.
body{
background: rgba(11,11,11,1);
}Bir şekil oluşturmak basit bir işlemdir ve arkasındaki konsept tüm kitaplığı yönlendirir. Varsayılan bir daire şekli oluşturalım. içine bu kodu girin JS ekmek:
const redCirc = new mojs.Shape({
isShowStart:true
});Burada bir oluşturduk const adı ile değer kırmızıCirc ve onu atadı yeni mojs.Shape . Kodlama konusunda tamamen yeniyseniz, buradaki parantez düzenine dikkat edin ve sondaki noktalı virgülü unutmayın!
Şimdiye kadar hiçbir parametreyi geçmedik isShowStart:true , yani herhangi bir hareket atamadan önce bile ekranda görünecek. Ekranın ortasına pembe bir daire yerleştirdiğini göreceksiniz:
Bu daire varsayılan Şekil mo.js için. Kodumuza bir satır ekleyerek bu şekli kolayca değiştirebiliriz:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Bir nesneye daha fazla özellik eklemek için onu ayırmak için virgül kullanırız. Burada bir ekledik şekil özellik olarak tanımlamış ve 'düz' . Kaleminizi kaydedin, bunun yerine varsayılan şeklin bir kareye dönüştüğünü göreceksiniz.
Değerlerin aktarıldığı bu süreç Şekil nesne, onları nasıl özelleştirdiğimizdir. Şu anda gerçekten çok şey yapmayan bir karemiz var. Bir şeyi canlandırmayı deneyelim.
Hareketin Temelleri
Biraz daha etkileyici görünen bir şey elde etmek için, çevresinde kırmızı bir çizgi olan ve içi dolgu olmayan bir daire oluşturalım.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Gördüğünüz gibi, bir de atadık. Genişlik strok için değer ve bir yarıçap daire için. İşler şimdiden biraz farklı görünmeye başladı. Şekliniz güncellenmiyorsa, etrafında herhangi bir virgül veya tek tırnak işareti kaçırmadığınızdan emin olun. 'ağ' veya 'Yok' ve tıkladığınızdan emin olun. kaydetmek sayfanın üst kısmında.
Buna bir animasyon ekleyelim. Yukarıdaki örnekte, bu kırmızı daire, dışa doğru kaybolmadan önce kullanıcının tıkladığı yerde görünür. Bunu gerçekleştirmenin bir yolu, zaman içinde yarıçapı ve opaklığı değiştirmektir. Kodu değiştirelim:
radius: {15:30},
opacity: {1:0},
duration:1000değiştirerek yarıçap özellik ve ekleme opaklık ve süre özellikleri, zaman içinde yürütmek için şekil talimatları 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, eklememiş olmamızdır. .Oyna() talimatlarımızı yerine getirmesini söyleme işlevi. Köşeli parantezler ve noktalı virgül arasına ekleyin ve dairenizin canlandığını görmelisiniz.
Şimdi bir yere varıyoruz, ancak bunu gerçekten özel kılmak için birkaç daha derinlemesine olasılığa bakalım.
Mo.js ile Sipariş Verme ve Kolaylaştırma
Şu anda, daire göründüğü anda solmaya başlar. Bu gayet iyi çalışacak, ancak biraz daha fazla kontrole sahip olmak güzel olurdu.
ile bunu yapabiliriz .sonra() işlev. Yarıçapımızı veya opaklığımızı değiştirmek yerine, belirli bir süre sonra değişmeden önce şeklimizin başladığı yerde kalmasını sağlayalım.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Şimdi şeklimiz atadığımız değerlerle karşımıza çıkacak, içine koyduğumuz herhangi bir şeyi yapmadan önce 1000 ms bekleyelim. .sonra() işlev. Parantezler arasına bazı talimatlar ekleyelim:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Bu kod, animasyonun başka bir önemli bölümünü tanıtır. nereye talimat verdik ölçek 1'den 2'ye değiştirmek için sinüs dalgasına dayalı yumuşatma da atadık. günah.in . Mo.js, gelişmiş kullanıcıların kendilerininkini ekleme yeteneği ile birlikte çeşitli hareket hızı eğrilerine sahiptir. Bu durumda, zamanla ölçek yukarı doğru kıvrılan bir sinüs dalgasına göre gerçekleşir.
Farklı eğrilerin görsel olarak tükenmesi için, kontrol edin easing.net . Bunu şununla birleştir Darbe genişliği bizim belirlediğimiz süre boyunca 0'a değişir ve çok daha dinamik bir kaybolma efektine sahip olursunuz.
Ş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 Patlaması
İLE Patlama Mo.js'de merkezi bir noktadan çıkan şekiller topluluğudur. Bunları bitmiş animasyonumuzun temeli yapacağız. Bir şekli yaptığınız gibi, varsayılan bir çoğuşmayı çağırabilirsiniz. Biraz kıvılcım çıkaralım:
const sparks = new mojs.Burst({
}).play();Sadece boş ekleyerek görebilirsiniz Patlama nesne ve ona oynamasını söylersek, varsayılan patlama efektini elde ederiz. Patlamanın boyutunu ve dönüşünü canlandırarak etkileyebiliriz. yarıçap ve açı özellikler:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Şimdiden, patlamamıza özel bir yarıçap ve dönüş ekledik:
Daha çok kıvılcım gibi görünmelerini sağlamak için, patlamanın kullandığı şekilleri ve patlamanın kaç şekil oluşturduğunu değiştirelim. Bunu, patlamanın çocuklarının özelliklerini ele alarak yaparsınız.
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();Alt özelliklerin, daha önce üzerinde çalıştığımız şekil özellikleriyle aynı olduğunu fark edeceksiniz. Bu sefer şekil olarak bir haç seçtik. Bu şekillerin 50'sinin tamamı artık aynı özelliklere sahip. Oldukça iyi görünmeye başladı! Bu, kullanıcının fareye tıkladığında göreceği ilk şeydir.
Zaten başlangıçtaki kırmızı vuruşumuzu görebilsek de kırmızıCirc şekil çok uzun süre etrafta kalıyor. Her iki animasyonun da birbirine uyması için süresini değiştirmeyi deneyin. Bunun gibi bir şeyle sonuçlanmalı:
Animasyonumuzu bitirmekten çok uzağız, ancak bir dakikanızı ayırıp kullanıcıya duyarlı hale getirelim.
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', function(e) {
});Bu kod parçası, fare tıklamalarını dinler ve parantez içindeki talimatları bizim için yerine getirir. bizimkileri ekleyebiliriz kırmızıCirc ve kıvılcımlar bu dinleyiciye nesneler.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Burada dediğimiz iki fonksiyon .tune() ve .tekrar oynat() . Yeniden oynatma işlevi, oynatma işlevine benzer, ancak animasyonun her tıklandığında baştan başlaması gerektiğini belirtir.
NS melodi işlev, tetiklendiğinde bir şeyleri değiştirebilmeniz için değerleri nesnemize iletir. Bu durumda farenin tıklandığı sayfa koordinatlarına geçiyoruz ve buna göre animasyonumuzun x ve y konumunu atamış oluyoruz. Kodunuzu kaydedin ve ekrana tıklamayı deneyin. Birkaç sorun fark edeceksiniz.
İlk olarak, kullanıcı hiçbir şeye tıklamasa bile ilk animasyonumuz hala ekranın ortasında görünüyor. İkinci olarak, animasyon fare noktasında tetiklenmez, aşağı ve sağa kaydırılır. Her ikisini de kolayca düzeltebiliriz.
Bizim şeklimiz ve patlamamız var .Oyna() ilgili kod bloklarının sonunda. Buna artık ihtiyacımız yok .tekrar oynat() olay işleyicide çağrılıyor. .play() öğesini her iki kod bloğundan da kaldırabilirsiniz. Aynı nedenden dolayı kaldırabilirsiniz. isShowStart: doğru Ayrıca, başlangıçta göstermesine artık ihtiyacımız olmadığı için.
Konumlandırma sorununu çözmek için nesnelerimiz için konum değerleri belirlememiz gerekecek. İlk şeklimizden hatırlayacağınız gibi, mo.js onları varsayılan olarak sayfanın ortasına yerleştirir. Bu değerler fare konumu ile birleştirildiğinde ofset oluşturur. Bu ofsetten kurtulmak için, bu satırları her ikisine de eklemeniz yeterlidir. kırmızıCirc ve kıvılcımlar nesneler:
left: 0,
top: 0,Artık nesnelerimizin aldığı tek konum değeri, olay dinleyicisi tarafından iletilen fare konumu değerleridir. Şimdi işler çok 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 ona eklemeyi unutmayın! Artık onları istediğimiz gibi çalışan temel bilgilere sahip olduğumuza göre, biraz daha büyük ve daha parlak patlamalar ekleyelim.
Psychedelic Olmak
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 patlama ekleyin:
const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});Birkaç yeni nokta olsa da, buradaki her şey şimdiye kadar oldukça aşina olmalıdır. Şekli bir üçgen olarak tanımlamak yerine ona bir üçgen adını verdiğimizi fark edeceksiniz. çokgen numarasını atamadan önce puan 3 olarak bulunur.
biz de verdik doldurmak çalışmak için bir dizi renk işlevi görür, her beşinci üçgen kırmızıya döner ve desen devam eder. Yüksek değeri açı ayarı, patlama dönüşünü stroboskopik etkisini üretecek kadar hızlı hale getirir.
Kod sizin için çalışmıyorsa, önceki nesnelerde yaptığımız gibi üçgenler nesnesini olay dinleyici sınıfına eklediğinizden emin olun.
Oldukça psychedelic! Onu takip etmek için başka bir patlama ekleyelim.
dans eden beşgenler
Hemen hemen aynı olan bir şeyi kullanabiliriz. üçgenler onu takip eden patlamayı yapmak için nesne. Bu biraz değiştirilmiş kod, parlak renkli, örtüşen dönen altıgenler üretir:
const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});Buradaki ana değişiklik, bir gecikme 500ms, böylece patlama üçgenlerden sonraya kadar başlamaz. Buradaki fikir, birkaç değeri değiştirerek, seri dönüşü üçgenlerin ters yönünde yapmaktı. Şans eseri, beşgenler göründüğünde, üçgenlerin stroboskopik etkisi, birlikte dönüyorlarmış gibi görünmesini sağlar.
Biraz Rastgelelik
Rastgele değerleri kullanan bir efekt ekleyelim. Bu özelliklerle bir patlama oluşturun:
const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});Bu patlama, zamanla küçülen, kırmızıyla başlayan ve şeffaflığa dönüşen çizgiler oluşturacaktır. Bu bileşeni ilginç kılan, bazı özelliklerini belirlemek için rastgele değerlerin kullanılmasıdır.
NS dereceShift alt nesneye bir başlangıç açısı verir. Bunu rastgele seçerek, her tıklamada tamamen farklı bir patlama sağlar. için rastgele değerler de kullanılır. yarıçap ve gecikme kaotik etkiye eklemek için işlevler.
İş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 gerekiyor:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();NS oluştur() işlev, olay her çağrıldığında yeni rastgele değerler hesaplar. Bu olmadan, şekil ilk çağrıldığında rastgele değerler 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 rastgele değerler kullanabilirsiniz ve bunlar benzersiz animasyonlar oluşturmanın basit bir yoludur.
güvenli internet yok nasıl düzeltilir
Bununla birlikte, animasyonlara dinamik hareketler eklemenin tek yolu rastgelelik değildir. şuna bir bakalım sendelemek işlev.
Şaşırtıcı Çizgiler
nasıl olduğunu göstermek için sendelemek işlevi çalışıyorsa, biraz Catherine Wheel gibi bir şey yapacağız. Bu parametrelerle yeni bir patlama oluşturun:
const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});Buradaki her şey artık tanıdık, bir patlama kırmızı veya turuncu çizgili 50 çocuk yaratıyor. Buradaki fark, gecikme mülk bir sendeleme(10) işlev. Bu, her çocuğun emisyonu arasında 10 ms'lik bir gecikme ekleyerek ona aradığımız dönme efektini verir.
Stagger işlevi herhangi bir rastgele değer kullanmaz, bu nedenle bir üretmek bu sefer olay işleyicide işlev görür. Şimdiye kadar eylemde olduğumuz her şeyi görelim:
Burada kolayca 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 olay dinleyicinize ekleyin:
const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});Bu nesne, bugün üzerinde çalıştıklarımıza yeni bir şey eklemiyor, sadece karmaşık geometrik desenlerin kod aracılığıyla nasıl kolayca oluşturulabileceğini göstermek için dahil edildi.
Bu öğreticinin yazılmasının test aşamalarında oluşturulduğunda, bu nesnenin amaçlanan sonucu bu değildi. Kod çalıştığında, bilerek yapabileceğimden çok daha güzel bir şeye rastladığım anlaşıldı!
Eklenen bu son nesne ile işimiz bitti. Her şeyi eylemde görelim.
Mo.js: Web Animasyonları için Güçlü Bir Araç
mo.js'ye bu basit giriş, güzel animasyonlar oluşturmak için gereken temel araçları kapsar. Bu araçların kullanım şekli hemen hemen her şeyi yaratabilir ve birçok görev için web kitaplıkları kullanmaya basit bir alternatiftir. Photoshop , After Effects veya diğer pahalı yazılımlar.
Bu kitaplık hem programlama hem de web geliştirmede çalışanlar için kullanışlıdır, projede kullanılan olay işleme, web sitelerinde veya uygulamalarda reaktif düğmeler ve metinler oluşturmak için kolayca kullanılabilir. Onunla iyi eğlenceler: Hata yoktur, sadece mutlu kazalar vardır!
Paylaş Paylaş Cıvıldamak E-posta Windows 11'e Yükseltmeye Değer mi?Windows yeniden tasarlandı. Ancak bu sizi Windows 10'dan Windows 11'e geçmeye ikna etmek için yeterli mi?
Sonrakini Oku İlgili konular- Programlama
- JavaScript
Ian Buckley, Berlin, Almanya'da yaşayan serbest gazeteci, müzisyen, sanatçı ve video yapımcısıdır. Yazmadığı veya sahnede olmadığı zamanlarda, çılgın bir bilim insanı olma umuduyla kendin yap elektroniği veya koduyla uğraşıyor.
Ian Buckley'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın