Animasi CSS3 - Membuat Fan-Out Dengan Kesan Bouncing Menggunakan Curve Bezier
Adakah anda tahu bahawa transformasi geometri ditambah kepada elemen HTML dengan ubahHartanah CSS seperti skala, condong, dan berputar boleh dihidupkan? Mereka boleh animasi menggunakan peralihan harta dan @keyframes animasi, tetapi apa yang lebih sejuk adalah transformasi animasi yang boleh diambil dengan penambahan sedikit kesan melantun, menggunakan kubik-bezier () fungsi masa.
Secara ringkas, kubik-bezier () (dalam CSS) ialah fungsi masa untuk peralihan. Ia menentukan kelajuan peralihan, dan antara lain, ia juga boleh digunakan mewujudkan kesan melantun dalam animasi.
Dalam jawatan ini, pertama kita akan pergi mewujudkan animasi transformasi mudah yang mana kemudiannya tambahkan kubik-bezier () fungsi masa. Pada akhir tutorial ini, anda akan memahami cara membuat animasi yang digunakan kedua-dua peminat dan kesan melantun. Inilah hasil akhir (klik untuk melihat kesan).
Demo ini diilhamkan oleh tembakan Dribbble yang indah ini oleh Christopher Jones tentang penanda lokasi animasi.
1. Membuat daun
Bentuk penanda lokasi terdiri daripada lima (mari kita memanggilnya) daun. Untuk mencipta bentuk bujur dari daun, mari kita gunakan jejari sempadan Harta CSS. The jejari sempadan satu sudut adalah terdiri daripada dua jari, mendatar dan menegak, seperti ditunjukkan di bawah.
The jejari sempadan harta mempunyai banyak sintaks yang berbeza. Kami akan menggunakan yang lebih rumit untuk bentuk penanda:
sempadan-radius: htl htr hbr hbl / vtl vtr vbr vbl;
Dalam sintaks ini, radii mendatar dan menegak dikumpulkan bersama; h & v mewakili radii mendatar & menegak, dan t, l, b & r mewakili bahagian atas, kiri, bawah & kanan. Contohnya, vbl bermaksud jejari menegak di sudut bawah kiri.
Jika anda memberi hanya satu nilai untuk sama ada sisi mendatar atau menegak, nilai itu akan disalin ke semua radii mendatar atau menegak lain oleh penyemak imbas.
Untuk buat bentuk bujur menegak, simpan jari mendatar di 50% untuk semua sudut, dan menyesuaikan yang menegak, sehingga bentuk yang diingini dilihat. The sebelah mendatar akan menggunakan hanya satu nilai: 50%.
The jejari menegak dari sudut atas dan kiri kanan akan menjadi 30%, manakala sudut bawah dan kanan bawah akan menggunakan 70% nilai.
HTML
CSS
.pinStarLeaf lebar: 60px; ketinggian: 120px; jejari sempadan: 50% / 30% 30% 70% 70%; warna latar belakang: # B8F0F5;
2. Mengalikan daun
Oleh kerana penanda akan memaparkan lima daun, kami buat empat lagi daun dalam warna yang berbeza, dan dengan kedudukan mutlak untuk menyusunnya antara satu sama lain.
HTML
CSS
#pinStarWrapper lebar: 300px; ketinggian: 300px; kedudukan: relatif; .pinStarLeaf lebar: 60px; ketinggian: 120px; kedudukan: mutlak; jejari sempadan: 50% / 30% 30% 70% 70%; kiri: 0; betul: 0; atas: 0; bawah: 0; margin: auto; kelegapan: .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
Mari kita tambah kotak semak dengan #pinStarCenterChkBox pengenal untuk menangkap peristiwa klik. Apabila kotak semak ditandai, daun akan keluar (berputar). Kami juga perlu menambah bulatan putih dengan #pinStarCenter pengecam untuk estetika. Ia akan diletakkan di atas penanda, dan ia akan menjadi pusat penanda lokasi.
HTML
Kami meletakkan kotak pilihan sebelum, dan bulatan putih selepas, daun:
CSS
Pertama, kami menetapkan gaya asas untuk kotak semak dan bulatan penutup:
#pinStarCenter, #pinStarCenterChkBox width: 45px; ketinggian: 50px; kedudukan: mutlak; kiri: 0; betul: 0; atas: -60px; bawah: 0; margin: auto; warna latar belakang: #fff; jejari sempadan: 50%; kursor: penunjuk; #pinStarCenter, .pinStarLeaf pointer-events: none; #pinStarCenter> masukkan [jenis = "kotak pilihan"] lebar: 100%; ketinggian: 100%; kursor: penunjuk;
Kerana setiap daun akan berputar sepanjang paksi z dalam sudut yang berbeza, kita perlu menetapkan mengubah: rotatez (); harta sewajarnya, kepada membuat bentuk bintang. Kami juga memohon peralihan harta untuk kesan putaran (lebih tepatnya kita menggunakan peralihan: mengubah 1s linear peraturan untuk daun).
#pinStarCenterChkBox: checked ~ .pinStarLeaf transition: 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: nth-of-type (1) transform: rotatez (325deg);
Jika anda melihat CSS di atas, anda boleh melihat dari kehadirannya #pinStarCenterChkBox: checked ~ pemilih saudara umum yang kita hanya menambah peralihan dan ubah hartanah apabila kotak semak ditandakan (apabila pengguna mengklik penanda).
4. Mengubah Pusat Putaran
Secara lalai, pusat putaran diposisikan di tengah-tengah unsur berputar, dalam kes kita, di tengah daun. Kita perlu memindahkan pusat transformasi ke bahagian akhir daun. Kita boleh melakukan ini dengan menggunakan ubah-asal Harta CSS itu mengubah kedudukan unsur berubah.
Untuk membuat kesan putaran berfungsi dengan betul, mari tambahkan dua peraturan berikut kepada .pinStarLeaf pemilih dalam fail CSS kami:
.pinStarLeaf transform-origin: 30px 30px; peralihan: mengubah 1s linear;
Mari lihat animasi peminat kami dalam tindakan - pada ketika ini, tanpa kesan melantun lagi. Klik pada bulatan putih, di atas penanda.
Memahami Bagaimana ubic-Bezier () berfungsi
Sekarang, untuk menambah kesan lantunan, kita perlu menggantikannya linear fungsi masa dengan kubik-bezier () di dalam peralihan pengisytiharan dalam fail CSS kami.
Tetapi pertama, mari kita fahami logik di belakang kubik-bezier () fungsi masa supaya anda dapat dengan mudah memahami kesan melantun.
Sintaks bagi kubik-bezier () fungsi adalah seperti berikut, d dan t adalah jarak dan masa, dan nilai mereka biasanya berkisar antara 0 dan 1:
kubik-bezier (t1, d1, t2, d2)
Walaupun menjelaskan CSS kubik-bezier () dari segi jarak dan masa tidak tepat, jauh lebih mudah difahami dengan cara ini.
Anggap ada kotak yang bergerak dari titik A ke B dalam masa 6 saat. Mari kita gunakan perkara berikut kubik-bezier () fungsi masa untuk peralihan dengan t1 = 0 dan d1 = 1 nilai-nilai.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0)
Dalam hampir tiada masa, kotak bergerak dari A ke titik tengah, dan mengambil masa yang lain mencapai B.
Mari cuba peralihan yang sama dengan nilai-nilai t1 = 1 dan d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0)
Untuk tiga saat pertama, kotak tidak bergerak banyak, dan kemudian ia hampir melompat ke titik tengah, dan mula bergerak dengan mantap ke arah B.
Seperti yang anda boleh lihat, d1 mengawal jarak antara A & titik pertengahan, dan t1 yang masa yang diambil untuk mencapai titik tengah dari A.
Mari kita gunakan d2 dan t2 sekarang. Kedua-duanya 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 separuh dalam 3 saat (disebabkan oleh t1 = 1, d1 = 1), dan dalam masa yang singkat ia melompat ke titik B.
Contoh terakhir menukar nilai sebelumnya t2 dan d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0)
Kotak bergerak hampir separuh dalam 3 saat (disebabkan oleh t1 = 1, d1 = 1), maka selama 3 saat tidak bergerak jauh sebelum melompat ke titik B.
Contoh-contoh ini menunjukkan bahawa d2 dan t2 mengawal jarak dan masa yang diperlukan kotak itu pergi dari pertengahan ke titik B.
Walaupun anda mungkin tidak memerlukan penerangan panjang (namun jarang) ini kubik-bezier () pada ketika ini, saya fikir ia akan membantu anda memahami fungsi ini dengan lebih baik. Sekarang, di mana lantunan datang dalam semua ini?
5. Menambah Kesan Lantunan dengan Cubic-Bezier ()
The parameter utama untuk kesan melantun adalah jarak, d1 dan d2. A d1 nilai kurang daripada 1 mengambil kotak itu belakang titik A sebelum meneruskan ke arah B pada permulaan animasi.
A d2 nilai lebih daripada 1 mengambil kotak itu di luar titik B sebelum kembali beristirahat di B pada akhir animasi. Oleh itu kesan lantunan dan sebagainya.
Saya kini akan menambah kubik-bezier () nilai langsung ke demo kami di tempat bekas linear nilai peralihan harta, dan biarkan anda melihat hasilnya.
#pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s cubic-bezier (.8, - .5, .2,1.4);
Inilah hasil akhir, animasi peminat CSS-hanya dengan kesan melantun:
Sebagai perbandingan dan untuk memahami kesan melantun lebih baik, inilah caranya kubik-bezier () nilai animasi berkelakuan apabila diterapkan pada kotak contoh kami:
