JavaScript - Animasyon

Aşağıdaki öğelere sahip ancak bunlarla sınırlı olmayan karmaşık bir animasyon oluşturmak için JavaScript'i kullanabilirsiniz:

Fireworks
Solma Etkisi
Roll-in veya Roll-out
Sayfa içi veya Sayfa çıkışı
Nesne hareketleri

Mevcut JavaScript tabanlı animasyon kitaplığı ilginizi çekebilir: Script.Aculo.us .

Bu eğitim, bir animasyon oluşturmak için JavaScript'in nasıl kullanılacağına dair temel bir anlayış sağlar.

JavaScript, bir dizi DOM öğesini (<img />, <div> veya diğer herhangi bir HTML öğesini) mantıksal bir denklem veya işlev tarafından belirlenen bir tür modele göre sayfa çevresinde taşımak için kullanılabilir.

JavaScript, animasyon programlarında sıklıkla kullanılmak üzere aşağıdaki iki işlevi sağlar.

setTimeout( function, duration) - Bu işlev çağırır function sonra duration şu andan itibaren milisaniyeler.
setInterval(function, duration) - Bu işlev çağırır function her şeyden sonra duration milisaniye.
clearTimeout(setTimeout_variable) - Bu işlev çağrıları, setTimeout () işlevleri tarafından ayarlanan herhangi bir zamanlayıcıyı temizler.

JavaScript ayrıca, ekrandaki konumu dahil olmak üzere bir DOM nesnesinin bir dizi özelliğini ayarlayabilir. Ekranda herhangi bir yere konumlandırmak için bir nesnenin üst ve sol özelliklerini ayarlayabilirsiniz . İşte sözdizimi.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Manuel Animasyon

Öyleyse, DOM nesne özelliklerini ve JavaScript işlevlerini kullanarak aşağıdaki gibi basit bir animasyon uygulayalım. Aşağıdaki liste, farklı DOM yöntemlerini içerir.

JavaScript işlevini kullanıyoruz getElementById() bir DOM nesnesi almak ve ardından bunu bir global değişkene atamak imgObj.
Bir başlatma işlevi tanımladık init() başlatmak imgObj nereye koyduk position ve left Öznitellikler.
Pencere yüklemesi sırasında başlatma işlevini çağırıyoruz.
Sonunda arıyoruz moveRight()sol mesafeyi 10 piksel artırma işlevi. Sol tarafa taşımak için negatif bir değere de ayarlayabilirsiniz.

Misal

Aşağıdaki örneği deneyin.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

Çıktı

Otomatik Animasyon

Yukarıdaki örnekte, bir görüntünün her tıklamayla sağa nasıl hareket ettiğini gördük. JavaScript işlevini kullanarak bu işlemi otomatikleştirebilirizsetTimeout() aşağıdaki gibi -

Burada daha fazla yöntem ekledik. Öyleyse burada yeni olanı görelim -

moveRight() fonksiyon çağırıyor setTimeout()imgObj konumunu ayarlamak için işlev .
Yeni bir fonksiyon ekledik stop() tarafından ayarlanan zamanlayıcıyı temizlemek için setTimeout() işlevi ve nesneyi başlangıç konumuna ayarlamak için.

Misal

Aşağıdaki örnek kodu deneyin.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

Fare Etkinliğiyle Rollover

Burada bir fare olayı ile görüntü rollover'ı gösteren basit bir örnek verilmiştir.

Aşağıdaki örnekte ne kullandığımızı görelim -

Bu sayfayı yüklerken, 'if' ifadesi görüntü nesnesinin varlığını kontrol eder. Görüntü nesnesi mevcut değilse, bu blok yürütülmeyecektir.
Image() yapıcı, adında yeni bir görüntü nesnesi oluşturur ve önceden yükler image1.
Src özelliğine /images/html.gif olarak adlandırılan harici görüntü dosyasının adı atanır.
Benzer şekilde yarattık image2 nesnesi ve bu nesnede /images/http.gif atanmış.
# (Kare işareti), tarayıcının tıklandığında bir URL'ye gitmeyi denememesi için bağlantıyı devre dışı bırakır. Bu bağlantı bir resimdir.
onMouseOver olay işleyici, kullanıcının faresi bağlantıya hareket ettiğinde tetiklenir ve onMouseOut olay işleyicisi, kullanıcının faresi bağlantıdan (resim) uzaklaştığında tetiklenir.
Fare görüntünün üzerine geldiğinde, HTTP görüntüsü ilk görüntüden ikinciye değişir. Fare görüntüden uzaklaştırıldığında, orijinal görüntü görüntülenir.
Fare bağlantıdan uzaklaştırıldığında, ilk görüntü olan html.gif ekranda yeniden görünecektir.

<html>
   
   <head>
      <title>Rollover with a Mouse Events</title>
      
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>