Animasi berkaitan tatal dengan API Animasi Web (WAAPI) dan ScrollTimeline

Artikel ini meneroka animasi yang berkaitan dengan tatal, teknologi web baru yang menghubungkan kemajuan animasi untuk menatal. Walaupun sebelum ini dapat dicapai dengan CSS sahaja, artikel ini memberi tumpuan kepada pendekatan JavaScript menggunakan API Animasi Web (WAAPI) dan kelas ScrollTimeline .

Kami akan mengkaji secara ringkas Waapi, kemudian menyelam menggunakan ScrollTimeline untuk membuat animasi yang didorong oleh tatal. Ini menawarkan alternatif yang kuat kepada penyelesaian CSS sahaja, terutamanya diberikan batasan keserasian pelayar semasa.

Waapi: penyegar cepat

Waapi membolehkan kawalan JavaScript ke atas animasi. Pertimbangkan animasi CSS yang mudah: bar yang beralih dari merah ke merah gelap sambil berkembang secara mendatar. Setaraf Waapi adalah ringkas dan fleksibel:

 Animasi Baru (
  KeyFrameeffect baru (
    Document.QuerySelector ('Progressbar'),
    {
      Latar Belakang: ['Red', 'Darkred'],
      Transform: ['Scalex (0)', 'Scalex (1)'],
    },
    {
      Tempoh: 2500,
      Isi: 'ke hadapan',
      pelonggaran: 'linear',
    }
  )
) .play ();

Atau, lebih ringkas menggunakan Element.animate() :

 Document.QuerySelector ('ProgressBar'). Animate (
  {
    Latar Belakang: ['Red', 'Darkred'],
    Transform: ['Scalex (0)', 'Scalex (1)'],
  },
  {
    Tempoh: 2500,
    Isi: 'ke hadapan',
    pelonggaran: 'linear',
   }
);

Kedua -dua contoh menentukan kerangka utama (sifat animasi) dan pilihan (tempoh, pelonggaran, dll.).

Mengintegrasikan scrolltimeline

Untuk membuat animasi yang bergantung kepada skrol, kami mengintegrasikan ScrollTimeline . Kelas ini mewujudkan garis masa animasi yang dikaitkan dengan kemajuan bekas tatal. Pilihan konfigurasi utama termasuk:

• source (atau scrollSource dalam kromium): elemen scrollable. Lalai ke document.scrollingElement .
• orientation : Arah tatal (misalnya, 'blok' untuk menegak). Lalai ke menegak.
• scrollOffsets : Menetapkan selang kemajuan di mana garis masa aktif.

Contoh:

 const myscrollTimeline = scrollTimeline baru ({
  Sumber: Document.ScrollingElement,
  Orientasi: 'Blok',
  scrolloffsets: [
    cssunitvalue baru (0, 'peratus'),
    CSSUnitValue baru (100, 'peratus'),
  ],
});

Melampirkan ini ke animasi waapi:

 Animasi Baru (
  KeyFrameeffect baru (
    Document.QuerySelector ('#kemajuan'),
    {Transform: ['Scalex (0)', 'Scalex (1)'],},
    {durasi: 1, isi: 'ke hadapan'}
  ))
  MyScrollTimeline
) .play ();

Atau dengan Element.animate() :

 Document.QuerySelector ("#kemajuan"). Animate (
  {
    Transform: ["Scalex (0)", "Scalex (1)"]
  },
  { 
    Tempoh: 1, 
    Isi: "ke hadapan", 
    Timeline: MyScrollTimeline
  }
);

Ini menjadikan tatal animasi yang didorong. Perhatikan bahawa Chromium kini menggunakan scrollSource .

Keserasian penyemak imbas dan polyfills

Pada masa ini, hanya penyemak imbas berasaskan kromium sepenuhnya menyokong ScrollTimeline , sering memerlukan bendera ciri. Polyfill-timeline Polyfill oleh Robert Flack menyediakan keserasian yang lebih luas:

 import 'https://flackr.github.io/scroll-Timeline/dist/scroll-Timeline.js';

Penggunaan Lanjutan: offset berasaskan elemen

Di luar offsets mutlak, scrollOffsets boleh menggunakan offset berasaskan elemen, animasi berdasarkan kedudukan elemen dalam bekas tatal. Offset ini terdiri daripada:

1. target : Elemen yang dikesan.
2. edge : tepi sasaran jam tangan garis masa (misalnya, 'mula', 'akhir').
3. threshold : Peratusan penglihatan (0.0-1.0).

Contoh:

 {
  Sasaran: Document.QuerySelector ('#Targetel'),
  tepi: 'akhir',
  Ambang: 0.5,
}

Pelbagai objek offset boleh digunakan.

CSS vs JavaScript: Perbandingan

Kedua-dua pendekatan CSS dan JavaScript mencapai animasi berkaitan skrol. CSS lebih baik untuk peningkatan kesederhanaan dan progresif, tetapi sokongan penyemak imbas semasa adalah terhad. JavaScript menawarkan keserasian yang lebih luas tetapi memerlukan pertimbangan yang teliti untuk pengguna dengan JavaScript dilumpuhkan. Pilihan bergantung kepada keperluan dan keutamaan projek. Contoh -contoh yang disediakan mempamerkan fleksibiliti dan kuasa pendekatan JavaScript menggunakan Waapi dan ScrollTimeline .

Atas ialah kandungan terperinci Animasi berkaitan tatal dengan API Animasi Web (WAAPI) dan ScrollTimeline. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!