بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ

آموزشی - ساخت تصویر و انیمیشن بدون افت کیفیت در دستگاههای مختلف

مدیریت گفتگو
MiRHaDi 12 سال پیش
آخرین تغییر: 12 سال پیش

سلام

وقتی ما از تصاویر Bitmap (مثل Jpeg , Png ) استفاده میکنیم ، در دستگاههای مختلف که از سایز نمایشگر و یا تراکم تصویر متفاوت برخورداند ، کیفیت متفاوتی را خواهیم دید. برای عدم افت کیفیت معمولا برای هر تصویر از چند سایز مختلف در برنامه استفاده میکنیم و در پوشه های hdpi , mdpi , ... قرار میدهیم . این کار باعث میشه که حجم فایل خروجی برنامه بالا بره ؛

خوب یک راه حل مناسب برای اینکار استفاده از تصاویر برداری Vector بجای عکس هست. ( البته بعضی جاها نیاز میشه از Bitmap استفاده کنیم ، بسته به نوع گرافیکی که میخوایم داشته باشیم ) که در وبسایتها هم مورد استفاده قرار میگیره.

یک فرمت شناخته شده و استاندارد برای اینکار svg میباشد.

از قابلیتهای مختلف این فرمت تعریف animation درون آن هست ، شما میتونید هر گونه انیمیشنی را درون فایل تعریف کرده و استفاده کنید ، حتی قابلیت واکنش پذیری هم داره و میتونید تعریف کنید وقتی ماوس روی تصویر آمد چه حرکت یا افکتی داشته باشه

هر چقدر هم زوم کنید و یا از دیوایسهای با مانیتور بزرگ ( حتی تلویزیون هوشمند ) استفاده کنید از کیفیت کاسته نخواهد شد

نمونه ای از تصویر svg :

نمونه واکنشپذیر :

 

و نمونه متحرک : http://fekrebartar.ir/animate-svg.htm

نظرات

MiRHaDi 12 سال پیش
جهت مشاهده بهتر تصاویر آنها را در صفحه جدید باز کنید : open image in new tab
مجتبی یگانه 12 سال پیش
خیلی عالیه ، ولی به نظرم محدودیت و سختی بیشتری در طراحی خواهیم داشت ! - من خودم که خوصله اش رو ندارم D: -خیلی ممنون
hamidd 12 سال پیش
svg کلا مناسب صفحات وبه .اون نمونه دومی (دایره) خودش واکنش پذیر نیست، توسط کدهایی که توی صفحه ی وب وجود داره متوقف یا پلی میشه ( وقتی کاربر ماوس رو روش میبره تشخیص میده پلی میکنه).
MiRHaDi 12 سال پیش
وقتی از webView استفاده میکنیم ، در واقع داریم صفحه وب باز میکنیم ، مشکل چیه ؟
MiRHaDi 12 سال پیش
این نمونه ها که گذاشته شده بدون css و بدون javascript هست و فقط از امکانات svg استفاده کرده
override 12 سال پیش
برنامه ای برای ساخت انیمیشن دو بعدی مثل همین نمونه ای که قرار دادید سراغ دارید که این فرمت رو هم ساپورت کنه؟
hamidd 12 سال پیش
عزیزم مشکلی نداره، یکم واکنش پذیر کردنشون سخته و کار هر کسی هم نیست.در کل ممنونیم از این که اطلاعاتتون رو به اشتراک گذاشتید.
hamidd 12 سال پیش
یه چیزی یادم رفت بگم.من اون فایل svg دومی رو چند روز پیش دانلود کردم و با برنامه ی Aurora SVG Viewer & Converter بازش کردم.همش در حال چرخیدن بود ،واکنش گرا نبود به خاطر همینه که میگم خودشون واکنش گرا نیستن.ولی داخل صفحه ی وب هر وقت ماوس میرفت روش به چرخش میومد.

هنوز پاسخی ثبت نشده است


پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .