CSS3 Animation - Membuat Fan-Out Dengan Efek Bounce Menggunakan Bezier Curve

Apakah Anda tahu bahwa transformasi geometris ditambahkan ke elemen HTML dengan mengubahProperti CSS seperti skala, miring, dan putar dapat dianimasikan? Mereka dapat dianimasikan menggunakan transisi properti dan @keyframe animasi, tetapi yang lebih keren lagi adalah bahwa transformasi animasi dapat ditingkatkan sedikit demi sedikit dengan tambahan sedikit efek bouncing, menggunakan cubic-bezier () fungsi waktu.

Pendeknya, cubic-bezier () (dalam CSS) adalah a fungsi pengaturan waktu untuk transisi. Ini menentukan kecepatan transisi, dan di antara hal-hal lain, dapat juga digunakan untuk itu buat efek memantul dalam animasi.

Dalam postingan ini, pertama kita akan buat animasi transformasi sederhana untuk yang kita nanti tambah sebuah cubic-bezier () fungsi waktu. Di akhir tutorial ini, Anda akan mengerti cara membuat animasi yang digunakan baik efek fan-out dan bouncing. Inilah hasil akhirnya (klik untuk melihat efeknya).

Demo ini terinspirasi oleh tembakan Dribbble yang indah oleh Christopher Jones tentang penanda lokasi animasi.

1. Membuat daun

Bentuk penanda lokasi terdiri dari lima daun (sebut saja). Untuk membuat Bentuk oval daun, mari kita gunakan batas-jari-jari Properti CSS. Itu batas-jari-jari satu sudut adalah terdiri dari dua jari-jari, horisontal dan vertikal, seperti yang ditunjukkan di bawah ini.

Itu batas-jari-jari properti memiliki banyak sintaks yang berbeda. Kami akan menggunakan yang lebih rumit untuk bentuk marker:

 batas-jari-jari: htl htr hbr hbl / vtl vtr vbr vbl; 

Dalam sintaksis ini, jari-jari horisontal dan vertikal dikelompokkan bersama; h & v mewakili jari - jari horisontal & vertikal, dan t, l, b & r mewakili sudut atas, kiri, bawah & kanan. Contohnya, vbl singkatan jari-jari vertikal dari sudut kiri bawah.

Jika kamu memberi hanya satu nilai baik untuk sisi horizontal atau vertikal, nilai itu akan disalin ke semua jari-jari horizontal atau vertikal lainnya oleh browser.

Untuk buat bentuk oval vertikal, pertahankan radius horisontal 50% untuk semua sudut, dan sesuaikan yang vertikal, sampai bentuk yang diinginkan terlihat. Itu sisi horisontal hanya akan menggunakan satu nilai: 50%.

Itu jari-jari vertikal sudut kiri atas dan kanan atas akan 30%, sedangkan sudut kiri bawah dan kanan bawah akan menggunakan 70% nilai.

HTML

CSS

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5; 

2. Mengalikan daun

Karena marker akan menyebar menampilkan lima daun, kami membuat empat lembar lagi daun dalam warna yang berbeda, dan dengan posisi absolut untuk menumpuknya satu sama lain.

HTML

CSS

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. Menangkap Klik Acara & Meningkatkan Estetika

Ayo tambahkan kotak centang dengan #pinStarCenterChkBox pengidentifikasi untuk menangkap acara klik. Ketika kotak centang dicentang, daun akan mengering (berputar). Kami juga perlu menambahkan lingkaran putih dengan #pinStarCenter pengidentifikasi untuk estetika. Ini akan diposisikan di atas marker, dan itu akan menjadi bagian tengah marker lokasi.

HTML

Kami menempatkan kotak centang sebelumnya, dan lingkaran putih sesudahnya, daunnya:

CSS

Pertama, kami menetapkan gaya dasar untuk kotak centang dan lingkaran penutup:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;  

Karena setiap daun akan berputar di sepanjang sumbu z dalam sudut yang berbeda, kita perlu mengatur transform: rotatez (); properti sesuai, untuk buat bentuk bintang. Kami juga menerapkan transisi milik untuk efek rotasi (lebih tepatnya kita menggunakan transisi: mengubah 1s linier aturan untuk daun).

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transisi: transform 1s linear;  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: tipe-n (1) transform: rotatez (325deg);  

Jika Anda melihat CSS di atas, Anda dapat melihat dari kehadiran #pinStarCenterChkBox: dicentang ~ pemilih saudara umum bahwa kita hanya menambahkan transisi dan mengubah properti ketika kotak centang dicentang (ketika pengguna mengklik penanda).

4. Memodifikasi Pusat Rotasi

Secara default, pusat rotasi diposisikan di tengah elemen yang diputar, dalam kasus kami, di tengah daun. Kita perlu memindahkan pusat transformasi ke bagian dalam daun. Kita dapat melakukan ini dengan menggunakan asal-usul Properti CSS itu mengubah posisi elemen yang diubah.

Untuk membuat efek rotasi berfungsi dengan baik, mari kita tambahkan dua aturan berikut ke .pinStarLeaf pemilih di file CSS kami:

 .pinStarLeaf transform-origin: 30px 30px; transisi: mengubah 1s linier;  

Mari kita lihat animasi penggemar kami sedang beraksi - pada saat ini, tanpa efek pantulan. Klik pada lingkaran putih, di atas marker.

Memahami Cara Kerja ubic-Bezier ()

Sekarang, untuk menambahkan efek pentalan, kita perlu mengganti linier fungsi waktu dengan cubic-bezier () dalam transisi deklarasi dalam file CSS kami.

Tapi pertama-tama, mari kita pahami logika di balik cubic-bezier () fungsi waktu sehingga Anda dapat dengan mudah memahami efek pentalan.

Sintaks untuk cubic-bezier () fungsi adalah sebagai berikut, d dan t adalah jarak dan waktu, dan nilainya biasanya berkisar antara 0 dan 1:

kubik-bezier (t1, d1, t2, d2)

Meskipun menjelaskan CSS cubic-bezier () dalam hal jarak dan waktu tidak akurat, jauh lebih mudah untuk memahaminya dengan cara ini.

Asumsikan ada sebuah kotak yang bergerak dari titik A ke B dalam 6 detik. Mari kita gunakan yang berikut ini cubic-bezier () fungsi waktu untuk transisi dengan t1 = 0 dan d1 = 1 nilai-nilai.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) 

Dalam hampir tidak ada waktu, kotak bergerak dari A ke titik tengah, dan mengambil sisa waktu mencapai B.

Mari kita coba transisi yang sama dengan nilai t1 = 1 dan d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) 

Selama tiga detik pertama, kotak itu tidak banyak bergerak, dan kemudian hampir melompat ke titik tengah, dan mulai bergerak dengan mantap ke arah B.

Seperti yang terlihat, d1 mengontrol jarak antara A & titik tengah, dan t1 itu waktu yang dibutuhkan untuk mencapai titik tengah dari A.

Mari kita gunakan d2 dan t2 sekarang. Kedua t1 dan d1 akan menjadi 1, dan t2 = 1 dan d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) 

Kotak bergerak hampir setengah dalam 3 detik (karena t1 = 1, d1 = 1), dan dalam waktu singkat ia melompat ke titik B.

Contoh terakhir menukar nilai sebelumnya dari t2 dan d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) 

Kotak bergerak hampir setengah dalam 3 detik (karena t1 = 1, d1 = 1), maka selama 3 detik lagi tidak banyak bergerak sebelum melompat ke titik B.

Contoh-contoh ini menunjukkan hal itu d2 dan t2 kontrol jarak dan waktu yang dibutuhkan kotak pergi dari titik tengah ke titik B.

Meskipun Anda mungkin tidak membutuhkan penjelasan panjang (belum jarang) ini cubic-bezier () pada titik ini, saya pikir ini akan membantu Anda memahami fungsi ini dengan lebih baik. Sekarang, di mana bouncing datang dalam semua ini?

5. Menambahkan Efek Bouncing dengan Cubic-Bezier ()

Itu parameter kunci untuk efek pantulan adalah jarak, d1 dan d2. SEBUAH d1 Nilai dari kurang dari 1 mengambil kotak itu di belakang titik A sebelum melanjutkan ke B pada awal animasi.

SEBUAH d2 Nilai dari lebih dari 1 mengambil kotak itu melampaui titik B sebelum kembali untuk beristirahat di B di akhir animasi. Karenanya efek bolak-balik memantul.

Sekarang saya akan menambahkan cubic-bezier () nilai langsung ke demo kami di tempat yang sebelumnya linier nilai dari transisi properti, dan biarkan Anda melihat hasilnya.

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transisi: transform 1s cubic-bezier (.8, -. 5, .2,1.4);  

Inilah hasil akhir, animasi fan-out khusus CSS dengan efek pentalan:

Untuk perbandingan dan memahami efek pentalan yang lebih baik, berikut adalah caranya cubic-bezier () nilai animasi berperilaku ketika diterapkan pada kotak contoh kami: