در مقالهای، John Nack (که Principal Product Manager پروژهٔ فتوشاپه)، به مقایسهای اشاره کرده که در مورد سرعت اجرا (FPS) و efficiency اجرایِ یک انیمیشن در فلش و همون انیمیشن (به خیال خودش!) بر روی HTML5 Canvas ـه و فریمبرثانیهٔ اونها رو با ه مقایسه کرده:
بر روی HTML5 Canvas و روی iPhone 4، با ۲۴ فریم بر ثانیه
بر روی HTML5 Canvas و روی Nexus One، با ۴۰ فریم بر ثانیه
بر روی Flash Player 10.1 و روی Nexus One، با ۵۷ فریم بر ثانیه
و در ضمن، اظهار شده که فلشپلیر بهاندازهٔ نصف نمونهٔ HTML5 باطری مصرف کرده.
به نظر میرسه که جابز اشتباه میکرده، فلشپلیر بینظیره و همهمون توسط اپل و W3C و بقیهٔ رفقا سر کار بودهایم. زندهباد آدوبی!
این دو نمونه رو در زیر میتونید ببینید:
http://www.blackcj.com/blog/wp-content/ ... BallBounceو
http://www.blackcj.com/blog/wp-content/swfs/BallBounce-----------
اما از اونجایی که حداقل مایی که با مک کار میکنیم، برامون از روز هم روشنتره که Performance فلشپلیر روی مک ( و بدتر از اون، روی آیفون، اگر خدای ناکرده روزی برای آی فون هم بیاد) چجوریه، نمیتونیم خیلی به نتایج این تستِ غیرکارشناسی اعتماد بکنیم. و میدونیم که یکجای این مقایسه میلنگه. من اطلاعات فنی در مورد HTML5 ندارم ( فلش خیلی کار میکردم، اما تا نسخهٔ CS3 و الآنِ اون رو هم نمیدونم چجوریه)، اما خوشبختانه کسانی هستند که میدونند و ما رو «روشن» فرمودهاند. هر چیزی که میگم، برگرفته از کامنتهایِ
http://www.9to5mac.com/27167/flash-is-f ... s#comments و وبلاگِ اصلی (
http://www.blackcj.com/blog/2010/09/17/ ... e-devices/) ـه و نظر خودم نیست.
قبل از هر چیز، برای این که از قابلیتهای انیمیشنیِ HTML5 ناامید نشید، مثال زیر رو ببینید:
http://webkit.org/blog-files/3d-transfo ... cubes.htmlاگر امکانش رو دارید، روی آیفون هم تست بکنیدش. دو گزینه هم داره که با اونها میتونید شکل انیمیشن رو تغییر بدید. انصافاً، این انیمیشن پیچیدهتره، یا توپی که بالا و پایین میپره؟! ولی این مثال روی آیفون بینظیر اجرا میشه؛ چون، طراحش (Christopher Black) با HTML5 آشنا بوده، نه مثل طراح این دو انیمیشن که سازندهش، بسیار به فلش وارده، اما در HTML5 تازهارده.
مثالهای دیگر از کاربرد انیمیشن در HTML5:
http://www.paulrhayes.com/experiments/c ... Cubes.htmlhttp://www.paulrhayes.com/experiments/c ... index.html ( از کلیدهای جهتنما استفاده بکنید)
http://webkit.org/blog-files/3d-transfo ... style.htmlhttp://webkit.org/blog-files/3d-transfo ... ircle.html (نمیدونم این چند فریم بر ثانیهست! اما روی مکینتاشِ من که فکر میکنم ۱۰۰ فریم بر ثانیه بشه
)
مشکلاتِ این تستِ غیردقیق:
۱. در نمونهٔ فلش، سازنده یک sprite ( قبلاً که به اینها میگفتند Movie Clip یا Graphic!) ساخته، و اون رو به حرکت در آورده. فلش، با الگوریتمهایی که داره، تشخیص میده که کدوم قسمت از صفحه رو پاک کنه و دوباره رسم بکنه. اگر دقیق نگاه بکنید، نمونهٔ فلش اصلاً چشمک نمیزنه. اما در موردِ نمونهٔ HTML5، این طراح نابلد، اول تمام صفحه رو سفید میکنه(!)، بعد دوباره پس زمینه رو میکشه، بعد توپ رو کمی بالاتر یا پایینتر از موقعیت قبلیش دوباره رسم میکنه. پر واضحه که هیچ طراحِ حرفهای همچین کاری نمیکنه.
۲. کامنتها میگن که هیچ آدم عاقلی، انیمیشن رو مستقیماً با کمک و درونِ HTML5 Canvas انجام نمیده و با CSS3 انجام میشه. و حق هم داره، نگاهی به انیمیشنهایی که در بالا گذاشتم بیاندازید ( که همه از
viewtopic.php?f=29&t=2022 گرفته شدهاند) و میبینید که CSS3 در انیمیشن، کارش بینظیره.
۳. گذشته از همهٔ اینها، به نظر میرسه که اپل در سافاریِ آیفون، حداکثر FPS انیمیشنهای HTML5 Canvas رو برابر ۲۴ قرار داده، برای همین، اصلاً تعجبی نداره که نمیتونه بیشتر از ۲۴ فریم بر ثانیه رو نشون بده! چون، همونجوری که بالا گفتم، هیچ آدم عاقلی مستقیم از پاککردن دوباره و چندبارهٔ Canvas برای ساخت انیمیشن استفاده نمیکنه و همه از CSS3 و انیمیشنهای لایهلایهٔ اون استفاده میکنند و اگر اپل همچین تصمیمی گرفته باشه، تصمیم واقعاً عاقلانهایه -
دقت دارید که HTML5 فقط یک سری استاندارده و پیادهسازیش بهعهدهٔ سازندهٔ مرورگره و با این که کروم و سافاری هر دو از موتورِ Webkit (موتور اُپنسورسی که سالهاست اپل هدایت پروژهش رو بعهده داره) استفاده میکنند، اما در عمل، پیادهسازیهاشون ممکنه متفاوت باشه. برای همینه که در Nexus One میتونه با ۴۰ فریم در ثانیه نشون داده بشه. در سافاریِ مکینتاش هم ۵۷ فریم در ثانیه برای من نشون داده می شه.پاک کردن تمام صفحه و رسم تمام اجزای اون برای ساخت انیمیشن، مثل اینه که طراحان دیزنی برای ساخت یک انیمیشن یک ساعته، ۱۸۰۰ بار تصویر رو «کاملاً» از نو نقاشی بکنند! در حالی که حتی دیزنی هم از ۵۰ سال پیش این روش رو کنار گذاشته بود و از انیمیشنِ لایهلایه استفاده میکرد.