সঠিক ইজিং বেছে নেওয়া

আপনার প্রজেক্টের জন্য উপযুক্ত ইজিং বেছে নিন, সেটা ইজিং ইন, আউট, বা উভয়ই। হয়তো এমনকি অতিরিক্ত মজার জন্য বাউন্স ব্যবহার করুন!

অ্যানিমেশন সহজ করার জন্য উপলব্ধ বিভিন্ন বিকল্প নিয়ে আলোচনা করার পরে, আপনার প্রকল্পগুলিতে কী ধরনের ব্যবহার করা উচিত এবং আপনার অ্যানিমেশনগুলির সময়কাল কী ধরনের হওয়া উচিত?

সারসংক্ষেপ

  • UI উপাদানগুলির জন্য সহজ-আউট অ্যানিমেশন ব্যবহার করুন; একটি Quintic সহজ-আউট একটি খুব সুন্দর, যদিও দ্রুত, আরাম.
  • অ্যানিমেশন সময়কাল ব্যবহার করতে ভুলবেন না; ইজ-আউট এবং ইজ-ইনগুলি 200ms-500ms হওয়া উচিত, যেখানে বাউন্স এবং ইলাস্টিক ইজিসগুলি 800ms-1200ms দীর্ঘ সময়ের মধ্যে ঘড়িতে থাকা উচিত।
একটি কুইন্টিক সহজ-আউট অ্যানিমেশন বক্ররেখা.

সাধারণভাবে বলতে গেলে, একটি সহজ-আউট হবে সঠিক কল, এবং অবশ্যই একটি ভাল ডিফল্ট। এটি দ্রুত শুরু করা, আপনার অ্যানিমেশনগুলিকে প্রতিক্রিয়াশীলতার অনুভূতি প্রদান করে, যা কাম্য, কিন্তু শেষে একটি সুন্দর মন্থরতার সাথে।

সিএসএস-এ ease-out কীওয়ার্ডের সাথে নির্দিষ্ট করা একটির বাইরেও সুপরিচিত সহজ-আউট সমীকরণের একটি গ্রুপ রয়েছে, যা তাদের "আক্রমনাত্মকতা" এর মধ্যে রয়েছে। দ্রুত সহজ-আউট প্রভাবের জন্য, একটি Quintic ইজ-আউট বিবেচনা করুন।

একটি Quintic ইজ-আউট অ্যানিমেশন দেখুন

অন্যান্য সহজীকরণ সমীকরণগুলি, বিশেষ করে বাউন্স বা ইলাস্টিক ইজ, অল্প ব্যবহার করা উচিত এবং শুধুমাত্র যখন এটি আপনার প্রকল্পের জন্য উপযুক্ত। কিছু জিনিস আছে যা একজন ব্যবহারকারীকে একটি ঝাঁকুনি অ্যানিমেশনের মতো অভিজ্ঞতা থেকে বের করে আনে। যদি আপনার প্রকল্পটি মজাদার হওয়ার উদ্দেশ্যে না হয়, তাহলে UI এর চারপাশে বাউন্সিং উপাদানগুলি রাখবেন না। বিপরীতভাবে, আপনি যদি এমন একটি সাইট তৈরি করেন যা হালকা মনে হয়, তাহলে সব উপায়ে বাউন্স ব্যবহার করুন!

সহজে খেলুন, কোনটি আপনার প্রকল্পের ব্যক্তিত্বের সাথে মেলে তা দেখুন এবং সেখান থেকে যান। ডেমো সহ ইজিং প্রকারের সম্পূর্ণ তালিকার জন্য, easings.net দেখুন।

সঠিক অ্যানিমেশন সময়কাল চয়ন করুন

এটি গুরুত্বপূর্ণ যে আপনার প্রকল্পে যোগ করা যেকোনো অ্যানিমেশনের সঠিক সময়কাল রয়েছে। খুব ছোট এবং অ্যানিমেশন আক্রমণাত্মক এবং তীক্ষ্ণ মনে হবে; খুব দীর্ঘ এবং এটি বাধা এবং বিরক্তিকর হবে।

  • সহজ-আউট: প্রায় 200ms-500ms । এটি চোখকে অ্যানিমেশন দেখার সুযোগ দেয়, তবে এটি বাধা বোধ করে না।
  • ইজ-ইনস: প্রায় 200ms-500ms । মনে রাখবেন যে এটি শেষ পর্যন্ত ঝাঁকুনি দেবে, এবং সময়ের পরিবর্তনের কোন পরিমাণ সেই প্রভাবকে নরম করবে না।
  • বাউন্স বা ইলাস্টিক প্রভাব: প্রায় 800ms-1200ms । ইলাস্টিক বা বাউন্স ইফেক্টের জন্য আপনাকে সময় দিতে হবে "স্থির" হতে। এই অতিরিক্ত সময় ছাড়া, অ্যানিমেশনের ইলাস্টিক বাউন্সিং অংশটি আক্রমনাত্মক এবং চোখের জন্য অপ্রীতিকর হবে।

অবশ্যই, এগুলি কেবল নির্দেশিকা। আপনার নিজের স্বাচ্ছন্দ্যের সাথে পরীক্ষা করুন এবং আপনার প্রকল্পগুলির জন্য কী সঠিক মনে হয় তা চয়ন করুন৷