Menjeda, Menghentikan dan Menyembunyikan Animasi dengan keadaan animasi-main

Apabila bekerja dengan animasi, adalah penting untuk memastikan ia boleh diakses oleh semua orang. Menurut WCAG SC 2.2.2: Jeda, Henti, Sembunyikan, pengguna mesti boleh menjeda, menghentikan atau menyembunyikan animasi yang bertahan lebih daripada 5 saat. Mari kita pecahkan cara anda boleh menggunakan CSS dan JavaScript untuk mencipta animasi yang boleh dikawal oleh pengguna.

Animasi ringkas

Kita akan mulakan dengan mencipta animasi ringkas menggunakan kerangka utama CSS. Animasi ini menggerakkan kotak secara mendatar merentasi skrin.

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Menambah keadaan main

Seterusnya, kami memperkenalkan sifat animasi-play-state. Sifat ini membolehkan kami mengawal sama ada animasi sedang berjalan atau dijeda. Kami menggunakan pembolehubah CSS, --play-state, untuk menetapkan keadaan lalai animasi.

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}

Di sini, kami mentakrifkan pembolehubah --play-state pada peringkat akar dan menetapkan nilai awalnya kepada berjalan. Animasi akan dijalankan pada mulanya, tetapi pembolehubah ini memberi kita cara untuk mengawalnya kemudian.

Menambah kawalan dengan javascript

Kami menambah butang yang membolehkan pengguna menjeda/memainkan animasi dengan mengemas kini pembolehubah --play-state

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>

Kami menggunakan getComputedStyle untuk mendapatkan nilai semasa pembolehubah --play-state. Bergantung pada sama ada animasi sedang berjalan atau dijeda, kami menogol nilai dan turut mengemas kini teks butang dengan sewajarnya.

Anda boleh menemui contoh lengkap berfungsi pada codepen

Dengan melaksanakan penyelesaian mudah seperti keadaan permainan-animasi dan menyediakan kawalan untuk animasi, anda membantu mencipta pengalaman digital yang lebih inklusif.

Atas ialah kandungan terperinci Menjeda, Menghentikan dan Menyembunyikan Animasi dengan keadaan animasi-main. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!