Berna Çorbacı

JAVASCRİPT KÜTÜPHANELERİNİN ANİMASYON OLUŞTURMADA KULLANIMI VE JSTWEENER KÜTÜPHANESİ

JavaScript Kütüphanelerinin Animasyon Oluşturmada Kullanımı

Merhaba arkadaşlar bu hafta JavaScript kütüphanelerinin animasyon oluşturmada kullanımını ve JSTweener Kütüphanesi'ni göreceğiz. JavaScript tabanlı kütüphanelerin ve çerçevelerin (framework) ortaya çıkması, internet geliştiricilere etkili animasyonlar ve geçişler oluşturmada kolaylık sağlamıştır.

JavaScript tabanlı animasyonların genel mantığı; sayfada bulunan DOM elemanlarının (Belge Nesnesi Modeli: sayfada bulunan resim, yazı, form gibi tüm elemanlar), mantıksal bir denklem ya da fonksiyon tarafından belirlenen desene göre hareket ettirmektir. Sayfa efektlerini elde etmek için bu elemanlar, belli aralıklarla ve belli hızlarla hareket ettirilmelidir. Bunu yapmanın en kolay yolu bir gecikme fonksiyonu kullanmaktır:

birinciFonksyon();
delay(400); // uygulamayı 400 milisaniye duraklatır.
ikinciFonksiyon();

Örnekte anlaşılacağı üzere JavaScript'de bu gecikme işlemi delay() fonksiyonu ile yapılmaktadır. Bu işlemi bir döngü halinde yapıp animasyon görüntüsü elde edebilmek için ise setTimeout ve setInterval fonksiyonları kullanılır:

setTimeout(konumDegistirmeFonksiyonu,500);
setInterval(konumDegistirmeFonksiyonu,500);

Yukarıdaki örnekte setTimeout fonksiyonu, konum değiştirme fonksiyonunu, bulunulan andan 500 milisaniye sonrasında çağırıyor. Bu fonksiyon bir döngü içerisine çağırıldığında, form elemanını hareket ettirerek basit bir JavaScript animasyonu oluşturmamızı sağlıyor. setInterval fonksiyonu ile de konum değiştirme fonksiyonu program durdurulana kadar, her 500 milisaniyede bir çağırılarak istenilen animasyon görünümü sağlanmış oluyor. Bu ve benzeri yollarla istenilen görünümde animasyonları oluşturmak ve gelişmiş animasyon efektlerini kolaylıkla gerçekleştirmemizi sağlayan başlıca JavaScript animasyon kütüphaneleri: $fx (HTML nesneleri hareket ettirmek ve belli bir zaman sürecinde herhangi bir CSS özelliğini değiştirmeye yarayan kütüphane), FacebookAnimation (Facebook uygulamaları için CSS tabanlı animasyon oluşturmayı sağlayan kütüphane), FX (renk değiştirme ve kaydırma animasyonlarını destekleyen bir animasyon kütüphanesi) ve JSTweener (geniş kapsamlı ele alacağımız geçiş animasyonları oluşturma ve ara doldurma (tweening) kütüphanesi) kütüphaneleridir.

JSTweener Kütüphanesi

Bu kütüphanenin özelliklerinden bahsetmeden önce "tween" kavramını öğrenelim. Tween terimi anahtar kareler arasında, ardışık karelerle animasyon oluşturma anlamına gelir. Bilgisayar yazılımlarında şekil arası doldurma ve ara hareket oluşturmada kullanılır. JSTweener JavaScript tabanlı Tweener sınıfına bir ara doldurma (tweening) kütüphanesidir. Bu kütüphane daha hassas ve hızlı animasyonlar için sıfırdan tasarlanmış olup, eş zamanlı animasyonlar oluşturmaya olanak sağlar. Tüm temel tarayıcılar tarafından desteklenir. Kütüphaneyi JSTweener linkinden indirebilirsiniz. Şimdi bir örnekle kütüphanenin kullanımını bir ASP.NET sayfası üzerinde görelim. Kütüphaneyi indirdikten sonra, ASP.NET projemize bu dosyaları şekilde görüldüğü gibi ekliyoruz :

Sonrasında, kütüphaneyi kullanabilmek için sayfanın <head> bölümüne bu satırı eklememiz gerekiyor :

<script language="javascript" type="text/javascript" src="src/tweenjs/Tween.js">          </script>

Kütüphanenin eylemleri Tween'ler üzerinden gerçekleştirildiği için, öncelikle bunu oluşturmayı görelim. Bir Tween değişkeni oluşturabilmek için, Tween sınıfının yapıcı methodunu (constructor) çağırıp, gerekli parametreleri girmemiz gerekiyor.

var t = new Tween(nesne,ozellik,hız,ilk,son,sayi,sonek);

nesne : Bu parametreye şeklini düzenlemek, hareket ettirmek, efekt eklemek gibi değişiklikler yapacağımız nesneyi yazıyoruz.

ozellik : Bu parametre hedef nesne üzerinde güncellenir ve boş bırakılabilir.

hız : Hareketin hızını ve uygulanacak genişliği belirleyen parametredir.

ilk : Başlangıç pozisyonunun girildiği parametredir.

son : Hareketin bitiş pozisyonunun girildiği parametredir.

sayi : Saniyede oluşturulacak animasyon sayısının girildiği parametredir.

sonek : Buraya düzenlenecek özelliğin son eki girilir; px (piksel),pt (punto) gibi.

Şimdi basit bir örnek üzerinden kütüphanenin kullanımını görelim :


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="lib/tweenjs-0.5.0.min.js">    </script>
    <script language="javascript" type="text/javascript" src="src/tweenjs/Tween.js">      </script>
</head>


<body>
    <form id="form1" runat="server">
    <div>
    <div id="sq" style="width:50px;height:50px;position:relative;left:0px;border:1px solid #333333;background-color:Blue"></div>

    <input type="button" value="Harekete Başla" onclick="
    t1 = new Tween(document.getElementById('sq').style,'left',Tween.elasticEaseOut,0,500,10,'px');

    var a = new Object();
    a.onMotionFinished = function(){
       alert( 'Hareket Sonlandı' )
    };
    a.onMotionStarted = function(){
       alert( 'Hareket Başladı' )
    }

    t1.addListener(a)
    t1.start();"/>

    <input type="button" onclick="t1.stop();" value="Durdur" />
    <input type="button" onclick="t1.resume();" value="Devam Et"/>
    <input type="button" onclick="t1.rewind();" value="Başa Dön"/>
    <input type="button" onclick="t1.forward();" value="Sona Git"/>
    </div>
    </form>
</body>

</html>

Örneğimizde öncelikle "Harekete Başla" butonunda "new Tween(document.getElementById('sq').style,'left',Tween.elasticEaseOut,0,500,10,'px')" satırıyla hareket ettireceğimiz Tweenimizi oluşturduk. Oluşturduğumuz a değişkeni üzerinden onMotionFinished olay işleyicisini çağırarak hareketin bitişinde ve onMotionStarted olay işleyiciyle de hareketin başlangıcında birer mesaj gösterdik. Eklediğimiz diğer butonlarla da hareketi durdurma, kaldığı yerden devam ettirme, başa alma, hareketin mümkün en son pozisyonuna gitme gibi düzenlemelerini sağladık. Örnekteki kodu çalıştırdığımızda ilk olarak şekildeki görüntüyü alıyoruz :