آموزش اکما اسکریپت - کار با انیمیشن ها (Animations) در ECMAScript

شما می توانید از جاوا اسکریپت برای ایجاد انیمیشن های پیچیده استفاده کنید. لیست برخی از انیمیشن ها در زیر آمده است:

انیمیشن های Firework
افکت محو شدن
داخل شدن (Roll-in) و بیرون رفتن (Roll-out)
انیمیشن های رفت و برگشتی
حرکت دادن یک عنصر

در این فصل یاد می گیریم که چطور از جاوا اسکریپت برای ساخت انیمیشن استفاده کنیم.

از جاوا اسکریپت می توان برای حرکت تعدادی از عناصر DOM (مثل <img/>، <div> یه هر عنصر html دیگر) استفاده کرد.

برای ایجاد انیمشین با جاوا اسکریپت از توابع زیر استفاده می شود.

setTimeOut(function,duration) : این تابع، متد function را بعد از سپری شدن مدت زمان duration به میلی ثانیه، فراخوانی می کند.

setInterval(function,duration) : این تابع متد function را هر duration میلی ثانیه یکبار فراخوانی می کند.

clearTimeOut(setTimeOut_variable): این تابع هر timer ایی که با تابع setTimeOut() ایجاد شده را حذف می کند.

جاوا اسکریپت می تواند تعدادی از خصیصه های یک شی DOM از جمله موقعیت آن روی صفحه را تنظیم کند. همچنین می توانید مقدار left و top خصیصه یک شی را تنظیم کنید تا آن را در هر جایی از صفحه قرار دهید.

// 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

انیمیشن های دستی (غیر خودکار)

حال بیایید با هم یک انیمشین ساده را با استفاده از پروپرتی های یک شی DOM و توابع جاوا اسکرپیت پیاده سازی کنیم. در زیر متدهای مختلفی که برای اینکار استفاده می شود را توضیح می دهیم.

با استفاده از تابع getElementByID() یک شی DOM را گرفته و سپس آن را به متغیر سراسری imgObj نسبت می دهیم.

سپس یک متد مقداردهی به نام init() را برای مقداردهی کردن imgObj به جایی که ما خصیصه left و موقعیت آن را تنظیم کرده بودیم، تعریف می کنیم.

تابع مقداردهی را هنگام بارگذاری پنجره مرورگر فراخوانی می کنیم.

یک متد به نام moveRight() را که فاصله شی را به میزان 10 پیکسل از چپ افزایش می دهد، فراخوانی می کنیم. شما می توانید مقدار آن را منفی بدهید تا عنصر به سمت چپ حرکت کند.

مثال

<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>

انیمیشن خودکار

در مثال بالا، دیدیم که چطور با هر بار کلیک روی دکمه، عکس به سمت راست حرکت می کند. ما می توانیم این فرآیند را با کمک تابع setTimeOut() بصورت خودکار انجام بدهیم. در این قسمت ما متدهای بیشتری را اضافه کردیم.

متد moveRight() تابع setTimeOut() را برای تنظیم موقعیت imgObj فراخوانی می کند. همچنین یک تابع دیگری به نام stop() اضافه کردیم تا timer ایی که توسط تابع setTimeOut() ایجاد شده است را حذف کند، و موقعیت آبجکت را به وضعیت اولیه اش بر می گرداند.

مثال

<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>

Rollover کردن با رویداد ماوس

در زیر یک مثال ساده از نحوه rollover کردن یک عکس توسط رویداد ماوس را بررسی می کنیم.

حال بیاید ببینیم که در مثال زیر از چه چیزی استفاده کردیم.

در زمان بارگذاری این صفحه، دستور if بررسی می کند که آیا شی تصویر وجود دارد یا نه؟ اگر وجود نداشت، این بلوک از کد اجرا نمی شود.

متد سازنده Image() یک عکس جدید به نام image1 ایجاد می کند. پروپرتی src نام فایل عکس به نام/images/html.gif نسبت داده می شود.

به همین نحو، یک شی عکس دیگر به نام image2 ایجاد و /images/http.gif را به آن نسبت می دهیم.

علامت هش (#) لینک را غیرفعال می کند تا مرورگر پس از کلیک روی لینک به جایی مراجعه نکند. این لینک، همان عکس مان است. رویداد onMouseOver موقعی اتفاق می افتد که ماوس کاربر روی لینک برود، و رویداد onMouseOut موقعی اتفاق می افتد که مکان نمای ماوس کاربر از روی لینک (عکس) کنار برود. هنگامی که مکان نمای ماوس روی یک عکس می آید، عکس مورد نظر از تصویر 1 به تصویر 2 تغییر می کند. هنگامی که ماوس از روی عکس کنار می رود، عکس اصلی نمایش داده می شود. هنگامی که ماوس از روی یک لینک کنار می رود، تصویر اولیه html.gif دوباره ظاهر می شود.

<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>