Animasi linear berurutan () dengan N elemen – Beragampengetahuan

dengan asumsi Anda punya N Elemen yang memiliki animasi yang sama dan harus dianimasikan secara berurutan. Yang pertama, lalu yang kedua, dan seterusnya hingga Anda mencapai yang terakhir, lalu ulangi kembali ke awal. Saya yakin Anda tahu apa yang saya bicarakan dan mungkin sulit untuk mencapai efek ini. Anda perlu menentukan bingkai utama yang kompleks, menghitung penundaan, membuatnya berfungsi untuk sejumlah item tertentu, dll.

Izinkan saya memberi tahu Anda: dengan menggunakan CSS modern, kita dapat dengan mudah mencapainya hanya dengan beberapa baris kode, dan ini berfungsi untuk sejumlah proyek!

Demo di bawah ini saat ini terbatas pada Chrome dan Edge, tetapi juga dapat digunakan di browser lain sibling-index() Dan sibling-count() Fitur mendapatkan dukungan yang lebih luas. Anda dapat melacak dukungan Firefox di Tiket #1953973 dan penempatan WebKit di Edisi #471.

Dalam demo di atas, elemen dianimasikan secara berurutan dan bingkai utama sesederhana satu animasi to Bingkai mengubah warna latar belakang dan skala elemen:

@keyframes x {
  to {
    background: #F8CA00;
    scale: .8;
  }
}

Anda dapat menambah atau menghapus item sebanyak yang Anda suka dan semuanya akan berjalan lancar. Keren, bukan? Efek ini dicapai melalui kode aneh dan rumit ini:

.container > * {
  --_s: calc(100%*(sibling-index() - 1)/sibling-count());
  --_e: calc(100%*(sibling-index())/sibling-count());

  animation: 
    x calc(var(--d)*sibling-count()) infinite 
    linear(0, 0 var(--_s), 1, 0 var(--_e), 0);
}

Agak menakutkan dan sulit untuk dipahami, tetapi saya akan menjelaskannya kepada Anda untuk memahami logika di baliknya.

CSS linear() Fungsi

Saat bekerja dengan animasi, kita dapat menentukan fungsi pengaturan waktu (disebut juga fungsi pelonggaran). Kita dapat menggunakan nilai kata kunci yang telah ditentukan sebelumnya – mis. linear, ease, ease-inTunggu – atau steps() Definisikan animasi diskrit. di samping itu cubic-bezier().

Namun kami memiliki fitur yang lebih baru dan lebih canggih untuk ditambahkan ke daftar tersebut: linear().

Dari spesifikasinya:

Fungsi pelonggaran linier adalah fungsi pelonggaran yang melakukan interpolasi linier antara titik kontrolnya. Setiap titik kontrol adalah sepasang angka yang menghubungkan nilai kemajuan masukan dengan nilai kemajuan keluaran.

animation-timing-function: linear Buat interpolasi linier antara dua titik – awal Dan akhir animasi – pada saat yang sama linear() Fungsi memungkinkan kita menentukan sejumlah titik dan melakukan interpolasi “linier” antara dua titik yang berurutan.

Ini agak membingungkan pada awalnya, tapi begitu kita mulai menggunakannya, segalanya menjadi lebih jelas. Mari kita mulai dengan nilai pertama, yang tidak lain adalah ekuivalen linear nilai.

linear(0 0%, 1 100%)

Kami memiliki dua titik, masing-masing ditentukan dengan dua nilai (kemajuan “output” dan kemajuan “input”). Kemajuan “output” adalah animasi (yaitu apa yang didefinisikan dalam bingkai utama) dan kemajuan “input” adalah waktu.

Mari kita perhatikan kode berikut:

.box {
  animation: move 2s linear(0 0%, 1 100%);
}

@keyframes move {
  0%   {translate: 0px }
  100% {translate: 80px}
}

Dalam hal ini kami ingin 0 animasi (translate: 0px) ada t=0% (dengan kata lain, 0% dari 2sJadi 0s) Dan 1 animasi (translate: 80px) ada t=100% (Ini 100% dari 2sJadi 2s). Di antara titik-titik ini kami melakukan interpolasi linier.

Kita dapat menggunakan angka sebagai pengganti persentase, yang berarti hal berikut ini juga valid:

linear(0 0, 1 1)

Namun saya menyarankan Anda tetap menggunakan notasi persentase untuk menghindari kebingungan dengan nilai pertama (yang juga merupakan angka). ini 0% Dan 100% bersifat implisit, jadi kita dapat menghapusnya dan cukup menggunakan yang berikut ini:

linear(0, 1)

Mari tambahkan poin ketiga:

linear(0, 1, 0)

Seperti yang Anda lihat, saya belum menentukan kemajuan “input” apa pun (nilai yang mewakili persentase waktu) karena tidak wajib; namun, memperkenalkannya adalah hal pertama untuk memahami fungsi yang dilakukan.

Nilai pertama selalu pada 0% Nilai terakhir selalu masuk 100%.

linear(0 0%, 1, 0 100%)

Nilainya akan menjadi 50% adalah titik tengahnya. Ketika suatu titik kontrol kekurangan kemajuan “input” nya, kita mengambil nilai tengah antara dua titik yang berdekatan. Jika Anda familiar dengan gradien, Anda akan menemukan bahwa logika yang sama berlaku untuk skala warna.

linear(0 0%, 1 50%, 0 100%)

Lebih mudah dibaca, bukan? Bisakah Anda menjelaskan apa fungsinya? Luangkan waktu beberapa menit untuk memikirkannya sebelum melanjutkan.

tahu? Saya yakin Anda melakukannya!

Begini cara kerusakannya:

1. kita mulai dari translate: 0px ada t=0s (0% dari 2s).
2. Lalu kita pindah ke translate: 80px ada t=1s (50% dari 2s).
3. Lalu kita kembali ke translate: 0px ada t=2s (100% dari 2s).

Kebanyakan fungsi pengaturan waktu hanya memungkinkan kita untuk bergerak maju, tapi linear() Kita dapat bergerak ke dua arah sebanyak yang kita perlukan. Itu sebabnya fitur ini sangat kuat. Dengan menggunakan keyframe “sederhana”, Anda dapat memiliki animasi “kompleks”.

Saya dapat melakukan hal yang sama menggunakan keyframe berikut:

@keyframes move {
  0%, 100% { translate: 0px }
  50% { translate: 80px }
}

Namun, jika saya menginginkan animasi yang berbeda, saya tidak dapat memperbarui nilai persentasenya secara dinamis. Tidak ada cara untuk mengontrol keyframe menggunakan CSS, jadi saya perlu mendefinisikan keyframe baru setiap kali saya memerlukan animasi baru. Tapi dengan linear()saya hanya memerlukan satu bingkai utama.

Pada demo di bawah, semua elemen menggunakan keyframe yang sama, namun memiliki animasi yang sangat berbeda!

tambahkan penundaan linear()

Sekarang kita tahu lebih banyak linear()mari kita beralih ke trik utama efek kita. Jangan lupa bahwa idenya adalah membuat animasi berkelanjutan dengan jumlah tertentu (N) elemen. Setiap elemen perlu dianimasikan dan kemudian “menunggu” hingga semua elemen lainnya selesai dianimasikan sebelum memulai lagi. Waktu tunggu ini dapat dianggap sebagai penundaan.

Cara intuitif untuk melakukannya adalah sebagai berikut:

@keyframes move {
  0%, 50% { translate: 0px }
  100% { translate: 80px }
}

Kami menentukan nilai yang sama 0% Dan 50%;jadi tidak ada yang terjadi di antara keduanya 0% Dan 50%. Kami mengalami penundaan, namun seperti yang saya katakan sebelumnya, kami tidak dapat mengontrol persentase tersebut menggunakan CSS. Sebaliknya, kita dapat mengekspresikan hal yang sama dengan menggunakan linear():

linear(0 0%, 0 50%, 1 100%)

Dua titik kontrol pertama memiliki kemajuan “keluaran” yang sama. Yang pertama terletak di 0% Yang kedua saat itu 50% waktu, jadi tidak ada yang “secara visual” terjadi selama paruh pertama animasi. Kami membuat penundaan tanpa memperbarui bingkai utama!

@keyframes move {
  0% { translate: 0px }
  100% { translate: 80px }
}

Mari tambahkan poin lain untuk kembali ke keadaan awal:

linear(0 0%, 0 50%, 1 75%, 0 100%)

Atau sederhananya:

linear(0, 0 50%, 1, 0)

Keren, bukan? Kami dapat membuat animasi yang kompleks menggunakan serangkaian bingkai utama yang sederhana. Tak hanya itu, kita juga bisa menyesuaikannya linear() Fungsi. Inilah yang akan kita lakukan untuk setiap elemen untuk mendapatkan animasi berurutan!

animasi penuh

Mari kita kembali ke animasi pertama kita dan menggunakan animasi sebelumnya linear() Nilai yang kami lakukan sebelumnya. Kita akan mulai dengan dua elemen.

Belum ada yang mengejutkan. Kedua elemen tersebut memiliki animasi yang sama persis, sehingga keduanya dianimasikan dengan cara yang sama pada waktu yang bersamaan. Sekarang, mari perbarui linear() Fungsi ini memberikan efek sebaliknya pada elemen pertama: babak pertama dianimasikan, lalu babak kedua ditunda.

linear(0, 1, 0 50%, 0)

Ini secara efektif membalikkan nilai sebelumnya:

Tiantian! Kami telah membuat animasi berkelanjutan yang berisi dua elemen! Apakah Anda mulai mendapatkan idenya? Tujuannya adalah melakukan hal yang sama dengan nomor berapa pun (N) elemen. Tentu saja, kami tidak akan menugaskan yang berbeda linear() Nilai setiap elemen – kami akan melakukannya secara terprogram.

Pertama, mari kita menggambar diagram untuk memahami apa yang kita lakukan dengan kedua elemen tersebut.

Saat satu elemen menunggu, elemen lainnya sedang dianimasikan. Kita dapat mengidentifikasi dua rentang. Mari kita bayangkan situasi yang sama dengan menggunakan tiga elemen.

Kali ini, kita membutuhkan tiga rentang. Setiap elemen dianimasikan dalam satu cakupan dan menunggu dalam dua cakupan. Apakah Anda melihat pola ini? untuk N elemen yang kita perlukan N ruang lingkup, dan linear() Fungsi tersebut akan memiliki sintaks berikut:

linear(0, 0 S, 1, 0 E, 0)

ini awal Dan akhir setara 0yang merupakan keadaan awal animasi, lalu kita memiliki animasi di antaranya S Dan E. Sebuah elemen akan menunggu 0% tiba Sanimasi dari S tiba Elalu tunggu lagi E tiba 100%. Waktu animasi sama dengan 100%/Nyang artinya E - S = 100%/N.

Elemen pertama berada pada rentang pertama (0 * 100%/N), elemen kedua dalam rentang kedua (1 * 100%/N), elemen ketiga dalam rentang ketiga (2 * 100%/N), dll. S setara:

S = (i - 1) * 100%/N

…Di mana i adalah indeks elemen.

Sekarang, Anda mungkin bertanya, Bagaimana kita? nilai yang didapat N Dan i? Jawabannya sederhana, gunakan saja sibling-count()Dan sibling-index() Fungsi! Sekali lagi, ini saat ini didukung di browser Chromium, tetapi kami berharap ini akan diluncurkan ke browser lain di masa mendatang.

S = calc(100%*(sibling-index() - 1)/sibling-count())

Dan:

E = S + 100%/N
E = calc(100%*sibling-index()/sibling-count())

Kami menulis semua ini dengan CSS yang bagus dan selesai!

.box {
  --d: .5s; /* animation duration */
  --_s: calc(100%*(sibling-index() - 1)/sibling-count());
  --_e: calc(100%*(sibling-index())/sibling-count());

  animation: x calc(var(--d)*sibling-count()) infinite linear(0, 0 var(--_s), 1, 0 var(--_e), 0);
}
@keyframes x {
  to {
    background: #F8CA00;
    scale: .8;
  }
}

Saya menggunakan variabel (--d) untuk mengontrol durasi, namun hal ini tidak wajib. Saya ingin dapat mengontrol berapa lama waktu yang dibutuhkan setiap elemen untuk dianimasikan. Makanya nanti saya kalikan dengan N.

Sekarang yang tersisa hanyalah mendefinisikan animasi Anda. Tambahkan elemen sebanyak yang Anda suka dan amati hasilnya. Tidak ada lagi keyframe dan nilai ajaib yang rumit!

catatan: Untuk alasan yang tidak diketahui (mungkin bug), Anda perlu mendaftarkan variabel menggunakan @property.

Lebih banyak perubahan

Kita dapat memperluas ide dasar untuk menciptakan lebih banyak variasi. Misalnya, daripada harus menunggu satu elemen menyelesaikan animasinya sepenuhnya, elemen berikutnya sudah dapat memulai animasinya sendiri.

Kali ini saya mendefinisikannya N + 1 Rentang, setiap elemen dianimasikan dalam dua rentang. Elemen pertama akan bernyawa di rentang pertama dan kedua, sedangkan elemen kedua akan bernyawa di rentang kedua dan ketiga; jadi kedua animasi tersebut tumpang tindih di rentang kedua, dan seterusnya.

Saya tidak akan menghabiskan terlalu banyak waktu untuk menjelaskan kasus ini karena ini hanyalah salah satu dari banyak contoh yang kita buat, jadi saya akan membiarkan Anda membedah kodenya sebagai latihan kecil. Ini artikel lain untuk Anda pelajari.

sebagai kesimpulan

ini linear() Fungsi ini diperkenalkan terutama untuk menciptakan pelonggaran kompleks seperti pantulan dan elastisitas, namun dikombinasikan dengan fitur modern lainnya, fungsi ini membuka banyak kemungkinan. Dengan artikel ini kami memiliki gambaran kecil tentang potensinya. Saya mengatakan “kecil” karena kita dapat melangkah lebih jauh dan membuat animasi yang lebih kompleks, jadi pantau terus artikel lainnya!