در گذشته برای ایجاد انیمیشنی قدرتمند که قادر به کنترل تصاویر و متنها بصورت کامل باشد از محیط Flash استفاده میگردید. این محیط به توسعه دهندگان وب این امکان را میداد تا بتوانند تصاویر متحرک و افکتهای زیبا را به درون صفحات وب خود بیاورند اگرچه استفاده از این امکان برای ما معضلاتی نظیر ضعفهای امنیتی و همچنین زمان طولانی بارگذاری صفحات وب در زمانی که شما از سرعت اینترنت متوسط استفاده میکردید به دنبال داشت.
بعد از مدتی JavaScript و بدنبال آن کتابخانه های وابسته به آن نظیر jQuery ،Prototype و Moo tools برای ایجاد تصاویر متحرک آمدند که بسیاری از ضعفهای Flash را پوشش می دادند و جلوهای غنی انیمیشن را با حجمهای بسیار کمتر ایجاد می کردند. در سالهای اخیر عنصر جدیدی برای ایجاد تصاویر متحرک در وب بنام CSS3 پا به عرصه گذاشته که مزایای خوبی نظیر افزایش سرعت بعلت استفاده از بارگذاری مستقیم توسط مرورگر را در اختیار ما قرار می دهد. ما در این مقاله سعی داریم تا مقایسه ای میان CSS و jQuery در جهت تولید تصاویر متحرک انجام دهیم.
ایجاد یک انیمیشن در CSS
قبل از بررسی این موضوع در صورتی که آشنایی قبلی با انیمیشن سازی با استفاده از CSS ندارید توصیه میکنم تا با مرور مطالبی آموزشی در سایتهایی نظیر W3Schools.com با مقدمات اینکار آشنا شوید. همچنین وقتی بنده از واژه انیمیشن در قسمت CSS استفاده میکنم منظورم هر دو مورد CSS Transitions و CSS Animations است، هرچند که کاربرد آنها با هم تفاوت دارد. Transitionها رخداد محور بوده و با رخدادهایی نظیر :hover و یا :active فعال میگردند در صورتی کهAnimationها پیچیده تر بوده و بصورت خطی در هنگام بارگذاری صفحه اجرا میشوند ( هرچند میتوان آنها را توسط JavaScript نیز کنترل کرد).
لطفا به مثال ذیل توجه فرمایید، در این مثال سعی شده تا افکت محو شدن در jQuery ( .fadeIn())
شبیه سازی شود.
HTML
CSS
#example1{
width:5em;
height:10em;
background:blue;
animation:fadeIn 5s;
}
@keyframes fadeIn{
from {opacity:0;}
to {opacity:100;}
}
در مثال بالا سعی شده تا تمرکز اجرا بر روی مرورگرهای امروزی باشد و در صورتی که بخواهیم این مورد را به مرورگرهای قدیمی نیز تعمیم دهیم باید از پیشوندهایی نظیر –webkit- ، -moz- و… در تعریف انیمیشن خود استفاده نماییم. همچنین استفاده از نام fadeIn صرفا جهت هم نام سازی با jQuery بوده و شما میتوانید هر نام دلخواه دیگری را نیز برای انیمیشن خود انتخاب کنید.
ایجاد انیمیشن با استفاده از jQuery
حال که شما در مثال بالا اندکی با اساس تولید تصاویر متحرک در CSS آشنا شدید، بهتر است نمونه ای مشابه با کمک jQuery نیز بررسی شود. در مثال ذیل سعی شده تا با استفاده از رخداد .click و همچنین قابلیت .animate() عملیات بالا را اجرایی کنیم. در ابتدا با کمک CSS شی خود را طراحی کرده سپس با jQuery مراحل ظاهر شدن و همچنین زمان اجرای آنرا کنترل خواهیم کرد. لطفا دقت نمایید که قابلیت animate() در jQuery قادر به ایجاد تغییرات صرفا در خصوصیاتی از CSS میباشد که بصورت عددی مقدار دهی شده اند . بطور مثال ما قادر نیستیم که خصوصیت رنگ پس ضمینه را تغییر دهیم. برای اینکار میتونید مثلا از jQuery UI کمک بگیرید.
HTML
CSS
#example2{
width:0;
height:0;
overflow:hidden;
background:blue;
}
jQuery
$(‘#button’).click(function() {
$(‘#example2’).animate({
height: “10em”,
width: “5em”,
opacity: “100”,}, 4000
});
});
برای اجرای فرمان فوق شما باید کتابخانه jQuery را نیز در صفحه خود وارد نمایید.
همانطور که در بالا مشاهده مینمایید پیاده سازی انیمشن با CSS به مراتب سبکتر و ساده تر است. همچنین برای مقایسه بهتر ما با پیاده سازی یک محک که در آن چندین عنصر بصورت همزمان توسط CSS3 و همچنین jQuery دستخوش تغییر میگردند به نتایج بهتری می رسیم.
CSS
مدت زمان اجرای این محک تقریبا 2.29 ثانیه
jQuery
مدت زمان اجرای این محک تقریبا 8.33 ثانیه
محک فوق نشان میدهد که CSS بصورت کاملا آشکاری سریعتر از jQuery در اجرای تصاویر متحرک میباشد. علت این امر بخاطر آن است که CSS مستقیما از ساختارهای بومی خود مرورگر برای اجرای فرایند متحرک سازی استفاده می کند و این امکان را خواهد داشت تا دستورات گرافیکی را بکمک GPU سیستم به مورد اجرا بگذارد.
البته در این بین CSS نقاط ضعفی نیز دارد بطور مثال در هنگامی که یک شکل ثابت، هم در حال حرکت و هم تغییر سایز است، شما نمی توانید این عملیات را در دو قالب زمانی مختلف و همزمان به اجرا در آورید در حالی که jQuery این ضعف را ندارد.
نتیجه گیری
بدلیل برتری هایی که در بالا بیان گردید، میتوان نتیجه گرفت که CSS عنصر مناسبتری جهت اجرای طرحهای متحرک وب می باشد. همچنین بهتر است در صورتی که تمایل به استفاده از امکانات JavaScript در اجرای انیمیشن را دارید، از JavaScript Dom و یا از کتابخانه Velocity.js و یا GSAP که دارای کارایی بمراتب بهینه تری هستند استفاده نمایید.