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

چرا از انیمیشن های جاوا اسکریپت استفاده می کنیم؟

انیمیشن ها صفحات استاتیک را به تجربیات پویا تبدیل می کنند.آنها چشم کاربر را به عناصر مهم هدایت می کنند، بازخورد فوری در مورد تعاملات ارائه می دهند، و شخصیت مارک را به خوبی بارگذاری می کنند، یک ابزار به ظاهر صاف ظاهر می شوند، یا یک اثر ظریف می تواند یک رابط را فعال کند و واکنش نشان دهد فراتر از زیبایی شناسی، قابلیت های انیمیشن بهبود یافته توسط روشن کردن تغییرات دولتی - به عنوان مثال، یک دکمه اسکرول که به طور واقعی انعطاف پذیری نوار را قادر می کند تا یک فرم نوار صوتی را از طریق یک منوی سمت کاربر تغییر دهد تا یک حرکت نوار صوتی یا تغییر دهد تا یک حرکت دهد تا یک رابط کاربر را به ایجاد کند تا یک حرکت عکس العمل به یک نوار صوتی را از طریق یک رابط کاربر را به یک رابط کاربر را به یک رابط کاربری عکس العمل نشان دهد.

تکنیک های انیمیشن جاوا اسکریپت محبوب

هر تکنیک تعادل متفاوتی از سادگی، عملکرد و کنترل را ارائه می دهد. درک معاملات کمک می کند تا ابزار مناسب برای پروژه خود را انتخاب کنید.

انتقال CSS و Transforms

CSS انتقال می دهد تغییر ویژگی های بی طرف هنگامی که توسط یک اضافه کردن کلاس یا تغییر سبک ایجاد می شود، همراه با شنوندگان رویداد جاوا اسکریپت، شما می توانید تعاملات ساده اما موثر ایجاد کنید.به عنوان مثال، تغییر یا [FLT 1 ملک در شناور یا کلیک:

const button = document.querySelector('.cta');
button.addEventListener('mouseenter', () => {
 button.style.transform = 'scale(1.1)';
});
button.addEventListener('mouseleave', () => {
 button.style.transform = 'scale(1)';
});

انتقال CSS سخت افزاری است که هنگام استفاده از خواص مانند (FLT 3: و ، آنها را برای اثرات ساده ایده آل می کند.

درخواست AnimationFrame

برای کنترل سفارشی، فریم به فریم، منطق انیمیشن خود را با چرخه رنگ مرورگر همگام سازی می کند، این پایه برای بسیاری از کتابخانه های انیمیشن است و برای بوم یا انیمیشن های WebGL ضروری است. این روش به طور مکرر یک تابع callback نامیده می شود، عبور یک زمان با وضوح بالا برای محاسبه پیشرفت استفاده می شود.

const box = document.querySelector('.box');
let start = null;

function animate(timestamp) {
 if (!start) start = timestamp;
 const progress = timestamp - start;
 box.style.transform = `translateX(${Math.min(progress / 5, 300)}px)`;
 if (progress < 1500) {
 requestAnimationFrame(animate);
 }
}

requestAnimationFrame(animate);

به طور خودکار مکث زمانی که تب غیر فعال است، صرفه جویی در باتری و CPU اسناد برای الگوهای استفاده پیشرفته مانند تر و لغو.

GSAP (GreenSock Animation Platform)

GSAP یک کتابخانه بالغ و با عملکرد بالا است که توالی های پیچیده، جدول زمانی و کاهش بی وقفه را کنترل می کند، در تمام مرورگرهای کار می کند و افزونه هایی را برای انیمیشن های اسکرول شده، مورفینگ SVG و بیشتر ارائه می دهد.

gsap.to('.box', { duration: 1, x: 300, rotation: 360, ease: 'power2.out' });

ویژگی جدول زمانی GSAP به شما اجازه می دهد تا چندین انیمیشن را با زمان دقیق زیر به هم متصل کنید:

const tl = gsap.timeline();
tl.to('.box', { duration: 0.5, scale: 2 })
 .to('.box', { duration: 0.5, rotation: 90 })
 .to('.box', { duration: 0.5, scale: 1, rotation: 0 });

سایت رسمی GSAP [FLT 1] مستندات گسترده و اکوسیستم پلاگین برای نیازهای پیشرفته مانند انیمیشن های اسکرول محور فراهم می کند.

anime({
 targets: '.box',
 translateX: 250,
 rotate: '1turn',
 duration: 800,
 delay: 200,
 easing: 'easeInOutSine'
});

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!prefersReducedMotion.matches) {
 // initiate animation
 gsap.to('.box', { x: 200, duration: 1 });
} else {
 // provide static fallback, e.g., immediately set final state
 box.style.transform = 'translateX(200px)';
}