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

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

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

  • Fireworks
  • Fade Effect
  • Roll-in or Roll-out
  • Page-in or Page-out
  • Object movements

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

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

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

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

  • setTimeout( function, duration): این تابع بعد از یک میلی ثانیه از زمان حال تابع رافراخوانی می کند.
  • setInterval(function, duration): این تابع بعد از هر میلی ثانیه، تابع را فراخوانی می کند.
  • clearTimeout(setTimeout_variable): این تابع، هر تایمر تنظیم شده توسط توابع setTimeout () را پاک می کند.

جاوا اسکریپت همچنین می تواند تعدادی از ویژگی های یک شئ DOM از جمله موقعیت آن را بر روی صفحه تنظیم کند. شما می توانید attribute بالا و چپ یک شئ را به موقعیت آن در هر نقطه ای از صفحه تنظیم کنید.

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

انیمیشن دستی (Manual)

یک انیمیشن ساده با استفاده از خاصیت های (properties ) شیء DOM و توابع جاوا اسکریپت به صورت زیر اجرا می شود. لیست زیر شامل روش های مختلف DOM است:

  • از تابع getElementById() جاوا اسکریپت برای get شئ DOM و اختصاص آن به یک متغیر جهانی imgObj استفاده می کنیم.
  • یک تابع مقدار دهی اولیه init () را برای مقداردهی imgObj تعریف کرده ایم که در آن position (موقعیت) و  left attributes (ویژگی های چپ) تعیین شده است .
  • تابع مقدار دهی اولیه را در زمان لود پنجره فراخوانی می کنیم.
  • در نهایت، ما خواستار motionRight () برای افزایش فاصله سمت چپ با 10 پیکسل می باشیم. با تنظیم آن به مقدار منفی به سمت چپ حرکت می کند.

 

مثال

<html>
   
   <head>
      <title>انیمیشن جاوا اسکریپت</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>لطفا روی دکمه های زیر کلیک کنید تا انیمیشن فعال شود</p>
         <input type="button" value="کلیک کنید" onclick="moveRight();" />
      </form>
      
   </body>
</html>

خروجی

 

انیمیشن اتوماتیک

در مثال بالا چگونگی حرکت تصویر با استفاده از کلیک را دیدیم. ما با استفاده از تابع جاوا اسکریپت setTimeout ()  می توانیم این فرآیند را به صورت زیر انجام دهیم.

ما چند متد اضافه کرده ایم:

  • تابع moveRight()، تابع setTimeout() را برای تعیین موقعیت imgObj فراخوانی می کند.
  • ما تابع جدید ()stop را برای پاک کردن تایمر تعیین شده توسط تابع setTimeout () و تعیین شئ در موقعیت اولیه آن اضافه کرده ایم.

مثال

کد زیر را امتحان کنید.

<html>
   
   <head>
      <title>انیمیشن جاوا اسکریپت</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>برروی دکمه ها کلیک کنید تا انیمیشن پخش شود</p>
         <input type="button" value="شروع" onclick="moveRight();" />
         <input type="button" value="توقف" onclick="stop();" />
      </form>
      
   </body>
</html>

خروجی

 

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

در زیر مثال ساده ای از Rollover با رویداد ماوس قرار دارد.

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

  • در زمان بارگذاری صفحه، دستور 'if' وجود  image object (شئ تصویر) را بررسی می کند. اگر شیء تصویر در دسترس نیست، این بلوک اجرا نمی شود.
  • سازنده Image()یک شئ تصویر جدید به نام image1 را ایجاد کرده و آن را پیش بارگذاری می کند.
  • خاصیت src نام فایل تصویر خارجی /images/html.gif را فراخوانی می کند.
  • به همین ترتیب، شیء image2 را ایجاد کرده و در شیء /images/http.gif قرار داده ایم.
  • )#علامت هشتگ) این پیوند را غیر فعال می کند به طوری که مرورگر سعی نکند پس از کلیک به URL برود. این لینک تصویر است.
  • مدیریت رویداد onMouseOver زمانی که ماوس کاربر بر روی لینک حرکت می کند، هنگامی که ماوس کاربر از لینک (تصویر) دور می شود، باعث فعال شدن رویداد onMouseOut کاربر می شود.
  • هنگامی که ماوس روی تصویر حرکت می کند، تصویر HTTP از تصویر اول به تصویر دوم تغییر می کند و زمانی که ماوس از تصویر خارج می شود، تصویر اصلی نمایش داده می شود.
  • هنگامی که ماوس از روی لینک می رود، تصویر اولیهgif بر روی صفحه ظاهر می شود.
<html>
   
   <head>
      <title>رویداد Rollover ماوس</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>ماوس را برروی تصویر قرار دهید تا نتیجه را مشاهده کنید</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>

خروجی

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

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

Learn JavaScript

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...