Chrome DevTools অ্যানিমেশন ড্রয়ার ট্যাব দিয়ে অ্যানিমেশনগুলি পরিদর্শন এবং সংশোধন করুন৷
ওভারভিউ
অ্যানিমেশন ক্যাপচার করতে, অ্যানিমেশন ট্যাব খুলুন। এটি স্বয়ংক্রিয়ভাবে অ্যানিমেশন সনাক্ত করে এবং সেগুলিকে গ্রুপে সাজায়।
অ্যানিমেশন ট্যাবের দুটি প্রধান উদ্দেশ্য রয়েছে:
- অ্যানিমেশন পরিদর্শন করুন । অ্যানিমেশন গ্রুপের জন্য সোর্স কোড স্লো ডাউন, রিপ্লে বা পরিদর্শন করুন।
- অ্যানিমেশন পরিবর্তন করুন । একটি অ্যানিমেশন গ্রুপের সময়, বিলম্ব, সময়কাল বা কীফ্রেম অফসেটগুলি পরিবর্তন করুন। কীফ্রেম এবং বেজিয়ার সম্পাদনা সমর্থিত নয়।
অ্যানিমেশন ট্যাব CSS অ্যানিমেশন, CSS ট্রানজিশন, ওয়েব অ্যানিমেশন এবং ভিউ ট্রানজিশন API সমর্থন করে। requestAnimationFrame
অ্যানিমেশনগুলি এখনও সমর্থিত নয়৷
একটি অ্যানিমেশন গ্রুপ কি?
একটি অ্যানিমেশন গ্রুপ হল অ্যানিমেশনগুলির একটি সেট যা একে অপরের সাথে সম্পর্কিত বলে মনে হয় ।
আপাতত, ওয়েবে একটি গ্রুপ অ্যানিমেশনের কোনো বাস্তব ধারণা নেই, তাই মোশন ডিজাইনার এবং ডেভেলপাররা পৃথক অ্যানিমেশন রচনা করে এবং সময় দেয় একটি সুস��গত ভিজ্যুয়াল এফেক্ট হিসেবে উপস্থিত হতে। অ্যানিমেশন ট্যাবটি শুরুর সময় (বিলম্ব ব্যতীত) এর উপর ভিত্তি করে সম্পর্কিত অ্যানিমেশনগুলির পূর্বাভাস দেয় এবং সেগুলিকে পাশাপাশি গোষ্ঠীবদ্ধ করে৷
অন্য কথায়, অ্যানিমেশন ট্যাবগুলি একই স্ক্রিপ্ট ব্লকে ট্রিগার হওয়া অ্যানিমেশনগুলিকে একত্রিত করে, কিন্তু যদি সেগুলি অ্যাসিঙ্ক্রোনাস হয় তবে সেগুলি বিভিন্ন গ্রুপে শেষ হয়৷
এবার শুরু করা যাক
অ্যানিমেশন ট্যাব খোলার দুটি উপায় আছে:
- নির্বাচন করুন DevTools > আরও টুল > অ্যানিমেশন কাস্টমাইজ ও নিয়ন্ত্রণ করুন ।
নিম্নলিখিতগুলির একটি টিপে কমান্ড মেনু খুলুন:
- ম্যাকোসে: কমান্ড + শিফট + পি
- উইন্ডোজ, লিনাক্স বা ChromeOS-এ: কন্ট্রোল + শিফট + পি
তারপরে
Show Animations
টাইপ করা শুরু করুন এবং সংশ্লিষ্ট ড্রয়ার প্যানেলটি নির্বাচন করুন।
ডিফল্টরূপে, অ্যানিমেশন ট্যাবটি কনসোল ড্রয়ারের পাশে একটি ট্যাব হিসাবে খোলে। একটি ড্রয়ার ট্যাব হিসাবে, আপনি যেকোনো প্যানেলের সাথে এটি ব্যবহার করতে পারেন বা এটিকে DevTools-এর শীর্ষে নিয়ে যেতে পারেন ।
অ্যানিমেশন ��্যাবে চারটি প্রধান বিভাগ রয়েছে:
- নিয়ন্ত্রণ । এখান থেকে, আপনি সমস্ত ক্যাপচার করা অ্যানিমেশন গ্রুপগুলিকে ক্লিয়ার করতে পারেন, বিরতি দিতে পারেন বা প্লে_এরো অ্যানিমেশনগুলি পুনরায় শুরু করতে পারেন বা নির্বাচিত অ্যানিমেশন গ্রুপের গতি পরিবর্তন করতে পারেন।
ওভারভিউ আইকন দিয়ে চিহ্নিত দুই ধরনের ক্যাপচার করা অ্যানিমেশন গ্রুপ দেখায়: মাউস স্ক্রোল-চালিত এবং নিয়মিত সময়সূচী (সময়-ভিত্তিক)।
বিশদ প্যানে পরিদর্শন এবং পরিবর্তন করতে এখানে একটি অ্যানিমেশন গ্রুপ নির্বাচন করুন।
টাইমলাইন অ্যানিমেশন গ্রুপের ধরনের উপর নির্ভর করে, টাইমলাইন হতে পারে:
- মাউস স্ক্রোল চালিত অ্যানিমেশনের জন্য পিক্সেলে।
- সময়-ভিত্তিক অ্যানিমেশনের জন্য মিলিসেকেন্ডে।
টাইমলাইনে, আপনি একটি অ্যানিমেশন রিপ্লে রিপ্লে করতে পারেন, এটি স্ক্রাব করতে পারেন বা একটি নির্দিষ্ট পয়েন্টে যেতে পারেন।
বিস্তারিত নির্বাচিত অ্যানিমেশন গ্রুপ পরিদর্শন এবং সংশোধন করুন।
একটি অ্যানিমেশন ক্যাপচার করতে, অ্যানিমেশন ট্যাব খোলা থাকা অবস্থায় এটি ট্রিগার করুন। যদি পৃষ্ঠা লোডের সময় একটি অ্যানিমেশন ট্রিগার হয়, তাহলে এটি পুনরায় লোড করুন।
অ্যানিমেশন পরিদর্শন করুন
একবার আপনি একটি অ্যানিমেশন ক্যাপচার করলে, এটি পুনরায় চালানোর কয়েকটি উপায় রয়েছে:
- এটির একটি পূর্বরূপ দেখতে ওভারভিউ ফলকে এর থাম্বনেইলের উপর হোভার করুন।
- ভিউপোর্ট অ্যানিমেশন স্ক্রাব করতে প্লেহেড (লাল উল্লম্ব বার) টেনে আনুন বা প্লেহেডটিকে একটি নির্দিষ্ট পয়েন্টে সেট করতে টাইমলাইনের যে কোনও জায়গায় ক্লিক করুন। অ্যানিমেশনটি চলতে থাকে যদি এটি ইতিমধ্যেই বাজছিল এবং অন্যথায় বন্ধ হয়ে যায়।
- ওভারভিউ ফলক থেকে অ্যানিমেশন গ্রুপটি নির্বাচন করুন (যাতে এটি বিশদ প্যানে প্রদর্শিত হয়) এবং টিপুন রিপ্লে বোতাম। ভিউপোর্টে অ্যানিমেশন রিপ্লে করা হয়।
ক্লিক করুন নির্বাচিত অ্যানিমেশন গ্রুপের পূর্বরূপ গতি পরিবর্তন করতে কন্ট্রোল বারে অ্যানিমেশন গতি বোতাম।
অ্যানিমেশন বিবরণ দেখুন
একবার আপনি একটি অ্যানিমেশন গ্রুপ ক্যাপচার করলে, এর বিশদ বিবরণ দেখতে ওভারভিউ ফলক থেকে এটিতে ক্লিক করুন।
বিবরণ ফলকে, প্রতিটি পৃথক অ্যানিমেশন তার নিজস্ব সারি পায়। সংশ্লিষ্ট উপাদানের সম্পূর্ণ নাম দেখতে, নাম কলামের আকার পরিবর্তন করুন।
ভিউপোর্টে হাইলাইট করার জন্য একটি অ্যানিমেশনের উপর হোভার করুন। এলিমেন্টস প্যানেলে এটি নির্বাচন করতে অ্যানিমেশনটিতে ক্লিক করুন।
কিছু অ্যানিমেশন অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করে যদি তাদের animation-iteration-count
সম্পত্তি infinite
সেট করা থাকে। অ্যানিমেশন ট্যাব তাদের সংজ্ঞা এবং পুনরাবৃত্তি প্রদর্শন করে।
একটি অ্যানিমেশনের সবচেয়ে বাম, গাঢ় অংশ হল এর সংজ্ঞা। ডান, আরো বিবর্ণ বিভাগ পুনরাবৃত্তি প্রতিনিধিত্ব করে।
উদাহরণস্বরূপ, পরবর্তী স্ক্রিনশটে, বিভাগ দুটি এবং তিনটি বিভাগ একের পুনরাবৃত্তির প্রতিনিধিত্ব করে।
যদি দুটি উপাদানে একই অ্যানিমেশন প্রয়োগ করা হয়, তবে অ্যানিমেশন ট্যাব তাদের একই রঙ নির্ধারণ করে। রঙ নিজেই এলোমেলো এবং এর কোন গুরুত্ব নেই। উদাহরণস্বরূপ, নিচের স্ক্রিনশটে দুটি উপাদান div.eye.left::after
এবং div.eye.right::after
একই অ্যানিমেশন ( eyes
) প্রয়োগ করুন, যেমন div.feet::before
এবং div.feet::after
।
অ্যানিমেশন পরিবর্তন করুন
অ্যানিমেশন ট্যাব দিয়ে আপনি তিনটি উপায়ে অ্যানিমেশন পরিবর্তন করতে পারেন:
- অ্যানিমেশন সময়কাল।
- কীফ্রেম টাইমিং।
- শুরুর সময় বিলম্ব।
এই বিভাগের জন্য, ধরুন যে পরবর্তী স্ক্রিনশটটি আসল অ্যানিমেশনের প্রতিনিধিত্ব করে:
একটি অ্যানিমেশনের সময়কাল পরিবর্তন করতে, প্রথম বা শেষ বৃত্ত টেনে আনুন।
যদি অ্যানিমেশন কোন কীফ্রেম নিয়ম সংজ্ঞায়িত করে, তাহলে এগুলিকে সাদা অভ্যন্তরীণ বৃত্ত হিসাবে উপস্থাপন করা হয়। কীফ্রেমের সময় পরিবর্তন করতে এর মধ্যে একটি টেনে আনুন।
একটি অ্যানিমেশনে বিলম্ব যোগ করতে, অ্যানিমেশনে ক্লিক করুন, চেনাশোনাগুলিতে নয়, তারপর এটিকে ��ে কোনও জায়গায় টেনে আনুন৷
একটি অ্যানিমেশন চলাকালীন ::view-transition
সিউডো-এলিমেন্টগুলি সম্পাদনা করুন
ভিউ ট্রানজিশন এপিআই-এর সাহায্যে আপনি দুটি স্টেটের মধ্যে একটি অ্যানিমেটেড ট্রানজিশন তৈরি করার সময় একক ধাপে DOM পরিবর্তন করতে পারেন। একটি অ্যানিমেশনের সময়, API নিম্নলিখিত কাঠামো সহ একটি ছদ্ম-উপাদান গাছ তৈরি করে:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
উপাদান > শৈলীতে এই কাঠামো সম্পাদনা করতে:
- DevTools খুলুন এবং একটি পৃষ্ঠা পরিদর্শন করুন যা ভিউ ট্রানজিশন API ব্যবহার করেছে। উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠা ।
- অ্যানিমেশনে , পজ পজ ক্লিক করুন।
পৃষ্ঠায়, একটি অ্যানিমেশন ট্রিগার করুন। অ্যানিমেশন প্যানেল এটি ক্যাপচার করে এবং অবিলম্বে বিরতি দেয়। আপনি এখন DOM-এ
<head>
এলিমেন্টের উপরে::view-transition
স্ট্রাকচার খুঁজে পেতে পারেন।Elements > Styles- এ,
::view-transition
pseudo-elements-এর CSS পরিবর্তন করুন।অ্যানিমেশন পুনরায় শুরু করুন এবং ফলাফল দেখতে এটি পুনরায় চালান ।
আরও তথ্যের জন্য, ভিউ ট্রানজিশন API এর সাথে মসৃণ এবং ��হজ ����পান্তরগুলি দেখুন।