شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

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

شما می‌توانید از جاوااسکریپت برای ایجاد یک انیمیشن پیچیده با عناصر زیر استفاده کنید (اما به این موارد محدود نیست) −

  • آتش‌بازی
  • اثر محو شدن (فید)
  • حرکت به سمت بالا یا پایین (رول-این یا رول-آوت)
  • نمایش یا مخفی کردن صفحه (پیج-این یا پیج-آوت)
  • جابجایی اشیاء

شما ممکن است علاقمند به کتابخانه‌های انیمیشن مبتنی بر جاوا اسکریپت همچون Script.Aculo.us باشید.

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

جاوااسکریپت می‌تواند برای جابجایی تعدادی عنصر DOM (<img />, <div> یا هر عنصر دیگری در HTML) در صفحه به دنبال یک الگوی مشخص‌شده توسط یک معادله منطقی یا تابع استفاده شود.

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

  • setTimeout(تابع، مدت‌زمان) − این تابع، تابع را پس از مدت‌زمان میلی‌ثانیه از این لحظه فراخوانی می‌کند.

  • setInterval(تابع، مدت‌زمان) − این تابع، تابع را پس از هر مدت‌زمان میلی‌ثانیه فراخوانی می‌کند.

  • clearTimeout(متغیر setTimeOut) − این تابع، هر تایمری که توسط توابع setTimeout() تعیین شده را پاک می‌کند.

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


// 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 و توابع جاوااسکریپت پیاده‌سازی کنیم. لیست زیر حاوی روش‌های مختلف DOM می‌باشد.

  • ما از تابع جاوااسکریپت getElementById() برای گرفتن یک شیء DOM استفاده کرده‌ایم و سپس آن را به یک متغیر جهانی با نام imgObj اختصاص داده‌ایم.

  • ما یک تابع مقدماتی با نام init() تعریف کرده‌ایم تا imgObj را مقداردهی اولیه کنیم که در آن خصوصیات position و left آن را تعیین کرده‌ایم.

  • ما در زمان بارگیری صفحه، تابع مقدماتی را فراخوانی می‌کنیم.

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

مثال

با مثال زیر امتحان کنید.


<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() را برای پاک کردن تایمر تنظیم شده توسط تابع 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>

انتقال تصویر با رویداد موس

در اینجا یک مثال ساده از انتقال تصویر با رویداد موس نشان داده شده است.

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

  • در زمان بارگذاری این صفحه، دستور 'if' برای بررسی وجود شیء تصویر (image object) اجرا می‌شود. اگر شیء تصویر در دسترس نباشد، این بلوک اجرا نخواهد شد.

  • کلاس Image() یک شیء تصویر جدید به نام image1 ایجاد و پیش‌بارگذاری می‌کند.

  • ویژگی src نام فایل تصویر خارجی /images/html.gif را به آن اختصاص می‌دهد.

  • به‌طور مشابه، شیء image2 ایجاد شده و نام /images/http.gif در این شیء اختصاص داده شده است.

  • علامت # (هش) پیوند را غیرفعال می‌کند تا مرورگر در هنگام کلیک کردن بر روی تصویر، سعی در رفتن به URL نکند. این پیوند یک تصویر است.

  • رویداد onMouseOver هنگامی فعال می‌شود که موش کاربر روی پیوند (تصویر) حرکت کند، و رویداد onMouseOut هنگامی فعال می‌شود که موش کاربر از پیوند (تصویر) دور شود.

  • زمانی که موش روی تصویر حرکت می‌کند، تصویر HTTP از تصویر اول به دوم تغییر می‌کند. زمانی که موش از تصویر دور می‌شود، تصویر اصلی نمایش داده می‌شود.

  • زمانی که موش از پیوند دور می‌شود، تصویر اولیه 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>
  اعتبار سنجی فرم - درس قبلی
درس بعدی - چند رسانه ای