مشاوره رایگان

ورود عضویت کسب درآمد

سبد خرید شما 0

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

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

ساخت انیمیشن در Java Script

ما می توانیم با استفاده از جاوا اسکریپت ، یک انیمیشن پیچیده ایجاد کنیم فرضا:

آتش بازی (firework)
محو شدن اثر (fade effect)
Roll-in یا Roll-out
Page-in یا Page-out
حرکت اشیاء

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

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

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

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

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

جاوا اسکریپت ، هم چنین می تواند تعدادی از صفت های یک شیء DOM از جمله موقعیت آن بر روی صفحه را تنظیم نماید. ما می توانیم صفت top و left از یک شیء را به موقعیت آن را در هر نقطه روی صفحه نمایش تنظیم کنیم. قاعده نوشتاری (syntax) آن به صورت زیر می باشد:

// 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 متغیر را تنظیم نموده ایم.
در هنگام بارگذاری پنجره ، تابع مقداردهی اولیه را فراخوانی می کنیم.
در نهایت ، تابع () motionRight را برای افزایش فاصله سمت چپ به 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>

خروجی

به ازای هر بار کلیک کردن بر روی کلید Click Me ، تصویر فوق به اندازه 10 پیکسل به سمت راست حرکت می کند.

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

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

در اینجا ، ما متدهای بیشتری اضافه کرده ایم. از این رو ، بیایید ببینیم چه چیزی جدید اضافه شده است :

تابع () motionRight ، تابع () 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>

خروجی

Rollover با رویداد Mouse

در اینجا یک مثال ساده نشان داده شده است که نشانگر rollover تصویر با یک رویداد mouse می باشد.

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

در زمان بارگذاری این صفحه ، دستور ' if ' ، وجود شیء image را بررسی می کند. اگر شیء image در دسترس نباشد ، این بلوک اجرا نخواهد شد.
سازنده () Image ، یک شی image جدید به نام image1 را ایجاد کرده و پیش بارگذاری (preload) می کند.
خصیصه 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>

خروجی

با قرار دادن موس بر روی تصویر فوق ، خروجی زیر حاصل می شود:

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

در این مجموعه به آموزش کامل ckeditor از نصب آن تا شخصی سازی و افزودن امکانات اختصاصی به ان می پردازیم.…

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

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

انیمیشن دستی

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

Rollover با رویداد Mouse

آیا نیاز به مدرک هم دارید؟