হ্যাকিং সিএসএস অ্যানিমেশন অবস্থা এবং প্লেব্যাক সময়

CSS-শুধুমাত্র Wolfenstein এটি একটি ছোট প্রকল্প যা আমি কয়েক সপ্তাহ আগে তৈরি করেছি। এটি CSS 3D রূপান্তর এবং অ্যানিমেশন নিয়ে একটি পরীক্ষা ছিল।

দ্বারা অনুপ্রাণিত FPS ডেমো এবং অন্য উলফেনস্টাইন কোডপেন, আমি আমার নিজস্ব সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছি। এটি শিথিলভাবে মূল Wolfenstein 1D গেমের পর্ব 9 – ফ্লোর 3-এর উপর ভিত্তি করে তৈরি।

সম্পাদক: গেম ওভার স্ক্রীন এড়াতে এই গেমটির ইচ্ছাকৃতভাবে কিছু দ্রুত প্রতিক্রিয়া প্রয়োজন।

এখানে একটি প্লেথ্রু ভিডিও রয়েছে:

[এম্বেড করা সামগ্রী]

সংক্ষেপে, আমার প্রকল্পটি একটি সাবধানে স্ক্রিপ্ট করা দীর্ঘ CSS অ্যানিমেশন ছাড়া কিছুই নয়। প্লাস কয়েক দৃষ্টান্ত চেকবক্স হ্যাক.

:checked ~ div { animation-name: spin; }

পরিবেশে 3D গ্রিড মুখ রয়েছে এবং অ্যানিমেশনগুলি বেশিরভাগই সরল 3D অনুবাদ এবং ঘূর্ণন। সত্যিই অভিনব কিছুই.

যাইহোক, দুটি সমস্যা সমাধান করা বিশেষভাবে কঠিন ছিল:

• প্লেয়ার যখনই শত্রুর উপর ক্লিক করে তখনই "অস্ত্র ফায়ারিং" অ্যানিমেশন খেলুন।
• যখন দ্রুত গতিশীল বস শেষ আঘাত পান, তখন একটি নাটকীয় ধীর গতিতে প্রবেশ করুন।

একটি প্রযুক্তিগত স্তরে, এর অর্থ হল:

• পরবর্তী চেকবক্স চেক করা হলে একটি অ্যানিমেশন পুনরায় চালান।
• একটি চেকবক্স চেক করা হলে একটি অ্যানিমেশন ধীর করুন।

আসলে, আমার প্রকল্পে কোনটিই সঠিকভাবে সমাধান করা হয়নি! আমি হয় সমাধান ব্যবহার করে শেষ করেছি বা ছেড়ে দিয়েছি।

অন্যদিকে, কিছু খনন করার পরে, অবশেষে আমি উভয় সমস্যার মূল খুঁজে পেয়েছি: CSS অ্যানিমেশন চালানোর বৈশিষ্ট্যগুলি পরিবর্তন করা। এই নিবন্ধে, আমরা এই বিষয়ে আরও অন্বেষণ করব:

• ইন্টারেক্টিভ উদাহরণ প্রচুর.
• বিচ্ছেদ: প্রতিটি উদাহরণ কিভাবে কাজ করে (বা কাজ করে না)?
• দৃশ্যের পিছনে: ব্রাউজারগুলি কীভাবে অ্যানিমেশন অবস্থাগুলি পরিচালনা করে?

আমাকে "আমার ইট নিক্ষেপ কর".

সমস্যা 1: অ্যানিমেশন রিপ্লে করা

প্রথম উদাহরণ: "শুধু আরেকটি চেকবক্স"

আমার প্রথম অন্তর্দৃষ্টি ছিল "শুধু অন্য একটি চেকবক্স যোগ করুন", যা কাজ করে না:

প্রতিটি চেকবক্স পৃথকভাবে কাজ করে, তবে উভয়ই একসাথে নয়। একটি চেকবক্স ইতিমধ্যে চেক করা থাকলে, অন্যটি আর কাজ করে না।

এটি কীভাবে কাজ করে তা এখানে রয়েছে (বা "কাজ করে না"):

1. সার্জারির animation-name of <div> is none গতানুগতিক.
2. ব্যবহারকারী একটি চেকবক্সে ক্লিক করে, animation-name হয়ে spin, এবং অ্যানিমেশন শুরু থেকে শুরু হয়।
3. কিছুক্ষণ পরে, ব্যবহারকারী অন্য চেকবক্সে ক্লিক করে। একটি নতুন CSS নিয়ম কার্যকর হয়, কিন্তু animation-name is এখনো spin, যার মানে কোন অ্যানিমেশন যোগ করা বা সরানো হয় না। অ্যানিমেশনটি এমনভাবে চলতে থাকে যেন কিছুই ঘটেনি।

দ্বিতীয় উদাহরণ: "অ্যানিমেশন ক্লোনিং"

একটি কার্যকরী পদ্ধতি হল অ্যানিমেশন ক্লোন করা:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2; }

এখানে কিভাবে এটা কাজ করে:

1. animation-name is none প্রাথমিকভাবে.
2. ব্যবহারকারী "স্পিন!" এ ক্লিক করেন, animation-name হয়ে spin1. অ্যানিমেশন spin1 শুরু থেকে শুরু করা হয়েছে কারণ এটি সবেমাত্র যোগ করা হয়েছে।
3. ব্যবহারকারী "আবার স্পিন!" এ ক্লিক করেন, animation-name হয়ে spin2. অ্যানিমেশন spin2 শুরু থেকে শুরু করা হয়েছে কারণ এটি সবেমাত্র যোগ করা হয়েছে।

নোট করুন যে ধাপ # 3 এ, spin1 CSS নিয়মের আদেশের কারণে সরানো হয়েছে। এটা কাজ করবে না যদি "আবার স্পিন!" প্রথমে পরীক্ষা করা হয়।

তৃতীয় উদাহরণ: "একই অ্যানিমেশন যুক্ত করা"

আরেকটি কাজের পদ্ধতি হল "একই অ্যানিমেশন যুক্ত করা":

#spin1:checked ~ div { animation-name: spin; }
#spin2:checked ~ div { animation-name: spin, spin; }

এটি আগের উদাহরণের অনুরূপ। আপনি আসলে এইভাবে আচরণ বুঝতে পারেন:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2, spin1; }

মনে রাখবেন যখন "আবার স্পিন!" চেক করা হয়, পুরানো চলমান অ্যানিমেশনটি নতুন তালিকার দ্বিতীয় অ্যানিমেশন হয়ে ওঠে, যা অজ্ঞাত হতে পারে। একটি সরাসরি পরিণতি হল: কৌশল কাজ করবে না যদি animation-fill-mode is forwards. এখানে একটি ডেমো আছে:

আপনি যদি বিস্মিত হন কেন এটি হয়, এখানে কিছু সূত্র রয়েছে:

• animation-fill-mode is none ডিফল্টরূপে, যার অর্থ "অ্যানিমেশনটি না খেলে কোন প্রভাব নেই"।
• animation-fill-mode: forwards; মানে "অ্যানিমেশন বাজানো শেষ হওয়ার পরে, এটি চিরতরে শেষ কীফ্রেমে থাকতে হবে"।
• spin1এর সিদ্ধান্ত সবসময় ওভাররাইড করে spin2কারণ spin1 তালিকায় পরে প্রদর্শিত হবে।
• ধরুন ব্যবহারকারী “স্পিন!” এ ক্লিক করেন, সম্পূর্ণ স্পিন এর জন্য অপেক্ষা করেন, তারপর “আবার স্পিন!” এ ক্লিক করেন। এই মুহূর্তে. spin1 ইতিমধ্যে সমাপ্ত, এবং spin2 শুধু শুরু

আলোচনা

অঙ্গুষ্ঠের নিয়ম: আপনি একটি বিদ্যমান CSS অ্যানিমেশন "পুনঃসূচনা" করতে পারবেন না। পরিবর্তে, আপনি একটি নতুন অ্যানিমেশন যোগ করতে এবং খেলতে চান। এই দ্বারা নিশ্চিত করা যেতে পারে W3C বিশেষত্ব:

একবার একটি অ্যানিমেশন শুরু হয়ে গেলে এটি শেষ না হওয়া পর্যন্ত বা অ্যানিমেশন-নাম সরানো পর্যন্ত চলতে থাকে।

এখন শেষ দুটি উদাহরণ তুলনা করে, আমি মনে করি অনুশীলনে, "ক্লোনিং অ্যানিমেশন" প্রায়শই ভাল কাজ করা উচিত, বিশেষ করে যখন CSS প্রিপ্রসেসর উপলব্ধ থাকে।

সমস্যা 2: ধীর গতি

কেউ ভাবতে পারে যে একটি অ্যানিমেশন ধীর করা একটি দীর্ঘ সময় নির্ধারণের বিষয় animation-duration:

div { animation-duration: 0.5s; }
#slowmo:checked ~ div { animation-duration: 1.5s; }

প্রকৃতপক্ষে, এটি কাজ করে:

… নাকি এটা করে?

কয়েকটি টুইক দিয়ে, সমস্যাটি দেখতে সহজ হওয়া উচিত।

হ্যাঁ, অ্যানিমেশন ধীর হয়ে গেছে। আর না, ভালো লাগছে না। আপনি যখন চেকবক্স টগল করেন তখন কুকুরটি (প্রায়) সর্বদা "জাম্প" করে। তদ্ব্যতীত, কুকুরটি প্রাথমিক অবস্থানের পরিবর্তে একটি এলোমেলো অবস্থানে লাফ দেয় বলে মনে হচ্ছে। কিভাবে?

এটি বোঝা সহজ হবে যদি আমরা দুটি "ছায়া উপাদান" প্রবর্তন করি:

উভয় ছায়া উপাদান ভিন্ন সঙ্গে একই অ্যানিমেশন চলমান animation-duration. এবং তারা চেকবক্স দ্বারা প্রভাবিত হয় না.

আপনি যখন চেকবক্স টগল করেন, উপাদানটি অবিলম্বে দুটি ছায়া উপাদানের অবস্থার মধ্যে স্যুইচ করে।

বরাত দিয়ে W3C বিশেষত্ব:

অ্যানিমেশন চলাকালীন অ্যানিমেশন বৈশিষ্ট্যের মানগুলির পরিবর্তনগুলি প্রযোজ্য হয় যেন অ্যানিমেশনের সেই মানগুলি ছিল যখন এটি শুরু হয়েছিল।

এই অনুসরণ করে আড়ম্বরহীন ডিজাইন, যা ব্রাউজারগুলিকে সহজেই অ্যানিমেটেড মান নির্ধারণ করতে দেয়। প্রকৃত হিসাব বর্ণনা করা হয়েছে এখানে এবং এখানে.

আরেকটি প্রচেষ্টা

একটি ধারণা হল বর্তমান অ্যানিমেশনকে বিরতি দেওয়া, তারপরে একটি ধীর অ্যানিমেশন যোগ করুন যা সেখান থেকে গ্রহণ করে:

div {
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

তাই এটি কাজ করে:

… নাকি এটা করে?

আপনি "স্লোমো!" এ ক্লিক করলে এটি ধীর হয়ে যায়। কিন্তু আপনি যদি একটি পূর্ণ বৃত্তের জন্য অপেক্ষা করেন তবে আপনি একটি "জাম্প" দেখতে পাবেন। প্রকৃতপক্ষে, "স্লোমো!" হলে এটি সর্বদা অবস্থানে যায়। ক্লিক করা হয়।

কারণ আমাদের একটি নেই from কীফ্রেম সংজ্ঞায়িত - এবং আমাদের উচিত নয়। যখন ব্যবহারকারী "স্লোমো!" এ ক্লিক করেন, spin1 কিছু অবস্থানে বিরতি দেওয়া হয়, এবং spin2 ঠিক একই অবস্থানে শুরু হয়। আমরা কেবল সেই অবস্থানটি আগে থেকে ভবিষ্যদ্বাণী করতে পারি না … নাকি আমরা পারি?

একটি কার্যকরী সমাধান

আমরা পারি! একটি কাস্টম সম্পত্তি ব্যবহার করে, আমরা প্রথম অ্যানিমেশনে কোণটি ক্যাপচার করতে পারি, তারপরে এটিকে দ্বিতীয় অ্যানিমেশনে পাস করতে পারি:

div {
  transform: rotate(var(--angle1));
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  transform: rotate(var(--angle2));
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

@keyframes spin1 {
  to {
    --angle1: 360deg;
  }
}

@keyframes spin2 {
  from {
    --angle2: var(--angle1);
  }
  to {
    --angle2: calc(var(--angle1) + 360deg);
  }
}

বিঃদ্রঃ: @property এই উদাহরণে ব্যবহৃত হয়, যা সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়.

"পারফেক্ট" সমাধান

পূর্ববর্তী সমাধানের জন্য একটি সতর্কতা রয়েছে: "স্লোমো থেকে প্রস্থান করা" ভাল কাজ করে না।

এখানে একটি ভাল সমাধান আছে:

এই সংস্করণে, স্লো মোশন নির্বিঘ্নে প্রবেশ বা প্রস্থান করা যেতে পারে। কোন পরীক্ষামূলক বৈশিষ্ট্য ব্যবহার করা হয় না. তাই এটা নিখুঁত সমাধান? হ্যা এবং না.

এই সমাধানটি "শিফটিং" "গিয়ার" এর মত কাজ করে:

• গিয়ারস: দুটি আছে <div>s একজন অন্যজনের পিতা-মাতা। উভয় আছে spin অ্যানিমেশন কিন্তু ভিন্ন সঙ্গে animation-duration. উপাদানের চূড়ান্ত অবস্থা হল উভয় অ্যানিমেশনের সঞ্চয়।
• স্থানান্তর: শুরুতে, শুধুমাত্র একটি <div> এর অ্যানিমেশন চলছে। অন্যটি থামানো হয়েছে। যখন চেকবক্স টগল করা হয়, উভয় অ্যানিমেশন তাদের রাজ্যগুলিকে অদলবদল করে।

যদিও আমি সত্যিই ফলাফল পছন্দ করি, একটি সমস্যা আছে: এটি একটি চমৎকার শোষণ spin অ্যানিমেশন, যা সাধারণভাবে অন্যান্য ধরনের অ্যানিমেশনের জন্য কাজ করে না।

একটি ব্যবহারিক সমাধান (জেএস সহ)

সাধারণ অ্যানিমেশনের জন্য, কিছুটা জাভাস্ক্রিপ্ট দিয়ে ধীর গতির ফাংশন অর্জন করা সম্ভব:

একটি দ্রুত ব্যাখ্যা:

• অ্যানিমেশন অগ্রগতি ট্র্যাক করতে একটি কাস্টম সম্পত্তি ব্যবহার করা হয়।
• চেকবক্স টগল করা হলে অ্যানিমেশনটি "পুনরায় চালু" হয়।
• JS কোড সঠিক গণনা করে animation-delay একটি নির্বিঘ্ন রূপান্তর নিশ্চিত করতে। আমি সুপারিশ এই নিবন্ধটি যদি আপনি এর নেতিবাচক মানগুলির সাথে পরিচিত না হন animation-delay.

আপনি এই সমাধানটিকে "পুনরায় শুরু করা অ্যানিমেশন" এবং "গিয়ার-শিফটিং" পদ্ধতির একটি হাইব্রিড হিসাবে দেখতে পারেন।

এখানে অ্যানিমেশনের অগ্রগতি সঠিকভাবে ট্র্যাক করা গুরুত্বপূর্ণ। যদি সমাধান সম্ভব @property পাওয়া যায় না। একটি উদাহরণ হিসাবে, এই সংস্করণ ব্যবহার করে z-index অগ্রগতি ট্র্যাক করতে:

সাইড-নোট: মূলত, আমি একটি CSS-শুধু সংস্করণ তৈরি করার চেষ্টা করেছি কিন্তু সফল হইনি। 100% নিশ্চিত না হলেও, আমি মনে করি এটি কারণ animation-delay is অ্যানিমেটেবল নয়.

এখানে ন্যূনতম জাভাস্ক্রিপ্ট সহ একটি সংস্করণ রয়েছে। শুধুমাত্র "এন্টারিং স্লোমো" কাজ করে।

আপনি যদি একটি কার্যকরী CSS-শুধু সংস্করণ তৈরি করতে পরিচালনা করেন তবে দয়া করে আমাকে জানান!

স্লো-মো যেকোন অ্যানিমেশন (জেএস সহ)

অবশেষে, আমি এমন একটি সমাধান শেয়ার করতে চাই যা (প্রায়) যেকোনো অ্যানিমেশনের জন্য কাজ করে, এমনকি একাধিক জটিলতার সাথেও @keyframes:

মূলত, আপনাকে একটি অ্যানিমেশন অগ্রগতি ট্র্যাকার যুক্ত করতে হবে, তারপর সাবধানে গণনা করতে হবে animation-delay নতুন অ্যানিমেশনের জন্য। যাইহোক, কখনও কখনও সঠিক মান পেতে এটি চতুর (কিন্তু সম্ভব) হতে পারে।

উদাহরণ স্বরূপ:

• animation-timing-function এটি না linear.
• animation-direction এটি না normal.
• একাধিক মান animation-name বিভিন্ন সঙ্গে animation-durationএবং এর animation-delayএস

এই পদ্ধতিটিও বর্ণনা করা হয়েছে এখানে জন্য ওয়েব অ্যানিমেশন API.

স্বীকার

শুধুমাত্র CSS-এর প্রজেক্টের সম্মুখীন হওয়ার পর আমি এই পথটি শুরু করেছি। কিছু ছিল সূক্ষ্ম শিল্পকর্ম, এবং কিছু ছিল জটিল contraptions. আমার প্রিয় 3D বস্তু জড়িত যারা, উদাহরণস্বরূপ, এটি লাফানো বল এবং এই প্যাকিং কিউব.

শুরুতে, আমার কোন ধারণা ছিল না যে এইগুলি কীভাবে তৈরি হয়েছিল। পরে অনেক কিছু পড়ে শিখেছি Ana Tudor দ্বারা এই চমৎকার টিউটোরিয়াল.

যেহেতু এটি পরিণত হয়েছে, CSS এর সাথে 3D অবজেক্ট তৈরি করা এবং অ্যানিমেটিং করা এটি দিয়ে করা থেকে খুব বেশি আলাদা নয় ব্লেন্ডার, শুধু একটু ভিন্ন স্বাদের সাথে।

উপসংহার

এই নিবন্ধে আমরা CSS অ্যানিমেশনের আচরণ পরীক্ষা করেছি যখন একটি animate-* সম্পত্তি পরিবর্তন করা হয়। বিশেষ করে আমরা "একটি অ্যানিমেশন রিপ্লে করা" এবং "অ্যানিমেশন স্লো-মো" এর সমাধান নিয়ে কাজ করেছি।

আমি আশা করি আপনি এই নিবন্ধটি আকর্ষণীয় বলে মনে করেন। আনুগ্রহ পুবর্ক তোমার মতামত জানাও!