انیمیشن سازی در جاوا اسکریپت

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

زمان بندی

در جاوا اسکریپت دو متد برای زمانبندی وجود دارد که توسط آنها می توانید دستورات را در بازه های زمانی دلخواه اجرا نمایید. واحد زمانی در جاوا اسکریپت میلی ثانیه می باشد و 1000 میلی ثانیه معادل 1 ثانیه است.

setTimeout

وظیفه این متد اجرای دستورات تعیین شده پس از بازه زمانی مشخص شده می باشد. برای مثال فرض کنید قصد دارید هنگامی که کاربر وارد سایت شما شد یک پیغام جهت عضویت در باشگاه مشتریان به وی نمایش دهید. در چنین مواقعی می توان از setTimeOut استفاده نمود.

نحوه استفاده

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

<script>
  setTimeout(function(){},2000);
</script>

دستورات اجرایی مورد نظر درون علامت { } مربوط به function قرار می گیرد.

مثال دستوراتی بنویسید که پس از 3 ثانیه، پیغام خوش آمد گویی به کاربر نمایش دهد.

<script>
  setTimeout(function(){
    alert('کاربر گرامی به آکادمی بنو خوش آمدید');
  },3000);
</script>

setInterval

توسط این متد می توان دستوراتی را در بازه زمانی تعیین شده تکرار نمود. setInterval همانند حلقه زمان دار می باشد و از نظر ساختاری، تعداد و نوع پارامترها شبیه setTimeout می باشد.

<script>
  setInterval(function(){},2000);
</script>

مثال: دستوراتی بنویسید که هر ثانیه نام شما را در صفحه نمایش دهد.

<script>
  setInterval(function() {
    document.write("Beno Academy <br />");
  }, 1000);
</script>

با ترکیب استایل دهی و زمان بندی می توان افکت های زیبایی به عناصر HTML موجود در صفحات وب اعمال نمود.

مثال: برنامه ای بنویسید که یک توپ (div) را از نقطه صفر به نقطه 500 منتقل نماید.

تحلیل: ابتدا باید یک div به صفحه اضافه نموده و استایل اولیه را توسط CSS به آن اعمال نمایید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
    <style>
      #ball{
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 100px;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <div id="ball"></div>
  </body>
</html>

نکته: برای متحرک سازی عناصر HTML باید خاصیت position آنها را برابر absolute قرار داده و خواص top, left را مقدار دهی اولیه نماییم.

حال یک متغیر با نامی مانند  left تعریف نموده و مقدار آن را برابر صفر (فاصله اولیه عنصر از سمت چپ صفحه) قرار می دهیم.

<script>
  var left = 0;
</script>

در ادامه می بایست div مورد نظر را در صفحه پیدا کنیم.

<script>
  var left = 0;
  var myBall = document.getElementById('ball');
</script>

پس از شناسایی عنصر مورد نظر، با setTimeout می توان در بازه زمانی 10 میلی ثانیه یک واحد به خاصیت left آن اضافه نمود و این کار تا زمانی که خاصیت left به 500 برسد، باید ادامه پیدا کند.

<script>
  var left = 0;
  var myBall = document.getElementById('ball');
  setInterval(function() {
    left++;
    if(left<500){
      myBall.style.left = left + 'px';
    }
  }, 10);
</script>

حرکت رفت و برگشت

در مثال قبل div مورد نظر تنها یکبار از نقطه 0 به 500 منتقل می شود. اگر قصد داشته باشیم این div بصورت مدام در حال رفت و برگشت باشد می بایست تغییراتی را در کد اعمال کنیم.

برای پیاده سازی این افکت ابتدا باید متغیری مثلا با نام flag را به برنامه اضافه کنیم. منقل برنامه این خواهد بود که اگر flag دارای مقدار صفر بود، div به سمت راست (مقدار left افزایش پیدا کند) و اگر دارای مقدار منفی بود به سمت چپ حرکت کند(مقدار left کاهش پیدا کند).

<script>
  var left = 0;
  var flag =0;
  var myBall = document.getElementById('ball');
</script>

حال در تایمر می بایست ابتدا مقدار flag بررسی شود.

<script>
  var left = 0;
  var flag =0;
  var myBall = document.getElementById('ball');
  setInterval(function() {

    if(flag==0){
       //حرکت به سمت راست با افزایش مقدار 
    }
    else{
       //حرکت به سمت چپ با کاهش مقدار 
    }
  }, 10);
</script>

برای حرکت div به سمت راست، در صورتیکه که مقدار left به 500 نرسیده بود باید مقدار آن افزایش یابد و هنگامیکه به نقطه 500 رسید، باید مقدار flag به 1 تغییر پیدا کند تا در مرحله بعد، دستورات else اجرا شوند.

<script>
  var left = 0;
  var flag =0;
  var myBall = document.getElementById('ball');
  setInterval(function() {
   
    if(flag==0){
       //حرکت به سمت راست با افزایش مقدار 
       if(left<500){
         left++;
       }
       else{
         flag=1;
       }
    }
    else{
       //حرکت به سمت چپ با کاهش مقدار 
       
    }
  }, 10);
</script>

برای حرکت به سمت چپ (دستورات درون else مربوط به if اول) باید برعکس روش فوق عمل کرد، یعنی تا زمانی که left بزرگتر از 0 بود، مقدار آن کاهش پیدا کند و در غیر اینصورت مقدار flag برابر 0 شود تا در مرحله بعدی، مجددا به سمت راست حرکت کند. در پایان نیز باید مقدار متغیر left را برای خاصیت left عنصر مورد نظر (div) اعمال کنیم.

<script>
  var left = 0;
  var flag =0;
  var myBall = document.getElementById('ball');
  setInterval(function() {
   
    if(flag==0){
       //حرکت به سمت راست با افزایش مقدار 
       if(left<500){
         left++;
       }
       else{
         flag=1;
       }
    }
    else{
       //حرکت به سمت چپ با کاهش مقدار 
       if(left>0){
         left--;
       }
       else{
         flag=0;
       }
    }
    myBall.style.left = left+ 'px';
  }, 10);
</script>