<span><span><span><audio</span> id<span>="heartbeat"</span> src<span>="heartbeat.mp3"</span> preload<span>="auto"</span>></span>
</span>  Your browser does not support the <span><span><span><code</span>></span>audio<span><span></code</span>></span> element.
</span><span><span><span></audio</span>></span></span>

flex otot

Untuk membuat tanda jantung kita, kita perlu mengubah bentuknya dari hati yang asli, berehat, ke negeri ketika otot ditekuk. Untuk melenturkan hati kita skala sedikit dan mengubah bentuknya dengan radius sempadan.

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>background-color: red;
</span>  <span>content: "";
</span>  <span>height: 80%;
</span>  <span>left: 25%;
</span>  <span>position: absolute;
</span>  <span>top: 2%;
</span>  <span>transform: translateZ(0) rotate(-45deg);
</span>  <span>width: 50%;    
</span><span>}
</span>
<span><span>.heart::after</span> {
</span>  <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>

Buka isyarat audio anda dalam keberanian dan ia secara automatik akan menunjukkan kepada anda bentuk gelombang bunyi. Dalam kebanyakan kes ini akan cukup untuk anda mengenali di mana bahagian -bahagian tertentu dari permulaan dan akhir audio, dengan melihat bentuk isyarat. Jarang sekali kita mendapat isyarat di mana beberapa mod paparan spektrogram lain membantu lebih baik, tetapi dalam hal ini kita dapat beralih antara mod yang berbeza melalui menu lungsur di sebelah spektrogram.

Mengklik pada spektrogram menandakan seketika pada garis masa, dan di bawahnya anda boleh membaca dalam beberapa saat berapa kali ia sepadan. Inilah cara kita mengetahui apabila setiap degupan jantung bermula, berakhir, dan apabila jantung berada dalam keadaan yang ditekuk. Kami menggunakan butang Play untuk memainkan keseluruhan audio atau memilih segmen, dan perhatikan masa yang kita perlukan untuk kerangka kunci animasi.

Dalam kes denyutan jantung kami, kami mempunyai 4 degupan jantung yang berbeza dan mudah untuk mengenalinya dengan melihat bentuk gelombang. Kita perlu ambil perhatian setiap degupan jantung, apabila ia bermula, berakhir, dan apabila ia berada di dalam keadaan flexed. Untuk menjadikan ini lebih mudah, kami menggunakan aplikasi spreadsheet di mana kami perhatikan degupan jantung dan masa mereka dalam beberapa saat.

menterjemahkan masa audio ke dalam masa kerangka utama

Sebaik sahaja kita mempunyai masa dalam beberapa saat, kita menggunakan beberapa matematik untuk menormalkan panjang audio ke notasi panjang 100% yang kita gunakan dalam animasi (berlipat ganda dengan 100 dan dibahagikan dengan jumlah masa audio). Ini adalah bagaimana kita mendapat peratusan kerangka utama serta gaya apa yang harus digunakan untuk kerangka utama tertentu, sama ada jantung harus santai atau ditekuk.

Membaca dari jadual ini kita boleh membuat peratusan utama dan mengisi mereka dengan gaya yang berkaitan dengan masing -masing. Di samping skala hati dan radius sempadan kita juga menukar warna jantung untuk menekankan animasi sedikit lebih. Oleh kerana kita menggunakan Transform untuk skala segi empat tepat jantung, dan setiap segi empat tepat juga mempunyai nilai berputar yang berbeza, kita perlu membuat dua animasi yang berbeza, satu untuk setiap segi empat tepat.

Berikut adalah kod @KeyFrames untuk segi empat tepat kiri (animasi segi empat tepat kanan hanya berbeza dengan nilai orientasi putaran dan kedudukan radius sempadan):

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>background-color: red;
</span>  <span>content: "";
</span>  <span>height: 80%;
</span>  <span>left: 25%;
</span>  <span>position: absolute;
</span>  <span>top: 2%;
</span>  <span>transform: translateZ(0) rotate(-45deg);
</span>  <span>width: 50%;    
</span><span>}
</span>
<span><span>.heart::after</span> {
</span>  <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>

Akhirnya kami memberikan animasi yang sepadan dengan segi empat tepat. Kami menetapkan panjang animasi kepada panjang audio jantung, tetapkannya untuk bermain sekali sahaja, dengan fungsi masa linear, dan tanpa kelewatan. Menggunakan fungsi masa selain linear akan merosakkan penyegerakan antara animasi dan audio, jadi sentiasa ingat untuk menggunakan fungsi masa linear apabila menyegerakkan ke sumber luaran.

<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span>  <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>

Animasi ditugaskan ke kelas khas yang kami tambahkan ke elemen jantung dengan JavaScript, pada acara yang sama kami mencetuskan permainan audio. Inilah cara kami memastikan animasi dan audio bermula pada masa yang sama dan semua kerja penyegerakan dibayar.

Dan itu sahaja untuk animasi jantung, yang dapat anda lihat dalam demo di bawah.

Lihat animasi pena CSS dengan bunyi: Heartbeat oleh SitePoint (@SitePoint) pada codepen.

lebih banyak animasi bunyi CSS!

lapar untuk lebih banyak barang CSS yang dapat anda dengar serta memerhatikan? Berikut adalah beberapa contoh lagi yang boleh anda ambil dan belajar dari:

Lihat Pen 5A20EF9D5C68ABC42320AC73639F0E39 oleh SITEPOINT (@SitePoint) pada CODEPEN.

Lihat animasi CSS CSS Pen Cuckoo dengan bunyi oleh SitePoint (@SitePoint) pada Codepen.

lihat pen qobqro oleh sitepoint (@sitePoint) pada codepen.

di bawah adalah senarai sumber untuk sumber media yang digunakan dalam artikel ini:

• bunyi degupan jantung (domain awam)
• isyarat persimpangan kereta api (domain awam)
• bunyi jam cuckoo (domain awam)
• imej jam randik (domain awam)
• Masa habis oleh Iwan Gabovitch di bawah lesen CC-BY 3.0

Pemikiran Akhir

Saya harap artikel ini memberi inspirasi kepada anda untuk mempertimbangkan menggunakan bunyi dalam projek anda di mana sesuai dan menggalakkan anda untuk menghasilkan cara imajinatif untuk menggabungkan visual dengan audio.

bagaimana dengan anda? Adakah anda pernah menggunakan bunyi dengan animasi anda sebelum ini? Adakah terdapat animasi CSS yang anda suka lihat? Beritahu kami semua tentang komen!