Soğuk Geçişi Çözen Çiviler

0
20

Herhangi bir siteye uygulanması ve uygulanması çok kolay, diyebilirim ki, resimler arasında etkileyici bir geçiş efekti yaratacağız. Kampos kütüphanesini kullanacağız çünkü tam olarak ihtiyacımız olanı yapmakta çok iyi. Ayrıca, sonucu ihtiyaçlarınıza göre benzersiz hale getirebilmeniz ve yarattığınız deneyim ve izlenime göre ayarlayabilmeniz için sonucu değiştirmenin birkaç olası yolunu da keşfedeceğiz.

Awwwards Transitions koleksiyonuna bir göz attığınızda, bir medya öğesini diğerine dönüştürmek gibi sürükleyici efektler yapmanın ne kadar popüler olduğunu anlayacaksınız. Bu örneklerin çoğu iş için WebGL kullanıyor. Ortak yönleri olan başka bir şey de, bir yer değiştirme veya çözülme efekti (veya her ikisi) için doku eşlemesinin kullanılmasıdır.

Bu efektleri yapmak için, geçiş yapmak istediğiniz iki medya kaynağına ve ayrıca bir tane daha haritaya veya medyanın bir görüntüden diğerine ne zaman ve ne kadar döneceğini belirleyen her piksel için bir değerler ızgarasına ihtiyacınız var. Sonraki. Bu harita hazır bir resim veya bir bu, örneğin gürültüye dayanır. Harita olarak bir gürültü uygulayarak çözülme geçiş efekti kullanmak, kesinlikle bu sürükleyici web deneyimini artırabilecek şeylerden biridir. Peşinde olduğumuz şey bu.

Sahneyi kurmak

Ağır makinelere geçmeden önce basit bir DOM sahnesine ihtiyacımız var. İki resim (veya tercih ederseniz video) ve yüklendiklerinden ve manipülasyona hazır olduklarından emin olmak için minimum miktarda JavaScript.

İkinci resmim

Bu bize, çalışmamız ve sahnemizi görüntülememiz için minimum DOM sağlayacaktır. Sahne hazır; şimdi ana aktörlerimizi davet edelim, iki imajı:

// Görüntülerimiz hazır olduğunda bildir function loadImage (src) {return new Promise (resol => {const img = new Image (); img.onload = function () {resol (this);}; img.src = src ;}); } // Görüntü URL’lerini alın const imageFromSrc = document.querySelector (‘# source-from’). Src; const imageToSrc = document.querySelector (‘# kaynağa’). dataset.src; // Görüntüleri yükleyin ve sözlerini tutun, böylece const promisedImages = [
loadImage(imageFromSrc),
loadImage(imageToSrc)
];

Çözülme haritasını oluşturma

Sahne ayarlandı, görüntüler getirildi – hadi biraz sihir yapalım! İhtiyacımız olan efektleri yaratarak başlayacağız. İlk olarak, biraz gürültü yaratarak çözünme haritasını oluşturuyoruz. Bir türbülans etkisi içinde bir Klasik Perlin gürültüsü kullanacağız, bu tür gürültü farklı ölçeklerde, biri diğerinin üzerine yığılır ve onu bir gri tonlamalı:

const türbulence = kampos.effects.turbulence ({gürültü: kampos.noise.perlinNoise});

Bu efekt, SVG feTurbulans filtre efekti gibi çalışır. Bence Szabó’nun “SVG Filtreleriyle Modeller Oluşturmak” bölümünde bunun bazı güzel örnekleri var.

İkinci olarak, türbülans etkisinin ilk parametrelerini belirledik. Bunlar, vaka başına ihtiyaç duyabileceğimiz belirli istenen görselleri elde etmek için daha sonra değiştirilebilir:

// Elbette hedef tuvalin boyutuna bağlı olarak const WIDTH = 854; const YÜKSEKLİK = 480; const CELL_FACTOR = 2; const AMPLITUDE = CELL_FACTOR / WIDTH; türbülans frekansı = {x: AMPLITUDE, y: AMPLITUDE}; türbülans. oktavlar = 1; türbulence.isFractal = true;

Bu kod bize sıvıya benzer hoş bir gürültü dokusu verir. Ortaya çıkan geçiş, ilk görüntü ikinci görüntüye batıyor gibi görünür. CELL_FACTOR değeri, daha küçük blob’larla daha yoğun bir doku oluşturmak için artırılabilirken, oktavlar = 1 gürültü blobunu tutan şeydir. Ayrıca genliği medyanın en azından daha büyük tarafına normalleştirdiğimize dikkat edin, böylece doku görüntümüz boyunca güzelce gerilir.

Daha sonra çözülen haritayı işliyoruz. Elimizde ne olduğunu görebilmek için, şimdilik DOM’da bulunan tuvali kullanacağız:

const mapTarget = document.querySelector (‘# hedef’); // document.createElement (‘canvas’) yerine; mapTarget.width = WIDTH; mapTarget.height = HEIGHT; const dissolveMap = new kampos.Kampos ({target: mapTarget, efektler: [turbulence], noSource: true}); dissolveMap.draw ();

CodePen Embed Yedeklemesi

Mola

Burada durup yukarıdaki parametrelerin değiştirilmesinin görsel sonuçları nasıl etkilediğini inceleyeceğiz. Şimdi, sıvıdan ziyade daha dumana benzer bir şey elde etmek için bazı gürültü yapılandırmalarını değiştirelim, diyelim ki:

const CELL_FACTOR = 4; // 2 yerine

Ve ayrıca bu:

türbülans. oktavlar = 8; // 1 yerine

Şimdi, sekiz seviyenin (bir yerine) üst üste bindirildiği ve çok daha fazla ayrıntı veren daha yoğun bir modelimiz var:

CodePen Embed Yedeklemesi

Fantastik! Şimdi orijinal değerlere ve ana özelliğimize geri dönelim …

Geçişin oluşturulması

Geçiş efektini yaratmanın zamanı geldi:

const dissolve = kampos.transitions.dissolve (); dissolve.map = mapTarget; dissolve.high = 0,03; // sıvı benzeri etki için

Yüksek için yukarıdaki değeri fark ettiniz mi? Sıvı benzeri sonuçlar elde etmek için bu önemlidir. Geçiş, birinci ortamın mı yoksa ikinci ortamın mı gösterileceğini belirlemek için bir adım işlevi kullanır. Bu adım sırasında, pürüzlü kenarlar yerine yumuşak kenarlar elde etmemiz için geçiş sorunsuz bir şekilde yapılır. Bununla birlikte, adımın alt kenarını 0.0’da (varsayılan) tutuyoruz. 0,0’dan 0,03’e geçişin çok ani olduğunu ve bir medyadan diğerine hızlı bir değişimle sonuçlandığını hayal edebilirsiniz. Kırpma olarak düşünün.

Öte yandan, aralık 0,0 ila 0,5 olsaydı, daha geniş bir “şeffaflık” aralığı veya iki görüntünün bir karışımını elde ederdik – kısmi opaklıkla elde edeceğimiz gibi – ve duman benzeri bir veya “bulutlu” etki. Bunu birazdan deneyeceğiz.

Devam etmeden önce, belgeden aldığımız tuvali DOM’dan oluşturduğumuz yenisiyle değiştirmeyi unutmamalıyız, şöyle:

const mapTarget = document.createElement (‘canvas’);

Takın ve… harekete geçin!

Neredeyse geldik! Besteci örneğimizi oluşturalım:

const target = document.querySelector (‘# hedef’); const hippo = new kampos.Kampos ({hedef, efektler: [dissolve]});

Son olarak, görüntüleri alın ve geçişi oynatın:

Promise.all (promisedImages) .then (([fromImage, toImage]) => {hippo.setSource ({media: fromImage, genişlik, yükseklik}); dissolve.to = toImage; hippo.play (time => {// bir döngüde oynamak için bir sin () dissolve.progress = Math.abs (Math.sin (time * 4e-4)); // yavaşlatmak için zamanı bir faktörle çarpın biraz }); });

CodePen Embed Yedeklemesi

Tatlı!

Özel efektler

Tamam, bu harika güzelliğe sahibiz. Tamamen farklı bir sonuç elde etmek için parametrelerle biraz oynamayı deneyebiliriz. Örneğin, belki daha duman benzeri bir şey:

const CELL_FACTOR = 4; türbülans. oktavlar = 8;

Daha yumuşak bir geçiş için, geçişin adım işlevinin en üst düzeyini yükselteceğiz:

dissolve.high = 0.3;

Şimdi buna sahibiz:

CodePen Embed Yedeklemesi

Ve son olay örgüsümüz için, gürültünün kendisini de canlandıralım! Öncelikle, kampos’un çözülen harita dokusunu her karede güncelleyeceğinden emin olmalıyız, bu varsayılan olarak yapmadığı bir şeydir:

dissolve.textures[1].update = true;

Sonra, her karede türbülans zaman özelliğini ilerletmek ve yeniden çizmek istiyoruz. Ayrıca geçişi yavaşlatacağız, böylece geçiş gerçekleşirken gürültünün değiştiğini görebiliriz:

hippo.play (time => {türbulence.time = time * 2; dissolveMap.draw (); // Burada zaman faktörünün daha küçük olduğuna dikkat edin dissolve.progress = Math.abs (Math.sin (time * 2e-4) );});

Ve bunu anlıyoruz:

CodePen Embed Yedeklemesi

Bu kadar!

Çık… sağ sahne

Bu, medya geçişleri için kampos ile yapabileceklerimizin sadece bir örneğidir. Bundan en fazla kilometreyi çıkarmak için malzemeleri karıştırmak artık size kalmış. İşte sizi harekete geçirecek bazı fikirler:

Site / bölüm arka planları arasında geçiş Bir görüntü karuselinde arka planlar arasında geçiş Bir tıklama veya fareyle üzerine gelmeye tepki olarak arka planı değiştirme Oynamaya başladığında videodan özel bir poster görüntüsünü kaldırın

Ne yaparsanız yapın, yorumlarda bize bununla ilgili bir not verdiğinizden emin olun.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz