CSS3 و jQuery در تولید انیمیشن : در گذشته برای ایجاد انیمیشنی قدرتمند که قادر به کنترل تصاویر و متنها بصورت کامل باشد توسط محیط Flash این کار را انجام می داند. محیط برنامه فلش به توسعه دهندگان وب این امکان را میداد تا بتوانند تصاویر متحرک و افکتهای زیبا را به درون صفحات وب خود بیاورند اگرچه استفاده از این امکان برای ما معضلاتی نظیر ضعفهای امنیتی و همچنین زمان طولانی بارگذاری صفحات وب در زمانی که شما از سرعت اینترنت متوسط استفاده میکردید به دنبال داشت.
بعد از مدتی JavaScript و بدنبال آن کتابخانه های وابسته به آن نظیر jQuery ،Prototype و Moo tools برای ایجاد تصاویر متحرک بودند که تعداد زیادی از ضعفهای Flash را پوشش می داد و جلوهای غنی انیمیشن را با حجمهای بسیار کمتر ایجاد می نمودند. در حال حاضر عنصر جدیدی برای ایجاد تصاویر متحرک در وب بنام CSS3 پا به عرصه گذاشته که مزایای خوبی نظیر بالا بردن سرعت بعلت استفاده از بارگذاری مستقیم توسط مرورگر را در اختیار ما قرار خواهد داد. ما در این مقاله تصمیم داریم تا مقایسه ای میان CSS و jQuery در جهت تولید تصاویر متحرک انجام بدهیم.
CSS3 و jQuery در تولید انیمیشن و نحوه ایجاد یک انیمیشن در CSS
پیش از بررسی این موضوع در صورتی که آشنایی قبلی با انیمیشن سازی توسط CSS ندارید پیشنهاد میکنیم تا با مرور مطالبی آموزشی در سایتهایی نظیر W3Schools.com با مقدمات اینکار آشنا گردید. همچنین وقتی بنده از واژه انیمیشن در قسمت CSS استفاده میکنم منظورم هر دو مورد CSS Transitions و CSS Animations می باشد، اگرچه کاربرد آنها با هم تفاوت هایی دارد. Transitionها رخداد محور بوده و با رخدادهایی مانند :hover و یا :active فعال خواهند شد اگر چه Animationها پیچیده تر هستند و بصورت خطی در هنگام بارگذاری صفحه اجرا می گردند ( هرچند میتوان آنها را توسط JavaScript نیز کنترل نمائید).
لطفا به مثالی که در ادامه خواهیم زد توجه فرمایید، در این نمونه سعی شده تا افکت محو شدن در jQuery ( .fadeIn())
شبیه سازی گردد.
background:blue;
animation:fadeIn 5s;
}
@keyframes fadeIn{
from {opacity:0;}
to {opacity:100;}
}
در مثالی که زده شد سعی شده تا تمرکز اجرا بر روی مرورگرهای امروزی قرار گیرد و اگر بخواهیم این مورد را به مرورگرهای قدیمی نیز تعمیم بدهیم باید از پیشوندهایی نظیر –webkit- ، -moz- و… در تعریف انیمیشن خود استفاده کنیم. همچنین استفاده از نام fadeIn صرفا جهت هم نام سازی با jQuery است و شما میتوانید هر نام دلخواه دیگری را نیز برای انیمیشن خود انتخاب نمائید.
HTML
CSS
#example1{
width:5em;
CSS3 و 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 این ضعف را نخواهد داشت.
