Web Günlüğü

Jquery ile çek bırak Rozet animasyonu yapımı ( Plug-in Kullanmadan )

İlk olarak http://eburhan.com'daki bir yazıda gördüğüm bu uygulama görselliği açısından dikkatimi çekti. Daha sonra bu basit ve güzel uygulamayı bir de kendim yapmaya karar verdim. Özellikle jQuery'nin gücünü düşününce bunun zor olmayacağını düşündüm. Bir kaç gün üzerinde uğraştıktan sonra orijinalinden biraz farklı oldu. Şimdi bu uygulamayı burada paylaşmak istiyorum. Tamamen biraz geometrik hesaplama ve basit matematik bilgisi ile bu efekti yapmak çok kolay. Animasyonu yani rozetin hereketini ve diğer bir çok işlemi Jquery ile yapacağımız için Jquery kütüphanesini kullanmayı biraz bilmek gerekiyor.

Katmanı (Rozeti) farenin sol tuşuyla basılı tutup ekranın istediğimiz noktaya sürükleyip bırıktığımızda katman yay gibi eski pozisyonuna geri dönsün. Bu animasyonu bir teli gerip bırakınca oluşan salınım hareketine benzetebiliriz.

Animasyonu yani rozetin hereketini ve diğer bir çok işlemi Jquery ile yapacağımız için Jquery kütüphanesini kullanmayı biraz bilmek gerekiyor. Jquery kütüphanesini sayfamıza eklemeyi unutmamız gerek.

Tüm işlemi özetleyerek işe başlayalım (Jquery ile çek bırak Rozet yapımı ) :

1) Rozet ekranın tam ortasında olsun. Rozete tıkladığımızda rozetin tıklandığını alıgılayıp fare imlecinin hareketini algılayacak fonkisoyonu yazacağız.

2) Fare tuşu bırakıldığında bunu algılayacak fonksiyonu yazacağız. Bu fonksiyonda rozetin hedef hereket noktasını hesaplayıp animasyonu yaptıracağız. Tabii rozetin daha sonra tam tersi yönünde hareket ettirmemiz gerektiğinden hareket noktasını tekrar hesaplamamız gerekiyor. Bir sonraki hareket noktası yine tersi yönde olup yine hereket noktasını hesaplayacağız.

3) Bu hereket noktasını ve yönünü hesaplarken basit geometrik hesaplamalar ve bölme işlemleri yapacağız. Her adım tamamlandığında animasyonu Jquery ile yaptıracağız.

Tüm animasyonu for döngüsü ile yaptıracağız. Bu döngüde tüm animasyonu hereketini yapacağız. Daha karmaşık hesaplamalardan kurtulmak için salınım sayısını her 5'e sabitliyoruz.

4) En son adımda orijinal pozisyonuna döndürecek animasyonu for döngüsü bitince yaptıracağız. Böylece orijinal pozisyonua geri getirdiğimiizden emin oluyoruz.

5) Rozeti bıraktıktan ve tüm animasyon işlemleri tamamlandıktan sonra katmanın fareyi takip etmesini sağlayan olay dinleme kaydını siliyoruz ve böylece en başa dönüyoruz.

 Uygulamamızın örneğini Jquery ile çek bırak Rozet yapımı (Plug-in kullanmadan) linkinden görebilirsiniz.

 Katmanın arka planını style taglari arasına ekleyim. Katmanın css özellikleri : (Jquery ile çek bırak Rozet yapımı (Plug-in kullanmadan) )

  #rozet
   {
   background-image: url('dragme.png');
   background-repeat:no-repeat;
   display: block;
   cursor:move;
   }

Tüm Jquery ve javascript kodumuzu inceleyelim. Yorumları okuyarak yapılan işi adım adım anlayabilirsiniz (Jquery ile çek bırak Rozet yapımı (Plug-in kullanmadan) ) :

// Jquery ile çek bırak Rozet yapımı (Plug-in kullanmadan)    
var katmanX= 500;
var katmanY= 250;

// rozet başlangıç css özelliklerini veriyoruz.
$('#rozet').css( {
 width : "85px",
 height : "105px",
 position: "absolute" ,
 left: katmanX,
 top : katmanY
 });

// rozete tıklandığında yapılacak işi kaydet
$('#rozet').mousedown( function (e){

	// fare imleci ile rozetin üst tarafı arasındaki uzaklığı hesapla
	// a ve b değişkenleri rozete tıkladığımızda ve sürüklediğimizde
	// rozetin imlecin tıkladığı noktada kalmasını sağlayacak
	var a=e.pageY- $(this).position().top;
	//fare imleci ile katmanın sol tarafındaki uzaklığı hesapla
	var b=e.pageX- $(this).position().left;

	// fare hareket halinde iken yapılacalk işi kaydet.
	// Hareketi tüm ekranda algılamak icin $(window) yazıyoruz.
	$(window).bind( 'mousemove',  function(e) { izle(e,a,b); } );
	//fare tuşu bırakıldığında yapılacak işi kaydet.
	} ).mouseup( function (e)
		{
		//farenin tuşu bırakıldığında farenin hareketi halinde
		// yapılcak işi sil.
		$(window).unbind('mousemove');
		// animasyon için rozet bırakılan konuma göre salınım yapmalı
		// Mesela fare imleci katmanın altında ise katmanın yukarı
		// ve aşağı salınım yapmalı.

		// toplam salınım herketinin 5+1 kere olamasını istiyorsak for
		// döngüsün sayısını 5 olarak giriyoruz.
		for (var i=1; i < 5;i++)
		{

		// Rozete hereket veriyoruz. Bunun için her salınım hareketi
		// için Rozetin hedef noktasını hesaplıyoruz.
		// her adım bir önceki adımın tersi yönde hareketini
		// (Math.pow(-1,i)) yani { -1 , 1 , -1 , 1 .. } şeklinde hesaplayacak
		// bu da bize istediğimiz harekte yönünü vermiş olacak.
		// rozetin hareket animasyonun için hedef noktasını katmanın bırakılma
		// noktası ile orijinal noktası arasındaki
		// uzaklığı baz alarak her adımda hedef noktayı azaltarak hedef noktayı
		// hesaplıyoruz ve animasyonu Jquery ile yaptırıyoruz.
		// Orijinan noktaya olan uzaklığın her adımda azaltmak için hesaplanan
		// uzaklığı "i" sayısı ile bölüyoruz.

		//150+i*15 : saniye her salınım süresi olsun. Yani her adımda salınım
		// süresi yavaşlasın.

			$(this).animate({
			top:  Math.round( (Math.pow(-1,i))*(
			 (katmanY-$(this).position().top))/(i)   +katmanY),
			left :Math.round((Math.pow(-1,i))*(
			 (katmanX-$(this).position().left))/(i)+katmanX)
			}, 150+i*15 );


		}//end of for


		// for döngüsü bitince eğer orjinal noktaya ulaşamamış ise bunu
		// kesinleştirmek için en son adımda katmanın
		// orijinal noktasına gönderiyoruz.

		$(this).animate({
			top: katmanY,
			left : katmanX
		}, 150+i*15 );
	}  );

 // fare hareketini izleyen ve rozetin konumu buna
 // göre değiştiren fonksiyon.
 function izle(e,a,b) {
 $('#rozet').css({ left : e.pageX- b , top:  e.pageY-a});
 }

});

Uygulamanın çalışır halini Jquery ile çek bırak Rozet yapımı script dosyaları (Plug-in kullanmadan) linkinden indirebilirsiniz. Kendi rozetinizi koyup uygulamayı kendi sitenizde kullanabilirsiniz.