টিএল; ডিআর
Chrome 53 থেকে শুরু করে, সমস্ত বিষয়বস্তু পুনরায় রাস্টার করা হয় যখন এর ট্রান্সফর্ম স্কেল পরিবর্তন হয়, যদি এতে will-change: transform । অন্য কথায়, will-change: transform মানে "দয়া করে এটি দ্রুত অ্যানিমেট করুন"।
এটি শুধুমাত্র স্ক্রিপ্ট ম্যানিপুলেশনের মাধ্যমে ঘটে যাওয়া রূপান্তর স্কেলগুলিতে প্রযোজ্য, এবং CSS অ্যানিমেশন বা ওয়েব অ্যানিমেশনগুলিতে প্রযোজ্য নয় ।
এর মানে হল আপনার সাইটটি সম্ভবত আরও ভাল-সুদর্শন সামগ্রী পাবে, তবে নীচে বর্ণিত কিছু সাধারণ পরিবর্তন ছাড়াই এটি ধীর হতে পারে।
ওয়েব ডেভেলপারদের জন্য প্রভাব
এই পরিবর্তনের অধীনে, will-change: transform একটি স্থির বিটম্যাপে কন্টেন্টকে রাস্টার করতে বাধ্য করে বলে মনে করা যেতে পারে, যা পরবর্তীকালে ট্রান্সফর্ম আপডেটের অধীনে কখনও পরিবর্তন হয় না। এটি ডেভেলপারদের সেই বিটম্যাপে ট্রান্সফর্ম অ্যানিমেশনের গতি বাড়াতে দেয়, যেমন এটিকে ঘোরানো, ঘোরানো বা স্কেল করা।
আমরা স্কেল এবং অনুবাদ রূপান্তরের মধ্যে পার্থক্য করি না।
প্রস্তাবিত কর্ম
will-change: transform যখন আপনার খুব দ্রুত (অন্য কথায়, 60fps) অ্যানিমেশন গতির রূপান্তর প্রয়োজন, এবং এটি প্রত্যাশিত যে প্রতিটি ফ্রেমে উপাদানটিকে উচ্চ মানের রাস্টার করা যথেষ্ট দ্রুত নয়৷ অন্যথায়, will-change: transform ।
পারফরম্যান্স-গুণমানের ট্রেডঅফ অপ্টিমাইজ করতে, আপনি will-change: transform এবং শেষ হলে তা সরিয়ে ফেলুন। যাইহোক, সচেতন থাকুন যে উইল-চেঞ্জ যোগ বা অপসারণ করার জন্য প্রায়শই একটি বড় এক-কালীন কর্মক্ষমতা খরচ হয় will-change: transform ।
অতিরিক্ত বাস্তবায়ন বিবেচনা
will-change: transform কারণে বিষয়বস্তুকে একটি খাস্তা স্কেলে পুনরায় রাস্টার করা হয়, তবে শুধুমাত্র পরবর্তী অ্যানিমেশন ফ্রেমে ( requestAnimationFrame) । এইভাবে আপনার যদি will-change: transform সহ একটি লেয়ার থাকে এবং শুধুমাত্র একটি রি-রাস্টার ট্রিগার করতে চান কিন্তু তারপর অ্যানিমেটিং চালিয়ে যেতে চান, তাহলে আপনাকে অবশ্যই উইল-চেঞ্জ: ট্রান্সফর্ম মুছে ফেলতে হবে, তারপর এটিকে requestAnimationFrame() c অলব্যাকে পুনরায় যোগ করুন।
যদি কোনো অ্যানিমেশন চলাকালীন যে কোনো সময়ে, আপনি বর্তমান স্কেলে রাস্টার করতে চান, একটি ফ্রেমে অপসারণের জন্য উপরের কৌশলটি প্রয়োগ করুন, পুনরায় যুক্ত will-change: transform ।
এতে বিষয়বস্তুর সংমিশ্রিত স্তর হারানোর পার্শ্ব-প্রতিক্রিয়া থাকতে পারে, যার ফলে উপরের সুপারিশটি কিছুটা ব্যয়বহুল হতে পারে। যদি এটি একটি সমস্যা হয়, আমরা এই ক্রিয়াকলাপের সময় এটি একটি সংমিশ্রিত স্তরে থাকে তা নিশ্চিত করতে সামগ্রীতে transform: translateZ(0) যোগ করার পরামর্শ দিই৷
প্রভাবের সারাংশ
রেন্ডার করা সামগ্রীর গুণমান, কর্মক্ষমতা এবং বিকাশকারী নিয়ন্ত্রণের জন্য এই পরিবর্তনের প্রভাব রয়েছে৷
- রেন্ডার করা সামগ্রীর গুণমান : উপাদানগুলির রেন্ডার করা আউটপুট যা ট্রান্সফর্ম স্কেলকে অ্যানিমেট করে সর্বদা ডিফল্টরূপে খাস্তা হবে।
- পারফরম্যান্স : অ্যানিমেটিং ট্রান্সফর্ম যখন
will-change: transformউপস্থিত আছে দ্রুত হবে। - বিকাশকারী নিয়ন্ত্রণ : বিকাশকারীরা যোগ এবং অপসারণ করে প্রতি-উপাদান এবং প্রতি-অ্যানিমেশন ফ্রেমের ভিত্তিতে গুণমান এবং গতির মধ্যে বেছে নিতে পারেন
will-change: transform।
আরো বিস্তারিত জানার জন্য উপরে উল্লেখিত নকশা ডক দেখুন.
উদাহরণ
এই উদাহরণে , remainsBlurry আইডি সহ উপাদানটি এই পরিবর্তনের পরেও অস্পষ্ট থাকবে, কিন্তু noLongerBlurry আইডি সহ উপাদানটি খাস্তা হয়ে যাবে৷ কারণ আগেরটির একটি will- change: transform ।
বাস্তব অ্যাপ্লিকেশন থেকে রূপান্তর স্কেল অ্যানিমেশন উদাহরণ
- এই বাগ থেকে: জুমিং বাঘ
- মোবাইলে গুগল ম্যাপ (maps.google.com)- ম্যাপ জুম করুন
- ডেস্কটপে গুগল ম্যাপ লাইট
- টিকিটমাস্টার সিট ম্যাপ