এটি চিত্র: আপনি একটি নতুন প্রকল্পে যোগদান করেন, কোডবেসে ডুব দেন এবং প্রথম কয়েক ঘন্টার মধ্যে আপনি হতাশাজনকভাবে পরিচিত কিছু আবিষ্কার করেন। স্টাইলশীট জুড়ে ছড়িয়ে ছিটিয়ে, আপনি একই মৌলিক অ্যানিমেশনের জন্য একাধিক @keyframes সংজ্ঞা খুঁজে পান। তিনটি ভিন্ন ফেইড-ইন ইফেক্ট, দুই বা তিনটি স্লাইড বৈচিত্র, মুষ্টিমেয় জুম অ্যানিমেশন এবং অন্তত দুটি ভিন্ন স্পিন অ্যানিমেশন কারণ, আচ্ছা, কেন নয়? @কীফ্রেম পালস { থেকে { স্কেল: 1; } প্রতি { স্কেল: 1.1; } }
@keyframes বড়-পালস { 0%, 20%, 100% { স্কেল: 1; } 10%, 40% { স্কেল: 1.2; } }
যদি এই দৃশ্যটি পরিচিত শোনায় তবে আপনি একা নন। বিভিন্ন প্রকল্প জুড়ে আমার অভিজ্ঞতায়, আমি প্রদান করতে পারি সবচেয়ে ধারাবাহিক দ্রুত জয়গুলির মধ্যে একটি হল কীফ্রেমগুলিকে একীভূত করা এবং মানক করা। এটি এমন একটি নির্ভরযোগ্য প্যাটার্ন হয়ে উঠেছে যে আমি এখন যেকোনো নতুন কোডবেসে আমার প্রথম কাজগুলির মধ্যে একটি হিসাবে এই পরিষ্কারের জন্য অপেক্ষা করছি। বিশৃঙ্খলার পিছনে যুক্তি আপনি এটি সম্পর্কে চিন্তা যখন এই অপ্রয়োজনীয়তা নিখুঁত অর্থে তোলে. আমরা সবাই আমাদের দৈনন্দিন কাজে একই মৌলিক অ্যানিমেশন ব্যবহার করি: ফেইড, স্লাইড, জুম, স্পিন এবং অন্যান্য সাধারণ প্রভাব। এই অ্যানিমেশনগুলি বেশ সহজবোধ্য, এবং কাজটি সম্পন্ন করতে দ্রুত @keyframes সংজ্ঞাটি চাবুক করা সহজ। একটি কেন্দ্রীভূত অ্যানিমেশন সিস্টেম ছাড়া, বিকাশকারীরা স্বাভাবিকভাবেই এই কীফ্রেমগুলি স্ক্র্যাচ থেকে লেখেন, জানেন না যে কোডবেসের অন্য কোথাও অনুরূপ অ্যানিমেশন ইতিমধ্যেই বিদ্যমান। কম্পোনেন্ট-ভিত্তিক আর্কিটেকচারে কাজ করার সময় এটি বিশেষত সাধারণ (যা আজকাল আমাদের বেশিরভাগই করে), কারণ দলগুলি প্রায়শই অ্যাপ্লিকেশনের বিভিন্ন অংশ জুড়ে সমান্তরালভাবে কাজ করে। ফলাফল? অ্যানিমেশন বিশৃঙ্খলা। ছোট সমস্যা কীফ্রেম ডুপ্লিকেশনের সাথে সবচেয়ে সুস্পষ্ট সমস্যাগুলি হ'ল বিকাশের সময় নষ্ট করা এবং অপ্রয়োজনীয় কোড ব্লোট। একাধিক কীফ্রেম সংজ্ঞা মানে যখন প্রয়োজনীয়তা পরিবর্তন হয় তখন আপডেট করার জন্য একাধিক স্থান। আপনার ফেইড অ্যানিমেশনের সময় সামঞ্জস্য করতে হবে? আপনাকে আপনার কোডবেস জুড়ে প্রতিটি উদাহরণ খুঁজে বের করতে হবে। সহজীকরণ ফাংশন মানসম্মত করতে চান? সৌভাগ্য সব বৈচিত্র খুঁজে. রক্ষণাবেক্ষণ পয়েন্টগুলির এই গুণমান এমনকি সাধারণ অ্যানিমেশন আপডেটগুলিকে একটি সময়সাপেক্ষ কাজ করে তোলে। বড় সমস্যা এই কীফ্রেম ডুপ্লিকেশনটি পৃষ্ঠের নীচে লুকিয়ে থাকা আরও অনেক প্রতারক সমস্যা তৈরি করে: গ্লোবাল স্কোপ ফাঁদ। এমনকি উপাদান-ভিত্তিক আর্কিটেকচারের সাথে কাজ করার সময়, CSS কীফ্রেমগুলি সর্বদা বিশ্বব্যাপী পরিসরে সংজ্ঞায়িত করা হয়। এর অর্থ হল সমস্ত কীফ্রেম সমস্ত উপাদানগুলিতে প্রযোজ্য। সর্বদা। হ্যাঁ, আপনার অ্যানিমেশন অগত্যা আপনার উপাদানে সংজ্ঞায়িত কীফ্রেমগুলি ব্যবহার করে না৷ এটি শেষ কীফ্রেমগুলি ব্যবহার করে যা ঠিক একই নামের সাথে মেলে যা বিশ্বব্যাপী স্কোপে লোড করা হয়েছিল। যতক্ষণ না আপনার সমস্ত কীফ্রেম অভিন্ন, এটি একটি ছোটখাটো সমস্যা বলে মনে হতে পারে। কিন্তু যে মুহুর্তে আপনি একটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে একটি অ্যানিমেশন কাস্টমাইজ করতে চান, আপনি সমস্যায় পড়েছেন, বা আরও খারাপ, আপনিই তাদের কারণ হবেন। হয় আপনার অ্যানিমেশন কাজ করবে না কারণ আপনার পরে অন্য একটি উপাদান লোড হয়েছে, আপনার কীফ্রেমগুলি ওভাররাইট করছে, অথবা আপনার উপাদানটি শেষ লোড হয় এবং দুর্ঘটনাক্রমে সেই কীফ্রেমের নাম ব্যবহার করে অন্য প্রতিটি উপাদানের জন্য অ্যানিমেশন আচরণ পরিবর্তন করে এবং আপনি এটি বুঝতেও পারবেন না। এখানে একটি সহজ উদাহরণ যা সমস্যাটি প্রদর্শন করে: .component-one { /* উপাদান শৈলী */ অ্যানিমেশন: পালস 1s সহজ-ইন-আউট অসীম বিকল্প; }
/* এই @keyframes সংজ্ঞা কাজ করবে না */ @কীফ্রেম পালস { থেকে { স্কেল: 1; } প্রতি { স্কেল: 1.1; } }
/* পরে কোডে... */
.component-দুই { /* উপাদান শৈলী */ অ্যানিমেশন: পালস 1s সহজ-ইন-আউট অসীম; }
/* এই কীফ্রেমগুলি উভয় উপাদানে প্রযোজ্য হবে */ @কীফ্রেম পালস { 0%, 20%, 100% { স্কেল: 1; } 10%, 40% { স্কেল: 1.2; } }
উভয় উপাদান একই অ্যানিমেশন নাম ব্যবহার করে, কিন্তু দ্বিতীয় @keyframes সংজ্ঞা প্রথমটিকে ওভাররাইট করে। এখন কম্পোনেন্ট-এক এবং কম্পোনেন্ট-টু উভয়ই দ্বিতীয় কীফ্রেম ব্যবহার করবে, কোন কম্পোনেন্ট কোন কীফ্রেমকে সংজ্ঞায়িত করুক না কেন। পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 1 [কাঁটাযুক্ত]। সবচেয়ে খারাপ অংশ? এটি প্রায়শই স্থানীয় উন্নয়নে নিখুঁতভাবে কাজ করে তবে বিল্ড প্রক্রিয়াগুলি আপনার স্টাইলশীটের লোডিং ক্রম পরিবর্তন করলে উত্পাদনে রহস্যজনকভাবে বিরতি দেয়। আপনি অ্যানিমেশনগুলির সাথে শেষ করবেন যা ভিন্নভাবে আচরণ করে কোন উপাদানগুলি লোড করা হয়েছে এবং কোন ক্রম অনুসারে। সমাধান: ইউনিফাইড কীফ্রেম এই বিশৃঙ্খলার উত্তরটি আশ্চর্যজনকভাবে সহজ: একটি ভাগ করা স্টাইলশীটে সংরক্ষিত পূর্বনির্ধারিত গতিশীল কীফ্রেম। প্রতিটি উপাদানকে তার নিজস্ব অ্যানিমেশনগুলি সংজ্ঞায়িত করতে দেওয়ার পরিবর্তে, আমরা কেন্দ্রীভূত কীফ্রেমগুলি তৈরি করি যা ভালভাবে নথিভুক্ত, সহজেব্যবহার, রক্ষণাবেক্ষণযোগ্য, এবং আপনার প্রকল্পের নির্দিষ্ট প্রয়োজন অনুসারে তৈরি। এটিকে কীফ্রেম টোকেন হিসাবে ভাবুন। আমরা যেমন রঙ এবং ব্যবধানের জন্য টোকেন ব্যবহার করি, এবং আমাদের মধ্যে অনেকেই ইতিমধ্যে অ্যানিমেশন বৈশিষ্ট্যগুলির জন্য টোকেন ব্যবহার করি, যেমন সময়কাল এবং সহজ ফাংশনগুলির জন্য, কেন কীফ্রেমের জন্যও টোকেন ব্যবহার করবেন না? ছোট সমস্যা (কোড ডুপ্লিকেশন) এবং বড় সমস্যা (গ্লোবাল স্কোপ দ্বন্দ্ব) উভয়েরই সমাধান করার সময় এই পদ্ধতিটি আপনার ব্যবহার করা বর্তমান ডিজাইনের টোকেন ওয়ার্কফ্লোতে স্বাভাবিকভাবেই একীভূত হতে পারে। ধারণাটি সোজা: আমাদের সমস্ত সাধারণ অ্যানিমেশনের জন্য সত্যের একক উত্স তৈরি করুন৷ এই ভাগ করা স্টাইলশীটটিতে সাবধানে তৈরি করা কীফ্রেম রয়েছে যা আমাদের প্রজেক্ট আসলে ব্যবহার করে অ্যানিমেশন প্যাটার্নগুলিকে কভার করে। আমাদের কোডবেসের কোথাও একটি ফেইড অ্যানিমেশন ইতিমধ্যেই বিদ্যমান কিনা তা অনুমান করার আর দরকার নেই। অন্য উপাদানগুলি থেকে আর দুর্ঘটনাক্রমে ওভাররাইট করা অ্যানিমেশন নেই৷ কিন্তু এখানে মূল বিষয়: এগুলি শুধু স্ট্যাটিক কপি-পেস্ট অ্যানিমেশন নয়। এগুলিকে CSS কাস্টম বৈশিষ্ট্যগুলির মাধ্যমে গতিশীল এবং কাস্টমাইজযোগ্য করার জন্য ডিজাইন করা হয়েছে, নির্দিষ্ট ব্যবহারের ক্ষেত্রে অ্যানিমেশনগুলিকে মানিয়ে নেওয়ার নমনীয়তা থাকাকালীন আমাদেরকে ধারাবাহিকতা বজায় রাখার অনুমতি দেয়, যেমন আপনার যদি এক জায়গায় একটু বড় "পালস" অ্যানিমেশনের প্রয়োজন হয়। প্রথম কীফ্রেম টোকেন তৈরি করা প্রথম কম ঝুলন্ত ফলগুলির মধ্যে একটি যা আমাদের মোকাবেলা করা উচিত তা হল "ফেইড-ইন" অ্যানিমেশন। আমার সাম্প্রতিক প্রকল্পগুলির মধ্যে একটিতে, আমি এক ডজনেরও বেশি পৃথক ফেড-ইন সংজ্ঞা খুঁজে পেয়েছি এবং হ্যাঁ, তারা সবগুলি কেবল 0 থেকে 1 পর্যন্ত অস্বচ্ছতাকে অ্যানিমেট করেছে। সুতরাং, আসুন একটি নতুন স্টাইলশীট তৈরি করি, এটিকে kf-tokens.css বলি, এটিকে আমাদের প্রকল্পে আমদানি করি, এবং এর ভিতরে সঠিক মন্তব্য সহ আমাদের কীফ্রেমগুলি রাখুন। /* keyframes-tokens.css */
/* * ফেইড ইন - ফেইড এন্ট্রান্স অ্যানিমেশন * ব্যবহার: অ্যানিমেশন: kf-fade-in 0.3s সহজ-আউট; */ @keyframes kf-fade-in { থেকে { অস্বচ্ছতা: 0; } প্রতি { অস্বচ্ছতা: 1; } }
এই একক @keyframes ঘোষণা আমাদের কোডবেস জুড়ে ছড়িয়ে থাকা সমস্ত ফেড-ইন অ্যানিমেশনকে প্রতিস্থাপন করে। পরিষ্কার, সহজ, এবং বিশ্বব্যাপী প্রযোজ্য। এবং এখন যেহেতু আমরা এই টোকেনটি সংজ্ঞায়িত করেছি, আমরা এটিকে আমাদের প্রকল্প জুড়ে যেকোনো উপাদান থেকে ব্যবহার করতে পারি: .modal { অ্যানিমেশন: kf-fade-in 0.3s সহজ-আউট; }
টুলটিপ { অ্যানিমেশন: kf-fade-in 0.2s ইজ-ইন-আউট; }
বিজ্ঞপ্তি { অ্যানিমেশন: kf-fade-in 0.5s সহজ-আউট; }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 2 [কাঁটাযুক্ত]। দ্রষ্টব্য: আমরা আমাদের সকল @keyframes নামের একটি kf- উপসর্গ ব্যবহার করছি। এই উপসর্গটি একটি নামস্থান হিসাবে কাজ করে যা প্রকল্পে বিদ্যমান অ্যানিমেশনগুলির সাথে নামকরণের দ্বন্দ্ব প্রতিরোধ করে এবং এটি অবিলম্বে স্পষ্ট করে দেয় যে এই কীফ্রেমগুলি আমাদের কীফ্রেম টোকেন ফাইল থেকে এসেছে৷ একটি ডায়নামিক স্লাইড তৈরি করা কেএফ-ফেড-ইন কীফ্রেমগুলি দুর্দান্ত কাজ করে কারণ এটি সহজ এবং জিনিসগুলি এলোমেলো করার খুব কম জায়গা নেই। অন্যান্য অ্যানিমেশনে, যাইহোক, আমাদের অনেক বেশি গতিশীল হতে হবে এবং এখানে আমরা CSS কাস্টম বৈশিষ্ট্যগুলির বিশাল শক্তির সুবিধা নিতে পারি। বিক্ষিপ্ত স্ট্যাটিক অ্যানিমেশনের তুলনায় এখানেই কীফ্রেম টোকেন সত্যিই উজ্জ্বল। একটি সাধারণ দৃশ্যকল্প নেওয়া যাক: "স্লাইড-ইন" অ্যানিমেশন। কিন্তু স্লাইড কোথা থেকে? ডান থেকে 100px? বাম থেকে 50%? এটা কি পর্দার উপরে থেকে প্রবেশ করা উচিত? অথবা হয়তো নীচ থেকে ভেসে আসা? অনেক সম্ভাবনা, কিন্তু প্রতিটি দিক এবং প্রতিটি পরিবর্তনের জন্য আলাদা কীফ্রেম তৈরি করার পরিবর্তে, আমরা একটি নমনীয় টোকেন তৈরি করতে পারি যা সমস্ত পরিস্থিতির সাথে খাপ খায়: /* * স্লাইড ইন - দিকনির্দেশক স্লাইড অ্যানিমেশন * দিক নিয়ন্ত্রণ করতে --kf-slide-from ব্যবহার করুন * ডিফল্ট: বাম থেকে স্লাইড করুন (-100%) * ব্যবহার: * অ্যানিমেশন: kf-স্লাইড-ইন 0.3s সহজ-আউট; * --kf-স্লাইড-থেকে: -100px 0; // বাম থেকে স্লাইড * --kf-slide-from: 100px 0; // ডান থেকে স্লাইড * --kf-স্লাইড-থেকে: 0 -50px; // উপরে থেকে স্লাইড */
@keyframes kf-স্লাইড-ইন { থেকে { অনুবাদ: var(--kf-slide-from, -100% 0); } প্রতি { অনুবাদ: 0 0; } }
এখন আমরা এই একক @keyframes টোকেন ব্যবহার করতে পারি যে কোনো স্লাইড দিকনির্দেশের জন্য শুধুমাত্র --kf-slide-from কাস্টম প্রপার্টি পরিবর্তন করে: সাইডবার { অ্যানিমেশন: kf-স্লাইড-ইন 0.3s সহজ-আউট; /* ডিফল্ট মান ব্যবহার করে: বাম থেকে স্লাইড */ }
বিজ্ঞপ্তি { অ্যানিমেশন: kf-স্লাইড-ইন 0.4s সহজ-আউট; --kf-স্লাইড-থেকে: 0 -50px; /* উপর থেকে স্লাইড */ }
.modal { অ্যানিমেশন: kf-fade-in 0.5s, kf-স্লাইড-ইন 0.5s কিউবিক-বেজিয়ার(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* নীচে-ডান থেকে স্লাইড */ }
এই পদ্ধতিটি ধারাবাহিকতা বজায় রেখে আমাদের অবিশ্বাস্য নমনীয়তা দেয়। একটি কীফ্রেম ঘোষণা, অসীম সম্ভাবনা। পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 3 [কাঁটাযুক্ত]। এবং যদি আমরা আমাদের অ্যানিমেশনগুলিকে আরও নমনীয় করতে চাই, "স্লাইড-আউট" প্রভাবগুলির জন্যও অনুমতি দিয়ে, আমরা করতে পারিকাস্টম সম্পত্তিতে একটি --kf-স্লাইড যোগ করুন, যা আমরা পরবর্তী বিভাগে দেখতে পাব। দ্বিমুখী জুম কীফ্রেম অন্য একটি সাধারণ অ্যানিমেশন যা প্রজেক্ট জুড়ে সদৃশ হয় তা হল "জুম" প্রভাব। এটি টোস্ট বার্তাগুলির জন্য একটি সূক্ষ্ম স্কেল-আপ, মডেলগুলির জন্য একটি নাটকীয় জুম-ইন, বা শিরোনামের জন্য একটি মৃদু স্কেল-ডাউন প্রভাব হোক না কেন, জুম অ্যানিমেশনগুলি সর্বত্র রয়েছে৷ প্রতিটি স্কেল মানের জন্য আলাদা কীফ্রেম তৈরি করার পরিবর্তে, আসুন kf-জুম কীফ্রেমের একটি নমনীয় সেট তৈরি করি:
/* * জুম - স্কেল অ্যানিমেশন * স্কেল মান নিয়ন্ত্রণ করতে --kf-zoom-from এবং --kf-zoom-to ব্যবহার করুন * ডিফল্ট: 80% থেকে 100% পর্যন্ত জুম (0.8 থেকে 1) * ব্যবহার: * অ্যানিমেশন: kf-জুম 0.2s সহজ-আউট; * --kf-জুম-থেকে: 0.5; --kf-জুম-টু: 1; // 50% থেকে 100% পর্যন্ত জুম করুন * --kf-জুম-থেকে: 1; --kf-জুম-টু: 0; // 100% থেকে 0% পর্যন্ত জুম করুন * --kf-জুম-থেকে: 1; --kf-জুম-টু: 1.1; // জুম 100% থেকে 110% */
@keyframes kf-জুম { থেকে { স্কেল: var(--kf-zoom-from, 0.8); } প্রতি { স্কেল: var(--kf-জুম-টু, 1); } }
একটি সংজ্ঞা দিয়ে, আমরা আমাদের প্রয়োজনীয় যেকোনো জুম বৈচিত্র অর্জন করতে পারি: .টোস্ট { অ্যানিমেশন: kf-স্লাইড-ইন 0.2s, kf-জুম 0.4s সহজ-আউট; --kf-slide-from: 0 100%; /* উপর থেকে স্লাইড */ /* ডিফল্ট জুম ব্যবহার করে: 80% থেকে 100% পর্যন্ত স্কেল */ }
.modal { অ্যানিমেশন: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-জুম-থেকে: 0; /* নাটকীয় জুম 0% থেকে 100% */ }
শিরোনাম { অ্যানিমেশন: kf-fade-in 2s, kf-জুম 2s সহজ-ইন; --kf-জুম-থেকে: 1.2; --kf-জুম-টু: 0.8; /* মৃদু স্কেল নিচে */ }
ডিফল্ট 0.8 (80%) বেশিরভাগ UI উপাদানের জন্য পুরোপুরি কাজ করে, যেমন টোস্ট বার্তা এবং কার্ড, যদিও এখনও বিশেষ ক্ষেত্রে কাস্টমাইজ করা সহজ। পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 4 [কাঁটাযুক্ত]। আপনি সাম্প্রতিক উদাহরণগুলিতে আকর্ষণীয় কিছু লক্ষ্য করেছেন: আমরা অ্যানিমেশনগুলি একত্রিত করছি৷ @keyframes টোকেনগুলির সাথে কাজ করার অন্যতম প্রধান সুবিধা হল যে তারা একে অপরের সাথে নির্বিঘ্নে একত্রিত করার জন্য ডিজাইন করা হয়েছে। এই মসৃণ রচনাটি ইচ্ছাকৃত, আকস্মিক নয়। আমরা পরে আরও বিস্তারিতভাবে অ্যানিমেশন রচনা নিয়ে আলোচনা করব, যেখানে সেগুলি সমস্যাযুক্ত হতে পারে, তবে বেশিরভাগ সংমিশ্রণগুলি সহজবোধ্য এবং প্রয়োগ করা সহজ। দ্রষ্টব্য: এই নিবন্ধটি লেখার সময়, এবং সম্ভবত এটি লেখার কারণে, আমি নিজেকে প্রবেশদ্বার অ্যানিমেশনের পুরো ধারণাটি পুনর্বিবেচনা করতে দেখেছি। CSS-এর সাম্প্রতিক সমস্ত অগ্রগতির সাথে, আমাদের কি এখনও সেগুলি প্রয়োজন? সৌভাগ্যবশত, অ্যাডাম আর্গিল একই প্রশ্নগুলি অন্বেষণ করেছেন এবং সেগুলি তার ব্লগে উজ্জ্বলভাবে প্রকাশ করেছেন। এটি এখানে যা লেখা হয়েছে তার বিরোধিতা করে না, তবে এটি বিবেচনা করার মতো একটি পদ্ধতি উপস্থাপন করে, বিশেষ করে যদি আপনার প্রকল্পগুলি প্রবেশদ্বার অ্যানিমেশনের উপর খুব বেশি নির্ভর করে। ক্রমাগত অ্যানিমেশন প্রবেশদ্বার অ্যানিমেশনগুলি, যেমন "ফেইড", "স্লাইড", এবং "জুম" একবার ঘটবে এবং তারপরে থামবে, ক্রমাগত অ্যানিমেশনগুলি মনোযোগ আকর্ষণ করতে বা চলমান কার্যকলাপ নির্দেশ করতে অনির্দিষ্টকালের জন্য লুপ করে। আমি যে দুটি সবচেয়ে সাধারণ ক্রমাগত অ্যানিমেশনের মুখোমুখি হই তা হল "স্পিন" (লোডিং ইন্ডিকেটরগুলির জন্য) এবং "পালস" (গুরুত্বপূর্ণ উপাদানগুলি হাইলাইট করার জন্য)৷ কীফ্রেম টোকেন তৈরি করার ক্ষেত্রে এই অ্যানিমেশনগুলি অনন্য চ্যালেঞ্জগুলি উপস্থাপন করে। প্রবেশদ্বার অ্যানিমেশনগুলির বিপরীতে যা সাধারণত এক রাজ্য থেকে অন্য রাজ্যে যায়, ক্রমাগত অ্যানিমেশনগুলিকে তাদের আচরণের ধরণগুলিতে অত্যন্ত কাস্টমাইজযোগ্য হতে হবে। স্পিন ডাক্তার প্রতিটি প্রকল্প একাধিক স্পিন অ্যানিমেশন ব্যবহার করে বলে মনে হচ্ছে। কেউ ঘড়ির কাঁটার দিকে ঘোরে, আবার কেউ ঘড়ির কাঁটার বিপরীত দিকে। কেউ একটি একক 360-ডিগ্রি ঘূর্ণন করে, অন্যরা দ্রুত প্রভাবের জন্য একাধিক বাঁক করে। প্রতিটি পরিবর্তনের জন্য আলাদা কীফ্রেম তৈরি করার পরিবর্তে, আসুন একটি নমনীয় স্পিন তৈরি করি যা সমস্ত পরিস্থিতি পরিচালনা করে:
/* * স্পিন - ঘূর্ণন অ্যানিমেশন ঘূর্ণন পরিসীমা নিয়ন্ত্রণ করতে --kf-স্পিন-ফ্রম এবং --kf-স্পিন-টু ব্যবহার করুন * ঘূর্ণন পরিমাণ নিয়ন্ত্রণ করতে --kf-স্পিন-টার্ন ব্যবহার করুন * ডিফল্ট: 0deg থেকে 360deg পর্যন্ত ঘোরে (1 পূর্ণ ঘূর্ণন) * ব্যবহার: * অ্যানিমেশন: kf-স্পিন 1s লিনিয়ার ইনফিনিট; * --kf-স্পিন-টার্ন: 2; // 2টি সম্পূর্ণ ঘূর্ণন * --kf-স্পিন-থেকে: 0deg; --kf-স্পিন-টু: 180deg; // অর্ধেক ঘূর্ণন * --kf-স্পিন-থেকে: 0deg; --kf-স্পিন-টু: -360deg; // ঘড়ির কাঁটার বিপরীত দিকে */
@keyframes kf-স্পিন { থেকে { ঘোরান: var(--kf-স্পিন-থেকে, 0deg); } প্রতি { ঘোরান: calc(var(--kf-স্পিন-থেকে, 0deg) + var(--kf-স্পিন-থেকে, 360deg) * var(--kf-স্পিন-টার্ন, 1)); } }
এখন আমরা আমাদের পছন্দ মতো যেকোনো স্পিন বৈচিত্র তৈরি করতে পারি:
.লোডিং-স্পিনার { অ্যানিমেশন: kf-স্পিন 1s লিনিয়ার ইনফিনিট; /* ডিফল্ট ব্যবহার করে: 0deg থেকে 360deg পর্যন্ত ঘোরে */ }
ফাস্ট-লোডার { অ্যানিমেশন: kf-স্পিন 1.2s সহজ-ইন-আউট অসীম বিকল্প; --kf-স্পিন-টার্ন: 3; /* প্রতি চক্রের প্রতিটি দিকের জন্য 3টি সম্পূর্ণ ঘূর্ণন*/ }
.steped-reverse { অ্যানিমেশন: kf-স্পিন 1.5s ধাপ(8) অসীম; --kf-স্পিন-টু: -360deg; /*ঘড়ির কাঁটার বিপরীত দিকে */ }
.সূক্ষ্ম-দোলান { অ্যানিমেশন: kf-স্পিন 2s সহজ-ইন-আউট অসীম বিকল্প; --kf-স্পিন-থেকে: -16deg; --kf-স্পিন-টু: 32deg; /* 36 ডিগ্রি নড়াচড়া করুন: -18 ডিগ্রি এবং +18 ডিগ্রির মধ্যে */ }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 5 [কাঁটাযুক্ত]। এই পদ্ধতির সৌন্দর্য হল যে একই কীফ্রেমগুলি স্পিনার লোড করার জন্য কাজ করে, আইকনগুলি ঘোরানো, উইগল ইফেক্ট এবং এমনকি জটিল মাল্টি-টার্ন অ্যানিমেশনের জন্যও কাজ করে। পালস প্যারাডক্স পালস অ্যানিমেশনগুলি আরও জটিল কারণ তারা বিভিন্ন বৈশিষ্ট্যকে "পালস" করতে পারে। কিছু স্কেলকে পালস করে, অন্যরা অস্বচ্ছতাকে স্পন্দিত করে এবং কিছু পালস রঙের বৈশিষ্ট্য যেমন উজ্জ্বলতা বা স্যাচুরেশন। প্রতিটি প্রপার্টির জন্য আলাদা কীফ্রেম তৈরি করার পরিবর্তে, আমরা যে কোন CSS প্রপার্টির সাথে কাজ করে এমন কীফ্রেম তৈরি করতে পারি। এখানে স্কেল এবং অস্বচ্ছতা বিকল্পগুলির সাথে একটি পালস কীফ্রেমের একটি উদাহরণ রয়েছে:
/* * পালস - স্পন্দিত অ্যানিমেশন * স্কেল পরিসীমা নিয়ন্ত্রণ করতে --kf-pulse-scale-from এবং --kf-pulse-scale-to ব্যবহার করুন * অস্বচ্ছতার পরিসর নিয়ন্ত্রণ করতে --kf-pulse-opacity-from এবং --kf-pulse-opacity-to ব্যবহার করুন * ডিফল্ট: কোন পালস নেই (সমস্ত মান 1) * ব্যবহার: * অ্যানিমেশন: kf-pulse 2s সহজ-ইন-আউট অসীম বিকল্প; * --kf-পালস-স্কেল-থেকে: 0.95; --kf-পালস-স্কেল-টু: 1.05; // স্কেল পালস * --kf-পালস-অস্বচ্ছতা-থেকে: 0.7; --kf-পালস-অস্বচ্ছতা- থেকে: 1; // অস্বচ্ছতা পালস */
@keyframes kf-পালস { থেকে { স্কেল: var(--kf-পালস-স্কেল-থেকে, 1); অস্বচ্ছতা: var(--kf-পালস-অস্বচ্ছতা-থেকে, 1); } প্রতি { স্কেল: var(--kf-পালস-স্কেল-টু, 1); অস্বচ্ছতা: var(--kf-পালস-অস্বচ্ছতা-টু, 1); } }
এটি একটি নমনীয় পালস তৈরি করে যা একাধিক বৈশিষ্ট্যকে অ্যানিমেট করতে পারে: কল-টু-অ্যাকশন { অ্যানিমেশন: kf-পালস 0.6s অসীম বিকল্প; --kf-পালস-অস্বচ্ছতা-থেকে: 0.5; /* অস্বচ্ছতা পালস */ }
.notification-dot { অ্যানিমেশন: kf-পালস 0.6s সহজ-ইন-আউট অসীম বিকল্প; --kf-পালস-স্কেল-থেকে: 0.9; --kf-পালস-স্কেল-টু: 1.1; /* স্কেল পালস */ }
.টেক্সট-হাইলাইট { অ্যানিমেশন: kf-পালস 1.5s সহজ-আউট অসীম; --kf-পালস-স্কেল-থেকে: 0.8; --kf-পালস-অস্বচ্ছতা-থেকে: 0.2; /* স্কেল এবং অস্বচ্ছতা পালস */ }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 6 [কাঁটাযুক্ত]। এই একক কেএফ-পালস কীফ্রেমটি সূক্ষ্ম মনোযোগ আকর্ষণ থেকে শুরু করে নাটকীয় হাইলাইট পর্যন্ত সবকিছুই পরিচালনা করতে পারে, যখন কাস্টমাইজ করা সহজ। অ্যাডভান্সড ইজিং কীফ্রেম টোকেনগুলি ব্যবহার করার বিষয়ে একটি দুর্দান্ত জিনিস হল আমাদের অ্যানিমেশন লাইব্রেরি প্রসারিত করা এবং এমন প্রভাবগুলি সরবরাহ করা কতটা সহজ যা বেশিরভাগ বিকাশকারীরা স্ক্র্যাচ থেকে লিখতে বিরক্ত করবেন না, যেমন ইলাস্টিক বা বাউন্স৷ এখানে একটি সাধারণ "বাউন্স" কীফ্রেম টোকেনের উদাহরণ রয়েছে যা লাফের উচ্চতা নিয়ন্ত্রণ করতে কাস্টম সম্পত্তি থেকে --kf-bounce- ব্যবহার করে। /* * বাউন্স - বাউন্সিং এন্ট্রান্স অ্যানিমেশন * লাফের উচ্চতা নিয়ন্ত্রণ করতে --kf-bounce-from ব্যবহার করুন * ডিফল্ট: 100vh থেকে জাম্প (অফ স্ক্রিন) * ব্যবহার: * অ্যানিমেশন: kf-বাউন্স 3s ইজ-ইন; * --kf-বাউন্স-থেকে: 200px; // 200px উচ্চতা থেকে লাফ দিন */
@keyframes kf-বাউন্স { 0% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -1); }
34% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.4); }
55% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.2); }
72% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.1); }
৮৫% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.05); }
94% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.025); }
99% { অনুবাদ: 0 calc(var(-kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { অনুবাদ: 0 0; অ্যানিমেশন-টাইমিং-ফাংশন: সহজ-আউট; } }
"ইলাস্টিক" এর মতো অ্যানিমেশনগুলি কিফ্রেমের ভিতরে গণনার কারণে কিছুটা জটিল। আমাদের আলাদাভাবে --kf-elastic-from-X এবং --kf-elastic-from-Y-কে আলাদাভাবে সংজ্ঞায়িত করতে হবে (উভয়টাই ঐচ্ছিক), এবং একসাথে তারা আমাদের স্ক্রিনের যেকোনো বিন্দু থেকে একটি ইলাস্টিক প্রবেশদ্বার তৈরি করতে দেয়।
/* * ইলাস্টিক ইন - ইলাস্টিক এন্ট্রান্স অ্যানিমেশন * শুরুর অবস্থান নিয়ন্ত্রণ করতে --kf-elastic-from-X এবং --kf-elastic-from-Y ব্যবহার করুন * ডিফল্ট: শীর্ষ কেন্দ্র থেকে প্রবেশ করে (0, -100vh) * ব্যবহার: * অ্যানিমেশন: kf-ইলাস্টিক-ইন 2s সহজ-ইন-আউট উভয়; * --kf-ইলাস্টিক-থেকে-X: -50px; * --kf-ইলাস্টিক-থেকে-Y: -200px; // থেকে প্রবেশ করুন (-50px, -200px) */
@keyframes kf-ইলাস্টিক-ইন { 0% { অনুবাদ: calc(var(-kf-elastic-from-X, -50vw) * 1) calc(var(--kf-স্থিতিস্থাপক-from-Y, 0px) * 1); }
16% { অনুবাদ: calc(var(--kf-স্থিতিস্থাপক-from-X, -50vw) * -0.3227) calc(var(--kf-ইলাস্টিক-থেকে-Y, 0px) * -0.3227); }
২৮% { অনুবাদ: calc(var(-kf-স্থিতিস্থাপক-from-X, -50vw) * 0.1312)calc(var(-kf-ইলাস্টিক-from-Y, 0px) * 0.1312); }
44% { অনুবাদ: calc(var(--kf-স্থিতিস্থাপক-from-X, -50vw) * -0.0463) calc(var(--kf-ইলাস্টিক-থেকে-Y, 0px) * -0.0463); }
59% { অনুবাদ: calc(var(--kf-স্থিতিস্থাপক-from-X, -50vw) * 0.0164) calc(var(--kf-ইলাস্টিক-থেকে-Y, 0px) * 0.0164); }
73% { অনুবাদ: calc(var(--kf-স্থিতিস্থাপক-from-X, -50vw) * -0.0058) calc(var(--kf-ইলাস্টিক-থেকে-Y, 0px) * -0.0058); }
৮৮% { অনুবাদ: calc(var(--kf-স্থিতিস্থাপক-from-X, -50vw) * 0.0020) calc(var(--kf-ইলাস্টিক-থেকে-Y, 0px) * 0.0020); }
100% { অনুবাদ: 0 0; } }
এই পদ্ধতিটি আমাদের প্রোজেক্ট জুড়ে উন্নত কীফ্রেমগুলিকে পুনঃব্যবহার এবং কাস্টমাইজ করা সহজ করে তোলে, শুধুমাত্র একটি কাস্টম বৈশিষ্ট্য পরিবর্তন করে।
.বাউন্স-এন্ড-জুম { অ্যানিমেশন: kf-বাউন্স 3s ইজ-ইন, kf-জুম 3s লিনিয়ার; --kf-জুম-থেকে: 0; }
.বাউন্স-এন্ড-স্লাইড { animation-composition: add; /* উভয় অ্যানিমেশনই অনুবাদ ব্যবহার করে */ অ্যানিমেশন: kf-বাউন্স 3s ইজ-ইন, kf-স্লাইড-ইন 3s সহজ-আউট; --kf-স্লাইড-থেকে: -200px; }
ইলাস্টিক-ইন { অ্যানিমেশন: kf-ইলাস্টিক-ইন 2s সহজ-ইন-আউট উভয়; }
পেন কীফ্রেম টোকেন দেখুন - অমিত শিনের ডেমো 7 [কাঁটাযুক্ত]। এই মুহুর্তে, আমরা দেখেছি কিভাবে আমরা একটি স্মার্ট এবং দক্ষ উপায়ে কীফ্রেমগুলিকে একত্রিত করতে পারি। অবশ্যই, আপনি আপনার প্রজেক্টের প্রয়োজনগুলিকে আরও ভালভাবে ফিট করার জন্য জিনিসগুলিকে পরিবর্তন করতে চাইতে পারেন, তবে আমরা বেশ কয়েকটি সাধারণ অ্যানিমেশন এবং দৈনন্দিন ব্যবহারের ক্ষেত্রে উদাহরণগুলি কভার করেছি। এবং এই কীফ্রেম টোকেনগুলির জায়গায়, আমাদের কাছে এখন পুরো প্রকল্প জুড়ে সামঞ্জস্যপূর্ণ, রক্ষণাবেক্ষণযোগ্য অ্যানিমেশন তৈরি করার জন্য শক্তিশালী বিল্ডিং ব্লক রয়েছে। আর কোন ডুপ্লিকেটেড কীফ্রেম নেই, আর কোন গ্লোবাল স্কোপ দ্বন্দ্ব নেই। আমাদের সমস্ত অ্যানিমেশন চাহিদাগুলি পরিচালনা করার জন্য কেবল একটি পরিষ্কার, সুবিধাজনক উপায়৷ কিন্তু আসল প্রশ্ন হল: কিভাবে আমরা এই বিল্ডিং ব্লকগুলি একসাথে রচনা করব? পুটিং ইট অল টুগেদার আমরা দেখেছি যে মৌলিক কীফ্রেম টোকেনগুলি একত্রিত করা সহজ। আমাদের বিশেষ কিছুর প্রয়োজন নেই তবে প্রথম অ্যানিমেশনটি সংজ্ঞায়িত করতে, দ্বিতীয়টি সংজ্ঞায়িত করতে, প্রয়োজন অনুসারে ভেরিয়েবল সেট করতে হবে এবং এটিই। /* ফেড ইন + স্লাইড ইন */ .টোস্ট { অ্যানিমেশন: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* জুম ইন + ফেড ইন */ .modal { অ্যানিমেশন: kf-fade-in 0.3s, kf-জুম 0.3s কিউবিক-বেজিয়ার(0.34, 1.56, 0.64, 1); --kf-জুম-থেকে: 0.7; --kf-জুম-টু: 1; }
/* স্লাইড ইন + পালস */ বিজ্ঞপ্তি { অ্যানিমেশন: kf-স্লাইড-ইন 0.5s, kf-পালস 1.2s সহজ-ইন-আউট অসীম বিকল্প; --kf-slide-from: -100px 0; --kf-পালস-স্কেল-থেকে: 0.95; --kf-পালস-স্কেল-টু: 1.05; }
এই সংমিশ্রণগুলি সুন্দরভাবে কাজ করে কারণ প্রতিটি অ্যানিমেশন একটি ভিন্ন বৈশিষ্ট্যকে লক্ষ্য করে: অস্বচ্ছতা, রূপান্তর (অনুবাদ/স্কেল), ইত্যাদি। তবে কখনও কখনও দ্বন্দ্ব দেখা দেয় এবং কেন এবং কীভাবে সেগুলি মোকাবেলা করতে হবে তা আমাদের জানতে হবে। যখন দুটি অ্যানিমেশন একই সম্পত্তি অ্যানিমেট করার চেষ্টা করে — উদাহরণস্বরূপ, উভয় অ্যানিমেটিং স্কেল বা উভয় অ্যানিমেটিং অস্বচ্ছতা — ফলাফল আপনি যা আশা করেন তা হবে না। ডিফল্টরূপে, শুধুমাত্র একটি অ্যানিমেশন প্রকৃতপক্ষে সেই সম্পত্তিতে প্রয়োগ করা হয়, যা অ্যানিমেশন তালিকার শেষটি। এটি একটি সীমাবদ্ধতা কিভাবে CSS একই সম্পত্তিতে একাধিক অ্যানিমেশন পরিচালনা করে। উদাহরণস্বরূপ, এটি উদ্দেশ্য অনুযায়ী কাজ করবে না কারণ শুধুমাত্র kf-pulse অ্যানিমেশন প্রযোজ্য হবে। খারাপ-কম্বো { অ্যানিমেশন: kf-জুম 0.5s ফরোয়ার্ড, kf-পালস 1.2s অসীম বিকল্প; --kf-জুম-থেকে: 0.5; --kf-জুম-টু: 1.2; --kf-পালস-স্কেল-থেকে: 0.8; --kf-পালস-স্কেল-টু: 1.1; }
অ্যানিমেশন সংযোজন একই সম্পত্তিকে প্রভাবিত করে এমন একাধিক অ্যানিমেশন পরিচালনা করার সবচেয়ে সহজ এবং সরাসরি উপায় হল অ্যানিমেশন-কম্পোজিশন বৈশিষ্ট্য ব্যবহার করা। উপরের শেষ উদাহরণে, kf-pulse অ্যানিমেশন kf-zoom অ্যানিমেশনকে প্রতিস্থাপন করে, তাই আমরা প্রাথমিক জুম দেখতে পাব না এবং 1.2-এর প্রত্যাশিত স্কেল পাব না। অ্যানিমেশন-কম্পোজিশন যোগ করার জন্য সেট করে, আমরা ব্রাউজারকে উভয় অ্যানিমেশন একত্রিত করতে বলি। এটি আমাদের কাঙ্ক্ষিত ফলাফল দেয়। .component-দুই { animation-composition: add; }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 8 [কাঁটাযুক্ত]। এই পদ্ধতিটি বেশিরভাগ ক্ষেত্রেই ভাল কাজ করে যেখানে আমরা একই সম্পত্তিতে প্রভাব একত্রিত করতে চাই। যখন আমাদের স্ট্যাটিক সম্পত্তি মানগুলির সাথে অ্যানিমেশনগুলিকে একত্রিত করার প্রয়োজন হয় তখন এটি কার্যকর। উদাহরণস্বরূপ, যদি আমাদের কাছে এমন একটি উপাদান থাকে যা অনুবাদ সম্পত্তি ব্যবহার করে এটিকে ঠিক যেখানে আমরা চাই, এবং তারপরে আমরা এটিকে kf-slide-in keyframes দিয়ে অ্যানিমেট করতে চাই, আমরা অ্যানিমেশন-কম্পোজিশন ছাড়াই একটি বাজে দৃশ্যমান লাফ পেতে পারি। পেন কীফ্রেম টোকেন দেখুন - অমিত শিনের ডেমো 9 [কাঁটাযুক্ত]। অ্যানিমেশন-কম্পোজিশন যোগ করার জন্য সেটের সাথে, অ্যানিমেশনটি বিদ্যমান সাথে মসৃণভাবে মিলিত হয়রূপান্তর, তাই উপাদানটি জায়গায় থাকে এবং প্রত্যাশা অনুযায়ী অ্যানিমেট করে। অ্যানিমেশন স্ট্যাগার একাধিক অ্যানিমেশন পরিচালনা করার আরেকটি উপায় হল সেগুলিকে "অচল করে দেওয়া" - অর্থাৎ, প্রথমটি শেষ হওয়ার পরে দ্বিতীয় অ্যানিমেশনটি শুরু করুন৷ এটি এমন একটি সমাধান নয় যা প্রতিটি ক্ষেত্রে কাজ করে, তবে এটি কার্যকর যখন আমাদের একটি প্রবেশদ্বার অ্যানিমেশন থাকে এবং একটি ক্রমাগত অ্যানিমেশন থাকে৷ /* বিবর্ণ + অস্বচ্ছতা পালস */ বিজ্ঞপ্তি { অ্যানিমেশন: kf-fade-in 2s সহজ-আউট, kf-পালস 0.5s 2s সহজ-ইন-আউট অসীম বিকল্প; --kf-পালস-অস্বচ্ছতা- থেকে: 0.5; }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 10 [কাঁটাযুক্ত]। অর্ডার ম্যাটারস আমরা যে অ্যানিমেশনগুলির সাথে কাজ করি তার একটি বড় অংশ রূপান্তর বৈশিষ্ট্য ব্যবহার করে। বেশিরভাগ ক্ষেত্রে, এটি কেবল আরও সুবিধাজনক। এটির একটি পারফরম্যান্স সুবিধাও রয়েছে কারণ ট্রান্সফর্ম অ্যানিমেশনগুলি জিপিইউ-ত্বরিত হতে পারে। কিন্তু যদি আমরা রূপান্তর ব্যবহার করি, তাহলে আমাদের মেনে নিতে হবে যে আমরা আমাদের রূপান্তরগুলি যে ক্রমানুসারে সঞ্চালিত করি তা গুরুত্বপূর্ণ। অনেক। এখন পর্যন্ত আমাদের কীফ্রেমে, আমরা স্বতন্ত্র রূপান্তর ব্যবহার করেছি। চশমা অনুসারে, এগুলি সর্বদা একটি নির্দিষ্ট ক্রমে প্রয়োগ করা হয়: প্রথমে, উপাদানটি অনুবাদ করা হয়, তারপর ঘোরানো, তারপর স্কেল। এটি বোধগম্য হয় এবং আমাদের বেশিরভাগই এটি আশা করে। যাইহোক, যদি আমরা ট্রান্সফর্ম প্রপার্টি ব্যবহার করি, ফাংশনগুলি যে ক্রমানুসারে লিখিত হয় সেই ক্রমটি প্রয়োগ করা হয়। এই ক্ষেত্রে, আমরা যদি X-অক্ষের উপর 100 পিক্সেল কিছু সরান এবং তারপর এটি 45 ডিগ্রী ঘোরান, এটি প্রথমে 45 ডিগ্রী দ্বারা ঘোরানো এবং তারপর 100 পিক্সেল সরানোর মত নয়। /* গোলাপী বর্গক্ষেত্র: প্রথমে অনুবাদ করুন, তারপর ঘোরান */ .example-one { রূপান্তর: translateX(100px) rotate(45deg); }
/* সবুজ বর্গক্ষেত্র: প্রথমে ঘোরান, তারপর অনুবাদ করুন */ উদাহরণ-দুই { রূপান্তর: ঘোরান(45deg) translateX(100px); }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 11 [কাঁটাযুক্ত]। কিন্তু ট্রান্সফর্ম ক্রম অনুসারে, সমস্ত স্বতন্ত্র রূপান্তর — কীফ্রেম টোকেনগুলির জন্য আমরা যা ব্যবহার করেছি — সবকিছু রূপান্তর ফাংশনের আগে ঘটে৷ তার মানে আপনি ট্রান্সফর্ম প্রপার্টিতে সেট করা কিছু অ্যানিমেশনের পরে ঘটবে। কিন্তু আপনি যদি সেট করেন, উদাহরণস্বরূপ, kf-স্পিন কীফ্রেমগুলির সাথে একসাথে অনুবাদ করুন, অনুবাদটি অ্যানিমেশনের আগে ঘটবে। এখনও বিভ্রান্ত?! এটি এমন পরিস্থিতির দিকে নিয়ে যায় যেখানে স্ট্যাটিক মান একই অ্যানিমেশনের জন্য ভিন্ন ফলাফলের কারণ হতে পারে, যেমন নিম্নলিখিত ক্ষেত্রে:
/* উভয় স্পিনারদের জন্য সাধারণ অ্যানিমেশন */ স্পিনার { অ্যানিমেশন: kf-স্পিন 1s লিনিয়ার ইনফিনিট; }
/* পিঙ্ক স্পিনার: ঘোরানোর আগে অনুবাদ করুন (ব্যক্তিগত রূপান্তর) */ .স্পিনার-গোলাপী { অনুবাদ: 100% 50%; }
/* সবুজ স্পিনার: ঘোরান তারপর অনুবাদ করুন (ফাংশন অর্ডার) */ .স্পিনার-সবুজ { রূপান্তর: অনুবাদ (100%, 50%); }
পেন কীফ্রেম টোকেনগুলি দেখুন - অমিত শিনের ডেমো 12 [কাঁটাযুক্ত]। আপনি দেখতে পাচ্ছেন যে প্রথম স্পিনার (গোলাপী) একটি অনুবাদ পায় যা kf-স্পিন ঘোরানোর আগে ঘটে, তাই এটি প্রথমে তার জায়গায় চলে যায় এবং তারপর ঘোরে। দ্বিতীয় স্পিনার (সবুজ) একটি translate() ফাংশন পায় যা স্বতন্ত্র রূপান্তরের পরে ঘটে, তাই উপাদানটি প্রথমে ঘূর্ণায়মান হয়, তারপর তার বর্তমান কোণের সাপেক্ষে সরে যায় এবং আমরা সেই প্রশস্ত কক্ষপথ প্রভাবটি পাই। না, এটি একটি বাগ নয়। এটি সেই সব জিনিসগুলির মধ্যে একটি যা আমাদের CSS সম্পর্কে জানতে হবে এবং একাধিক অ্যানিমেশন বা একাধিক রূপান্তরের সাথে কাজ করার সময় মনে রাখতে হবে। প্রয়োজনে, আপনি kf-spin-alt কীফ্রেমের একটি অতিরিক্ত সেটও তৈরি করতে পারেন যা rotate() ফাংশন ব্যবহার করে উপাদানগুলিকে ঘোরায়। গতি কমানো এবং যখন আমরা বিকল্প কীফ্রেম সম্পর্কে কথা বলছি, আমরা "কোন অ্যানিমেশন" বিকল্পটিকে উপেক্ষা করতে পারি না। কীফ্রেম টোকেনগুলি ব্যবহার করার সবচেয়ে বড় সুবিধাগুলির মধ্যে একটি হল অ্যাক্সেসিবিলিটি বেক করা যেতে পারে এবং এটি করা আসলে বেশ সহজ। অ্যাক্সেসযোগ্যতার কথা মাথায় রেখে আমাদের কীফ্রেমগুলি ডিজাইন করে, আমরা নিশ্চিত করতে পারি যে ব্যবহারকারীরা কম গতি পছন্দ করেন তারা অতিরিক্ত কাজ বা কোড ডুপ্লিকেশন ছাড়াই একটি মসৃণ, কম বিভ্রান্তিকর অভিজ্ঞতা পান। "রিডুসড মোশন" এর সঠিক অর্থ একটি অ্যানিমেশন থেকে অন্য অ্যানিমেশনে এবং প্রজেক্ট থেকে প্রজেক্টে কিছুটা পরিবর্তিত হতে পারে, তবে এখানে কয়েকটি গুরুত্বপূর্ণ পয়েন্ট মনে রাখতে হবে: কীফ্রেমগুলি নিঃশব্দ করা হচ্ছে যদিও কিছু অ্যানিমেশন নরম বা ধীর করা যেতে পারে, অন্য কিছু আছে যেগুলি যখন কম গতির অনুরোধ করা হয় তখন সম্পূর্ণরূপে অদৃশ্য হয়ে যায়। পালস অ্যানিমেশন একটি ভাল উদাহরণ। এই অ্যানিমেশনগুলি হ্রাসকৃত গতি মোডে চলবে না তা নিশ্চিত করার জন্য, আমরা কেবল তাদের উপযুক্ত মিডিয়া ক্যোয়ারীতে মোড়ানো করতে পারি।
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-পালস { থেকে { স্কেল: var(--kf-পালস-স্কেল-থেকে, 1); অস্বচ্ছতা: var(--kf-পালস-অস্বচ্ছতা-থেকে, 1); } প্রতি { স্কেল: var(--kf-পালস-স্কেল-টু, 1); অস্বচ্ছতা:var(--kf-পালস-অস্বচ্ছতা-টু, 1); } } }
এটি নিশ্চিত করে যে ব্যবহারকারীরা যারা কমাতে পছন্দ-কমানো-মোশন সেট করেছেন তারা অ্যানিমেশন দেখতে পাবেন না এবং তাদের পছন্দের সাথে মেলে এমন একটি অভিজ্ঞতা পাবেন। ইনস্ট্যান্ট ইন কিছু কীফ্রেম আছে যা আমরা সরাতে পারি না, যেমন প্রবেশদ্বার অ্যানিমেশন। মান পরিবর্তন করা আবশ্যক, অ্যানিমেট করা আবশ্যক; অন্যথায়, উপাদানটির সঠিক মান থাকবে না। কিন্তু কম গতিতে, প্রাথমিক মান থেকে এই রূপান্তর তাত্ক্ষণিক হওয়া উচিত। এটি অর্জন করতে, আমরা কীফ্রেমের একটি অতিরিক্ত সেট সংজ্ঞায়িত করব যেখানে মান অবিলম্বে শেষ অবস্থায় চলে যায়। এগুলো আমাদের ডিফল্ট কীফ্রেম হয়ে যায়। তারপরে, আমরা পূর্ববর্তী উদাহরণের মতো পছন্দ-কমানো-মোশন সেট নো-প্রেফারেন্সের জন্য একটি মিডিয়া কোয়েরির মধ্যে নিয়মিত কীফ্রেমগুলি যুক্ত করব। /* কম গতির জন্য তাত্ক্ষণিকভাবে পপ ইন করুন */ @keyframes kf-জুম { থেকে, থেকে { স্কেল: var(--kf-জুম-টু, 1); } }
@media (prefers-reduced-motion: no-preference) { /* আসল জুম কীফ্রেম */ @keyframes kf-জুম { থেকে { স্কেল: var(--kf-zoom-from, 0.8); } প্রতি { স্কেল: var(--kf-জুম-টু, 1); } } }
এইভাবে, যে ব্যবহারকারীরা কম গতি পছন্দ করেন তারা দেখতে পাবেন উপাদানটি অবিলম্বে তার চূড়ান্ত অবস্থায় প্রদর্শিত হবে, যখন অন্য সবাই অ্যানিমেটেড ট্রানজিশন পাবে। নরম পন্থা এমন কিছু ঘটনা আছে যেখানে আমরা কিছু নড়াচড়া রাখতে চাই, কিন্তু আসল অ্যানিমেশনের তুলনায় অনেক নরম এবং শান্ত। উদাহরণস্বরূপ, আমরা একটি বাউন্স প্রবেশদ্বারকে একটি মৃদু ফেড-ইন দিয়ে প্রতিস্থাপন করতে পারি।
@keyframes kf-বাউন্স { /* কম গতির জন্য নরম ফেড-ইন */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-বাউন্স { /* আসল বাউন্স কীফ্রেম */ } }
এখন, কম মোশন সক্ষম ব্যবহারকারীরা এখনও চেহারার অনুভূতি পান, কিন্তু বাউন্স বা ইলাস্টিক অ্যানিমেশনের তীব্র আন্দোলন ছাড়াই। বিল্ডিং ব্লকের জায়গায়, পরবর্তী প্রশ্ন হল কিভাবে তাদের প্রকৃত কর্মপ্রবাহের অংশ করা যায়। নমনীয় কীফ্রেমগুলি লেখা একটি জিনিস, কিন্তু একটি বড় প্রকল্প জুড়ে তাদের নির্ভরযোগ্য করার জন্য কয়েকটি কৌশল প্রয়োজন যা আমাকে কঠিন উপায়ে শিখতে হয়েছিল। বাস্তবায়নের কৌশল এবং সর্বোত্তম অনুশীলন একবার আমাদের কাছে কীফ্রেম টোকেনগুলির একটি শক্ত লাইব্রেরি হয়ে গেলে, আসল চ্যালেঞ্জ হল কীভাবে সেগুলিকে দৈনন্দিন কাজে নিয়ে আসা যায়।
প্রলোভন হল একযোগে সমস্ত কীফ্রেম ড্রপ করা এবং সমস্যার সমাধান হয়েছে বলে ঘোষণা করা, কিন্তু বাস্তবে আমি দেখেছি যে সেরা ফলাফলগুলি ধীরে ধীরে গ্রহণ করা থেকে আসে৷ সবচেয়ে সাধারণ অ্যানিমেশন দিয়ে শুরু করুন, যেমন ফেইড বা স্লাইড। এগুলি হল সহজ জয় যা বড় পুনঃলিখনের প্রয়োজন ছাড়াই তাৎক্ষণিক মূল্য দেখায়। নামকরণ হল আরেকটি বিষয় যা মনোযোগের দাবি রাখে। একটি সামঞ্জস্যপূর্ণ উপসর্গ বা নেমস্পেস এটি স্পষ্ট করে তোলে যে কোন অ্যানিমেশনগুলি টোকেন এবং কোনটি স্থানীয় এক-অফ। এটি দুর্ঘটনাজনিত সংঘর্ষ প্রতিরোধ করে এবং নতুন দলের সদস্যদের এক নজরে শেয়ার করা সিস্টেম চিনতে সাহায্য করে। ডকুমেন্টেশন কোডের মতোই গুরুত্বপূর্ণ। এমনকি প্রতিটি কীফ্রেম টোকেনের উপরে একটি ছোট মন্তব্য পরে অনুমান করার কয়েক ঘন্টা বাঁচাতে পারে। একজন বিকাশকারীকে টোকেন ফাইল খুলতে, তাদের প্রয়োজনীয় প্রভাবের জন্য স্ক্যান করতে এবং সরাসরি তাদের উপাদানে ব্যবহারের প্যাটার্নটি অনুলিপি করতে সক্ষম হওয়া উচিত। নমনীয়তা এই পদ্ধতির প্রচেষ্টাকে মূল্যবান করে তোলে। সংবেদনশীল কাস্টম বৈশিষ্ট্যগুলি উন্মোচিত করে, আমরা টিমগুলিকে সিস্টেমকে না ভেঙে অ্যানিমেশনকে মানিয়ে নেওয়ার জন্য জায়গা দিই৷ একই সময়ে, অতিরিক্ত জটিলতা না করার চেষ্টা করুন। যে গুরুত্বপূর্ণ knobs প্রদান এবং বাকি মতামত রাখা. অবশেষে, অ্যাক্সেসযোগ্যতা মনে রাখবেন। প্রতিটি অ্যানিমেশনের জন্য কম গতির বিকল্পের প্রয়োজন হয় না, তবে অনেকেই তা করে। এই সামঞ্জস্যগুলি প্রথম দিকে বেক করার মানে হল যে আমাদেরকে পরে সেগুলিকে পুনরুদ্ধার করতে হবে না, এবং এটি এমন একটি স্তরের যত্ন দেখায় যা আমাদের ব্যবহারকারীরা কখনও উল্লেখ না করলেও তা লক্ষ্য করবে৷
আমার অভিজ্ঞতায়, আমাদের ডিজাইন টোকেন কর্মপ্রবাহের অংশ হিসাবে কীফ্রেম টোকেনগুলিকে চিকিত্সা করাই সেগুলিকে আটকে রাখে। একবার সেগুলি জায়গায় হয়ে গেলে, তারা বিশেষ প্রভাবগুলির মতো অনুভব করা বন্ধ করে এবং নকশা ভাষার অংশ হয়ে ওঠে, পণ্যটি কীভাবে নড়াচড়া করে এবং প্রতিক্রিয়া জানায় তার একটি প্রাকৃতিক সম্প্রসারণ৷ আপ মোড়ানো অ্যানিমেশনগুলি বিল্ডিং ইন্টারফেসের সবচেয়ে আনন্দদায়ক অংশগুলির মধ্যে একটি হতে পারে, কিন্তু গঠন ছাড়াই, তারা হতাশার সবচেয়ে বড় উত্স হতে পারে। কীফ্রেমগুলিকে টোকেন হিসাবে বিবেচনা করে, আপনি এমন কিছু গ্রহণ করেন যা সাধারণত অগোছালো এবং পরিচালনা করা কঠিন এবং এটি একটি পরিষ্কার, অনুমানযোগ্য সিস্টেমে পরিণত হয়। আসল মান শুধুমাত্র কোডের কয়েকটি লাইন সংরক্ষণের মধ্যে নয়। এটি আত্মবিশ্বাসের মধ্যে রয়েছে যে আপনি যখন একটি ফেড, স্লাইড, জুম বা স্পিন ব্যবহার করেন, আপনি জানেন যে এটি পুরো প্রকল্প জুড়ে কীভাবে আচরণ করবে। এটি এমন নমনীয়তার মধ্যে যা অন্তহীন বৈচিত্রের বিশৃঙ্খলা ছাড়াই কাস্টম বৈশিষ্ট্য থেকে আসে। এবং এটি হিসাবে যোগ করার পরিবর্তে ভিত্তির মধ্যে নির্মিত অ্যাক্সেসযোগ্যতার মধ্যে রয়েছেএকটি পরবর্তী চিন্তা আমি দেখেছি এই ধারণাগুলি বিভিন্ন দল এবং বিভিন্ন কোডবেসে কাজ করে এবং প্যাটার্ন সবসময় একই থাকে। একবার টোকেনগুলি জায়গায় হয়ে গেলে, কীফ্রেমগুলি কৌশলগুলির বিক্ষিপ্ত সংগ্রহ হওয়া বন্ধ করে এবং ডিজাইন ভাষার অংশ হয়ে যায়। তারা পণ্যটিকে আরও ইচ্ছাকৃত, আরও সামঞ্জস্যপূর্ণ এবং আরও জীবন্ত বোধ করে। আপনি যদি এই নিবন্ধটি থেকে একটি জিনিস গ্রহণ করেন, তবে এটি হতে দিন: অ্যানিমেশনগুলি একই যত্ন এবং কাঠামোর প্রাপ্য যা আমরা ইতিমধ্যে রঙ, টাইপোগ্রাফি এবং ব্যবধানে দিয়েছি। কীফ্রেম টোকেনগুলিতে একটি ছোট বিনিয়োগ প্রতিবার আপনার ইন্টারফেস সরানোর সময় পরিশোধ করে।
