متحرک سازی خیلی ساده

[thinkdiff]

دوستان سلام
من jQuery رو به صورت دستورات و کد نویسی یاد گرفتم ولی در کاربردی کردن در بعضی جاها هنوز سوال دارم
سوالم در مورد انیمشن های متحرک بدون تایم هست مثل صفحه اول سایت http://www.premiumbond.com/

و یا چراغ چشمک زن سبز سایت ورزش سه در منو گزینه ی نتایج زنده:
http://www.varzesh3.com/

من میتونم انیمیشن دومی رو بسازم ولی مثلا یک بار روشن شه و بعدش خاموش ، اینکه اینطور مادام العمر خاموش روشن بشه رو نمی دونم

لطفا هر دو مورد رو به طور کامل با مثال راهنماییم کنید
خیلی ممنون میشم ازتون

[Javidhb]

"انیمیشن بدون تایم"؟ انیمیشن بدون تایم نمیشه که...

در مورد اول:
از تابع animate جی کوئری استفاده کن و خاصیت top و left رو تغییر دادن.

در مورد دوم:
از gif استفاده کردن.. در واقع یه عکسه که خودش متحرکه و چشمک میزنه... و جاوااسکریپت هیچ کارس.


=>در مورد ساخت انیمیشن:
1. بعضی کارها با توابع jQuery قابل انجامه .. مثل animate (http://api.jquery.com/animate/) که شما میتونید خصوصیات یک element مثل top و left رو در زمانی که تعیین میکنید، تغییر بدید.


//اصل کدی که باعث حرکت اون ستاره ها توی مثال اولتون میشه
$('element').animate({
"top": finalY,
"left": finalX,
}, duration, // زمان طول کشیدن انیمیشن
'linear'); // نوع افکت که از قبل توسط جی کوئری بهمراه چندین مورد دیگه آماده شدن



2. ساخت انیمیشن توسط خودتون به کمک توابع ()setInterval و ()setTimeout (توضیح راجع به جفتشون (http://www.w3schools.com/js/js_timing.asp))
اولی: یک تابع رو در فواصل زمانی مشخص تکرار میکنه... اگه متوقفش نکنید.. این تکرار تا ابد ادامه پیدا میکنه.
دومی: یک تابع رو در فاصله زمانی مشخصی فقط یک بار تکرار میکنه.

درست کردن یک شی چشمک زن:


<div style="width: 10px; height: 10px; border-radius: 5px; background-color: green;"></div>

var div = $("div");
var myVar = setInterval(function(){cheshmak()},1000);

function cheshmak()
{
div.toggle(); // برای مخفی و نمایش المنتها به کار میره
}


3. آخرین نوع انیمیشن هم فقط با استفاده از canvas قابل اجراست که میشه انیمیشنهای دوبعدی و سه بعدی ساخت.
در مورد این باید کتاب بخونید (خودمم بلد نیستم!)

[thinkdiff]

دوست عزیز من کامل متوجه توضیح دومتون شدم (چشمک زن)
ولی در مورد اولی یک قسمت هاییش رو متوجه نشدم
مثلا : finalY و finalX و duration و 'linear' . یعنی نمیدنم باید جاشون چی بذارم
اگه ممکنه با اطلاعات زیر یک مثال عملی بزنین ممنون میشم
المنت مورد نظر ==> box#
تایم 1000 میلی ثانیه
نوع افکت که از قبل توسط جی کوئری بهمراه چندین مورد دیگه آماده شدن : fadeToggle

ممنونم ازتون

[Javidhb]

$('#box').fadeToggle(1000);

()fadeToggle خودش یه تابعس مثل ()animate ..
animate (http://www.gooyait.com/1390/03/16/how-to-use-animate-function-in-jquery.html)برای به حرکت درآوردن element هاست.
fadeToggle (http://w3web.persianblog.ir/post/9)برای hide و show کردن element ها بهمراه افکت "محو شدن".

[thinkdiff]

بله کار این توابع و افکت ها رو میدونم ولی میخوام بدونم مثلا با استفاده از این دو مقدار "top": finalY, "left": finalX,
عدونه های برف به صورت تصادفی به این طرف و اون طرف حرکت می کنند؟
و اینکه linear چی هست و به جاش چی می شه قرار داد؟

[Javidhb]

جواب سوال اول و سوم: http://jsfiddle.net/QDGSV/

سوال دوم: کافیه مختصات (top و left) مقصد نهایی دونه های برف رو تصادفی انتخاب کنید.... باید دوتا عدد تصادفی درست کنید.
میمونه جهت حرکت که اونم:
left یا همون x خودمون:
اگه مثبت باشه حرکت به سمت راست
اگه منفی باشه حرکت به سمت چپ
top یا همون y:
مثبت، حرکت به سمت پایین
منفی، حرکت به سمت بالا