Walaupun bunyi di web tidak dialu -alukan secara universal, terdapat kes -kes apabila ia dapat memperkayakan pengalaman pengguna tanpa gangguan yang tidak perlu. Contohnya adalah laman web artis dan permainan atau kandungan untuk kanak -kanak. Bunyi juga boleh berguna dalam kes -kes tertentu kepada pelawat kurang upaya.
Bahagian yang paling penting dalam proses animasi bunyi adalah menyesuaikan animasi CSS anda ke audio untuk mencapai pengalaman audio-visual yang tepat. Dalam artikel ini, saya akan melalui langkah -langkah penyegerakan kekunci utama animasi ke data masa audio menggunakan contoh yang menarik dari jantung yang bergaya.
Lihat animasi pena CSS dengan bunyi: Heartbeat oleh SitePoint (@SitePoint) pada codepen.
Membina jantung
Dalam kes ini, teknik yang paling mudah adalah menggunakan dua segi empat menegak yang dibulatkan di atas, diputar, dan diposisikan untuk bertindih untuk membentuk bentuk jantung. Saiz mereka ditetapkan menggunakan peratusan dan mereka benar -benar diposisikan dengan sedikit pertimbangan geometri sehingga mudah untuk skala bentuk asal dengan mengubah saiz kontena. Rectangles diputar 45 darjah mengikut arah jam dan berlawanan arah jam untuk membentuk bahagian kiri dan kanan jantung.
<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>
<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>Titik asal transformasi harus dikira berkaitan dengan sistem koordinat sebelum sebarang transformasi digunakan (kerana transformasi dapat mempengaruhi sistem koordinat, contohnya, fungsi berputar () berputar sistem koordinat bersama-sama dengan elemen yang digunakan ke). Sekali lagi nisbah panjang sisi menentukan kedudukan titik itu: mudah untuk melihat bahawa kedudukan x berada pada 50%, di tengah segi empat tepat, tetapi kedudukan y dikira pada 68.75% ketinggian segi empat diukur dari atas (55*100%/80 = 68.75%). Melangkah dengan pendekatan simetri tertentu juga dibayar di sini juga, kerana kedua-dua segi empat tepat berkongsi kedudukan titik asal transformasi yang sama.
<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>transform-origin: 50% 68.75% 0;
</span><span>}</span>
<span><span>.heart::before</span> {
</span> <span>box-shadow: -8px -14px 10px 0 black inset;
</span><span>}
</span>
<span><span>.heart::after</span> {
</span> <span>box-shadow: -15px 10px 14px 0 black inset;
</span><span>}</span>
<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>
Suara kami adalah bunyi degupan jantung yang diulang empat kali dan ia akan berfungsi sebagai bunyi animasi CSS kami akan diikuti.
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>Menganalisis isyarat audio dengan Audacity
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
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.
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:
Atas ialah kandungan terperinci Menyelaraskan animasi CSS dengan audio html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Mengapa telefon saya terus dimulakan semula?
Bagaimana untuk menggunakan fungsi panjang dalam Matlab
Apakah kaedah penukaran data dalam golang?
Bagaimana untuk menjalankan python dalam vscode
Bagaimana untuk menghentikan setInterval
Beberapa cara untuk menangkap data
ps nombor siri cs5
js rentetan kepada tatasusunan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
