Bagaimana cara memainkan urutan gambar dengan lancar dengan animasi CSS?

Bagaimana cara menggunakan animasi CSS untuk mencapai main balik urutan gambar yang lancar?

Banyak adegan memerlukan kesan main balik video simulasi, tetapi bahannya adalah urutan gambar. Kaedah menggantikan laluan imej secara langsung tidak cekap dan terdedah kepada skrin hitam atau kekeliruan yang disebabkan oleh kelewatan memuatkan. Artikel ini menyediakan penyelesaian berdasarkan animasi CSS untuk menghindari masalah tersebut dengan berkesan.

Preloading semua imej bukan penyelesaian terbaik, terutamanya apabila bilangan imej adalah besar, pengurusan dan kos pemuatan terlalu tinggi.

Strategi yang lebih baik adalah untuk menyambungkan gambar ke dalam gambar yang panjang. Dengan mengandaikan bahawa semua imej adalah saiz yang sama (contohnya, 500x300 piksel), menyambungkan tiga imej secara mendatar ke dalam imej panjang 1500x300 piksel. Gunakan atribut background-position CSS dan animasi @keyframes untuk mensimulasikan main balik imej.

Contoh kod CSS berikut:

 .container {
  lebar: 500px;
  Ketinggian: 300px;
  Latar Belakang: URL ("Split Image") Kiri / Auto 100% No-Repeat;
  Animasi: Main Langkah Durasi Animasi (1, Mula) 0S Infinite Normal Tiada;
}

@KeyFrames Play {
  dari {latar belakang-kedudukan: 0 0; } /* Foto 1* /
  33.3% {latar belakang -kedudukan: -500px 0; } /* Foto 2* /
  66.7% {latar belakang -kedudukan: -1000px 0; } /* Foto 3* /
  kepada {latar belakang-kedudukan: 0 0; } /* Kembali ke gambar pertama, mainkan gelung* /
}

Dalam kod, .container mentakrifkan bekas dan imej latar belakang adalah gambaran panjang jahitan. Atribut animation mentakrifkan play animasi, steps(1, start) memastikan bahawa animasi dimainkan langkah demi langkah, dan动画时长perlu diselaraskan mengikut bilangan gambar dan kelajuan main balik. background-position mengawal kawasan paparan dan menukar gambar dengan mengubah suai nilainya. Peratusan dalam keyframes perlu diselaraskan mengikut bilangan dan saiz gambar, dan masa paparan setiap gambar dikawal dengan tepat.

Kaedah ini mengelakkan memuatkan satu demi satu, meningkatkan kelancaran main balik, dan menjadikan kod mudah dan mudah difahami. Premisnya ialah semua gambar adalah saiz yang sama. Sekiranya saiznya tidak konsisten, pra-pemprosesan mesti dilakukan menggunakan kanvas atau teknik pemprosesan imej yang lain.

Atas ialah kandungan terperinci Bagaimana cara memainkan urutan gambar dengan lancar dengan animasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!