মোবাইল ব্রাউজারে SVG-ভিত্তিক স্প্রাইট-শীটের CSS3 GPU অ্যাক্সিলেশন অপ্টিমাইজেশন

ফ্লিকারিং (Flickering) সমস্যা এবং Z-Index সমাধান

SVG স্প্রাইট শীট অ্যানিমেশনে (ফ্রেম বাই ফ্রেম) রিড্র সাইকেলের সময় পिछلا ফ্রেম এখনও ভিজিবল থাকলে ফ্লিকার হয়। GPU কম্পোজিটর লেয়ার অর্ডারিং এই সমস্যাটি সমাধান করতে পারে।

টেকনিক: Z-Index ইনক্রিমেন্ট

1. প্রতিটি ফ্রেমের জন্য একটি `
   ` বা `` এলিমেন্ট রাখুন।
2. নতুন ফ্রেম দেখানোর সময় তার `z-index` বড় করুন (পূর্বের ফ্রেমের চেয়ে)।
3. পুরানো ফ্রেমগুলো রিমুভ বা হাইড করুন।

CSS/JS উদাহরণ

let zCounter = 10;
function showNextFrame(nextFrameEl) {
  // বর্তমান এক্টিভ ফ্রেমকে previous করুন
  document.querySelectorAll('.frame-active').forEach(el => {
    el.classList.remove('frame-active');
    el.classList.add('frame-previous');
  });

  // নতুন ফ্রেম এক্টিভ
  nextFrameEl.classList.add('frame-active');
  nextFrameEl.style.zIndex = ++zCounter;

  // জি-ইন্ডেক্স ওভারফ্লো এড়ানোর জন্য পিরিয়ডিক্যালি রিসেট
  if (zCounter > 10000) {
    document.querySelectorAll('.sprite-frame').forEach((el, i) => {
      el.style.zIndex = i + 10;
    });
    zCounter = 10 + document.querySelectorAll('.sprite-frame').length;
  }
}

নোট: `will-change: transform, opacity` ব্রাউজারকে GPU লেয়ার প্রস্তুত रखতে বলে, যা অ্যানিমেশন スムুথ করে।