গত বছরের শেষের দিকে আমি ক্রোম ডেভ সামিট সাইট তৈরি করেছি। আমি চেয়েছিলাম এটি একটি মেটেরিয়াল ডিজাইনের চেহারা এবং অনুভব করুক, যেহেতু এটি একটি দুর্দান্ত ডিজাইনের ভাষা, এবং আমি অনুভব করেছি যে আমি যে ধরনের সাইট তৈরি করতে চাই তার জন্য এটি উপযুক্ত হবে৷ কিন্তু, যেকোন নতুন ডিজাইনের ভাষার মতই, এখানে প্রশ্ন, চ্যালেঞ্জ এবং সিদ্ধান্ত নিতে হয় এবং বিশেষ করে ওয়েবের কনভেনশনের সাথে কাজ করার সময়।
সাইটটির একটি দিক যা তৈরি করা বিশেষভাবে চ্যালেঞ্জিং ছিল তা হল "টেকওভার" প্রভাব যখন আপনি একটি কার্ডে ক্লিক করেন।
60fps এ চালানোর জন্য এই ধরনের একটি প্রভাব পেতে কিছু চিন্তাভাবনা, প্রোটোটাইপিং এবং কয়েকটি আকর্ষণীয় আপস লাগে। ক্রোম ডেভ সামিটে, আমি এই প্রভাব সম্পর্কে কথা বলেছিলাম এবং আমি কীভাবে এটি তৈরি করতে গিয়েছিলাম তা বিশদভাবে ব্যাখ্যা করেছি।
একটি উচ্চ কর্মক্ষমতা অ্যানিমেশন নির্মাণ
হাই পারফরম্যান্স অ্যানিমেশনগুলি , আজ অন্তত, সেইগুলি যা ব্রাউজারের কম্পোজিটরের পক্ষে। আপনি যদি রূপান্তর এবং অস্বচ্ছতার বৈশিষ্ট্যগুলি পরিবর্তন করতে সক্ষম হন তবে সাধারণত আপনি দুর্দান্ত পারফরম্যান্স দেখতে পাবেন। কার্ড অ্যানিমেশনে আমি যে সাধারণ পদ্ধতিটি নিয়েছিলাম তা ঠিক তা করে:
- কার্ডটি ভেঙে গেলে কার্ডের সমস্ত উপাদানের অবস্থান পরিমাপ করুন।
- এটিকে প্রসারিত করতে কার্ডের ক্লাস টগল করুন (অ্যানিমেশন ছাড়াই)।
- কার্ডের উপাদানগুলির অবস্থান পুনরায় পরিমাপ করুন এখন কার্ডটি প্রসারিত হয়েছে।
- পার্থক্য গণনা করুন।
- উপাদানগুলিকে শুরুর অবস্থানে ফিরিয়ে আনতে নেতিবাচক রূপান্তর প্রয়োগ করুন।
- অ্যানিমেশন চালু করুন।
- নেতিবাচক রূপান্তরগুলি সরান এবং স্ক্রীনে উপাদানগুলিকে তাদের চূড়ান্ত অবস্থানে নিয়ে যান।
এই সব কিছু ব্যয়বহুল মনে হতে পারে, কিন্তু অ্যানিমেশন শুরু করার আগে একজন ব্যবহারকারী ইন্টারঅ্যাক্ট করার মুহূর্ত থেকে 100ms এর একটি উইন্ডো আছে। এর থেকে বেশি কিছু এবং ব্যবহারকারী একটি বিলম্ব বুঝতে পারবে। আপনি এই সময়টিকে ব্যয়বহুল প্রস্তুতিমূলক কাজ করতে ব্যবহার করতে পারেন যাতে আপনি অ্যানিমেশনের সময় আরও সস্তায় চালাতে পারেন। পরিপাটি কাজ করার জন্য প্রায় 50-100ms এর শেষে একটি উইন্ডোও রয়েছে, যা আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে সহজ হতে পারে।
অ্যানিমেশন করার জন্য ব্যয়বহুল কাজটি সেই প্রথম 100ms এর মধ্যে করা হয় এবং, একটি Nexus 5-এ কাজটি 70ms এর অঞ্চলে কিছু লাগে, তাই অতিরিক্ত জায়গা আছে।
কোড পান
আপনি যদি সাইটটি আরও বিস্তারিতভাবে দেখতে আগ্রহী হন তবে আপনি GitHub-এ কোডটি প্রকাশ করা হয়েছে শুনে খুশি হবেন, তাই যান এবং একবার দেখুন!