DOM انیمیشن ها (DOM Animations)
اینجا «انیمیشن DOM» را یاد می گیریم. «انیمیشن (Animation)» یعنی تغییر آهسته استایل در زمان. مثل حرکت توپ در بازی. با زمان سنج، استایل عنصر کم کم عوض می شود.
اسکلت انیمیشن با زمان سنج
با setInterval یک تابع را تکراری اجرا کن. «زمان سنج (Timer)» یعنی اجرای دوره ای کد هر چند میلی ثانیه.
let id = null;
function frame() {
const finished = false;
if (finished) {
clearInterval(id);
} else {
// اینجا استایل را ذره ذره تغییر بده
}
}
id = setInterval(frame, 5);
ساخت انیمیشن حرکت مورب
اینجا یک مربع از گوشه بالا-چپ تا 350 پیکسل حرکت می کند. «موقعیت (Position)» با style.top و style.left جابه جا می شود.
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos === 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
نکات ظرف و چیدمان
عنصر متحرک باید داخل «ظرف» باشد. ظرف position: relative دارد. خود عنصر position: absolute می گیرد تا آزادانه جابه جا شود.
نکته: بازه زمانی کوچک تر، حرکت نرم تر می دهد؛ اما استفاده از CPU بیشتر می شود.
گام های عملی
- یک ظرف بساز و به آن
idبده. - عنصر متحرک را داخل ظرف قرار بده.
- با
setIntervalمقدارtopوleftرا کم کم زیاد کن.
لینک های مرتبط
- برای رنگ و اندازه، صفحه DOM CSS را ببین.
- برای واکنش به کلیک، برو به رویدادهای DOM.
جمع بندی سریع
setIntervalکد را دوره ای اجرا می کند.- با تغییر تدریجی استایل، انیمیشن می سازیم.
- ظرف نسبی، عنصر مطلق را کنترل می کند.
- حد توقف بگذار تا زمان سنج خاموش شود.