গত বছরের শেষের দিকে আমি Chrome Dev Summit সাইটটি তৈরি করেছিলাম। আমি চেয়েছিলাম এটির চেহারা এবং অনুভূতি ম্যাটেরিয়াল ডিজাইনের মতো হোক, কারণ এটি একটি দুর্দান্ত ডিজাইন ভাষা, এবং আমার মনে হয়েছিল যে এটি আমি যে ধরণের সাইট তৈরি করতে চাই তার জন্য এটি একটি দুর্দান্ত ফিট হবে। কিন্তু, যেকোনো নতুন ডিজাইন ভাষার মতো, এখানেও প্রশ্ন, চ্যালেঞ্জ এবং সিদ্ধান্ত নিতে হয়, এবং বিশেষ করে যখন ওয়েবের প্রচলিত রীতিনীতিগুলি মোকাবেলা করতে হয়।
সাইটটির একটি দিক যা তৈরি করা বিশেষভাবে চ্যালেঞ্জিং ছিল তা হল কার্ডে ক্লিক করলে "টেকওভার" প্রভাব।
৬০fps-এ চালানোর জন্য এই ধরণের একটি ইফেক্ট পেতে কিছু চিন্তাভাবনা, প্রোটোটাইপিং এবং কিছু আকর্ষণীয় আপস করতে হয়েছে। Chrome Dev Summit-এ, আমি এই ইফেক্ট সম্পর্কে কথা বলেছিলাম এবং এটি কীভাবে তৈরি করেছি তা বিস্তারিতভাবে ব্যাখ্যা করেছিলাম।
একটি উচ্চ-কার্যক্ষমতাসম্পন্ন অ্যানিমেশন তৈরি করা
আজকাল অন্তত উচ্চ কার্যক্ষমতা সম্পন্ন অ্যানিমেশনগুলি হল সেইসব যা ব্রাউজারের কম্পোজিটরের পক্ষে। যদি আপনি ট্রান্সফর্ম এবং অস্বচ্ছতা বৈশিষ্ট্য পরিবর্তন করতে সক্ষম হন, তাহলে সাধারণত আপনি দুর্দান্ত কর্মক্ষমতা দেখতে পাবেন। কার্ড অ্যানিমেশনের ক্ষেত্রে আমি যে সাধারণ পদ্ধতিটি গ্রহণ করেছি তা ঠিক তাই করে:
- কার্ডটি ভেঙে ফেলার সময় কার্ডের সমস্ত উপাদানের অবস্থান পরিমাপ করুন।
- কার্ডটি প্রসারিত করতে এর ক্লাসগুলি টগল করুন (অ্যানিমেশন ছাড়াই)।
- কার্ডটি প্রসারিত হয়ে গেলে, কার্ডের উপাদানগুলির অবস্থান পুনরায় পরিমাপ করুন।
- পার্থক্যগুলো গণনা করো।
- উপাদানগুলিকে শুরুর অবস্থানে ফিরিয়ে আনতে নেতিবাচক রূপান্তর প্রয়োগ করুন।
- অ্যানিমেশন চালু করুন।
- নেতিবাচক রূপান্তরগুলি সরান এবং পর্দায় উপাদানগুলিকে তাদের চূড়ান্ত অবস্থানে ফিরে যেতে দেখুন।
এই সবকিছুই ব্যয়বহুল মনে হতে পারে, কিন্তু ব্যবহারকারীর ইন্টারঅ্যাক্ট করার মুহূর্ত থেকে অ্যানিমেশন শুরু হওয়ার আগে ১০০ মিলিসেকেন্ডের একটি উইন্ডো থাকে। এর বেশি হলে ব্যবহারকারী বিলম্ব বুঝতে পারবেন। আপনি এই সময়টি ব্যয়বহুল প্রস্তুতিমূলক কাজ করার জন্য ব্যবহার করতে পারেন যাতে আপনি অ্যানিমেশনের সময় আরও সস্তায় চালাতে পারেন। প্রায় ৫০-১০০ মিলিসেকেন্ডের শেষে কাজটি পরিষ্কার করার জন্য একটি উইন্ডোও রয়েছে, যা আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে কাজে লাগতে পারে।
অ্যানিমেশনটি করার জন্য ব্যয়বহুল কাজটি প্রথম ১০০ মিলিসেকেন্ডের মধ্যে করা হয় এবং নেক্সাস ৫-এ কাজটি প্রায় ৭০ মিলিসেকেন্ডের মতো সময় নেয়, তাই এখনও অনেক জায়গা বাকি আছে।
কোডটি পান
আপনি যদি সাইটটি আরও বিস্তারিতভাবে দেখতে আগ্রহী হন তবে আপনি জেনে খুশি হবেন যে কোডটি GitHub-এ প্রকাশিত হয়েছে , তাই একবার দেখে নিন!