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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش انیمیشن در جاوا اسکریپت خواهیم پرداخت.
برای ایجاد یک انیمیشن پیچیده با عناصر زیر می توانید از JavaScript استفاده کنید –

آتش بازی
افکت محو شدن
رول یا رول کردن
صفحه در یا صفحه خارج
حرکات اشیا

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

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

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

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

(setTimeout( function, duration – این تابع بعد از مدت زمان میلی ثانیه ، تابع را فراخوانی می کند.

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

(clearTimeout (setTimeout_variable – این تابع فراخوانی کننده هر تایمر تنظیم شده توسط توابع ()setTimeout است.

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

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

// Set distance from left edge of the screen.

object.style.left = distance in pixels or points;

// Set distance from top edge of the screen.

object.style.top = distance in pixels or points;

انیمیشن دستی

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

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

مثال

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

&lt;html&gt;   
   &lt;head&gt;
      &lt;title&gt;JavaScript Animation&lt;/title&gt;      
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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;
         //--&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;   
      &lt;form&gt;
         &lt;img id = "myImage" src = "/images/html.gif" /&gt;
         &lt;p&gt;Click button below to move the image to right&lt;/p&gt;
         &lt;input type = "button" value = "Click Me" onclick = "moveRight();" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>JavaScript Animation</title>

<!--

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>

<p>Click button below to move the image to right</p>

</form>

</body>

</html>

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

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

در اینجا روش های بیشتری اضافه کرده ایم. بنابراین بیایید ببینیم اینجا چه خبر است –

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

مثال

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

&lt;html&gt;   
   &lt;head&gt;
      &lt;title&gt;JavaScript Animation&lt;/title&gt;      
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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;
         //--&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;   
      &lt;form&gt;
         &lt;img id = "myImage" src = "/images/html.gif" /&gt;
         &lt;p&gt;Click the buttons below to handle animation&lt;/p&gt;
         &lt;input type = "button" value = "Start" onclick = "moveRight();" /&gt;
         &lt;input type = "button" value = "Stop" onclick = "stop();" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>JavaScript Animation</title>

<!--

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>

<p>Click the buttons below to handle animation</p>

</form>

</body>

</html>

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

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

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

هنگام بارگذاری این صفحه، دستور ‘if’ وجود شی image تصویر را بررسی می کند. اگر شی image در دسترس نباشد ، این بلوک اجرا نمی شود.
سازنده ()Image یک شی تصویر جدید به نام image1 ایجاد و بارگیری می کند.
به ویژگی src نام فایل تصویر خارجی به نام /images/html.gif اختصاص داده شده است.
به همین ترتیب، ما شی image2 را ایجاد کرده و /images/http.gif را در این جسم اختصاص داده ایم.
# (علامت هش) پیوند را غیرفعال می کند تا مرورگر هنگام کلیک کردن به یک URL نرود. این پیوند یک تصویر است.
وقتی ماوس کاربر بر روی لینک حرکت می کند، کنترل کننده رویداد onMouseOver فعال می شود و هنگامی که ماوس کاربر بر روی لینک دور می شود، کنترل کننده رویداد onMouseOut فعال می شود.
هنگامی که ماوس بر روی تصویر حرکت می کند ، تصویر HTTP از تصویر اول به تصویر دوم تغییر می کند. وقتی ماوس از تصویر دور شد ، تصویر اصلی نمایش داده می شود.
وقتی موس بر روی لینک دور شد ، تصویر اولیه html.gif دوباره در صفحه ظاهر می شود.

&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Rollover with a Mouse Events&lt;/title&gt;
      
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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";
            }
         //--&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Move your mouse over the image to see the result&lt;/p&gt;
      
      &lt;a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;"&gt;
         &lt;img name = "myImage" src = "/images/html.gif" /&gt;
      &lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Rollover with a Mouse Events</title>

<!--

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

</a>

</body>

</html>

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

انیمیشن دستی

مثال

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

مثال

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

دیدگاه شما

بدون دیدگاه

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

انیمیشن دستی

مثال

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

مثال

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه