برچسب ها : برنامه نویسی

اجرای روانتر Animation های CSS با استفاده از قابلیت های css3 transform

ارسال شده در۰۷ تیر ۱۳۹۴
اجرای روانتر Animation های CSS با استفاده از قابلیت های css3 transform

این روزها دیگه همه Animation ها رو با css3 انجام می دیم و اکثر افکت ها رو بدون استفاده از Jquery یا سایر کتابخونه ها، پیاده سازی می کنیم. یا حد اکثر برای منطقی کردن برخی از این انیمیشن ها از Jquery برای کنترل کردن و اضافه و کم کردن کلاس استفاده می کنیم.

من همیشه به اشتباه برای انیمه کردن بصورت حرکت جسم در صفحه (مثلا حالتی رو در نظر بگیرید که یک صفحه هرچی اسکرول می کنید و به پایین صفحه میرید، اجزای اون از طرفین اسلاید شده و در عین حال Fade می شوند.) از تکنیک تغییر خصوصیات top,right,bottom و left استفاده می کردم و با تخصیص transition به اون جسم، سرعت انیمیشن رو کنرل می کردم .(می دونیم که برای چنین کاری باید display المان رو برابر absolute,relative و یا fixed قرار بدیم)

خوب مسلما همه می دونیم که این انیمیشن ها به درستی اجرا می شن و  مشکلی ندارن. اما در زمستان سال ۹۲، درست بعد از انجام یکی از پروژه ها (Duracell) در زفره مدیا پی بردم که همه چیز به زیبایی کار می کنه ولی یک مشکل خاص وجود داره! انیمیشن ها در صفحه وب من خیلی کند اجرا می شه و فشار زیادی روی کلاینت و مرورگر کاربر میاره و بعضی وقت ها انیمیشن ها با لگ اجرا میشه!

اول فکر می کردم کندی سرعتی توی کامپیوترم پیش اومده ولی با مشاهده چندین سایت با انیمیشن های خیلی زیاد پی بردم که اونها خیلی روون اجرا میشن و اینجا بود که به حقانیت متدی که استفاده می کردم شک کردم! این شد که فروتنی پیشه کرده و تمامی کد سایت های آن بزرگواران رو مورد بررسی قرار دادم و بعد فهمیدم که اونها تمامی حالات انیمیشن رو با transform تعیین کردند و نه خصوصیات اصلی css مثل top,left,margin,padding و…

به عنوان مثال می شه برای جابه جایی در راستای افق از TranslateX و در راستای عمود از TranslateY قابلیت CSS3 Transform استفاده کرد. پس از مقداری مطالعه به دلیل اصلی اجرای روون تر این کد ها پی بردم .اون هم اینه که مرورگر در حالت Transform، حالت اصلی بدون Transform اون عنصر رو حفظ می کنه و در واقع Transform فقط نحوه Render و نمایش اون عنصر رو تغییر می ده. البته css3 transform بسیار کامل هست و توابع و قابلیت های فراوان حتی افکت های ۳ بعدی داره که پیشنهاد می کنم با کمی جستجو در اینترنت، تمامی اونها رو بررسی کنید.

در پروژه Sorena که تا به امروز، بهترین پروژه ام از نظر بصری بوده، به خوبی از این قابلیت ها استفاده کردم که توی اسلاید شو و هدر صفحات داخلی این پروژه می تونید افکت های سه بعدی اون رو مشاهده کنید.

این مطلب رو با یک مثال به اتمام می رسونم.

 

دیدگاه خود را بیان کنید.

ایمیل شما منتشر نخواهد شد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *