Menyelaraskan animasi CSS dengan audio html5

Takeaways Key

CSS dan HTML boleh digabungkan untuk menambah kesan bunyi ke animasi CSS menggunakan elemen HTML. Ini boleh dicetuskan dengan JavaScript dan dapat meningkatkan pengalaman pengguna dalam kes -kes tertentu, seperti laman web artis dan permainan atau kandungan untuk kanak -kanak.
Bahagian yang paling penting dalam proses animasi bunyi adalah menyesuaikan animasi CSS ke audio untuk memastikan pengalaman audio-visual yang tepat. Ini melibatkan penyegerakan kerangka utama animasi kepada data masa audio.
Elemen digunakan untuk memperkenalkan audio ke dalam halaman. JavaScript digunakan untuk memanipulasi main balik. Dalam contoh ini, butang digunakan untuk memulakan dan menetapkan semula trek.
Proses penyegerakan animasi CSS dengan audio HTML5 umumnya sama di pelayar yang berbeza. Walau bagaimanapun, tidak semua pelayar menyokong semua format audio HTML5. Oleh itu, pelbagai sumber untuk fail audio harus disediakan untuk memastikan keserasian dengan pelayar yang berbeza.
Penggunaan animasi CSS dengan aliran audio langsung mungkin, tetapi lebih kompleks daripada dengan fail audio pra-rakaman. API Audio Web diperlukan untuk menganalisis aliran audio dalam masa nyata dan menyesuaikan animasi CSS dengan sewajarnya.

CSS dan HTML telah membuka medan bermain yang kaya untuk menambah kandungan multimedia ke laman web anda, aplikasi web, dan projek e-book anda. Satu cara yang inovatif untuk menggabungkan kedua -dua teknologi ini adalah menambah kesan bunyi ke animasi CSS anda menggunakan unsur -unsur dan mencetuskannya dengan sedikit JavaScript.

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

ramuan pertama yang kita perlukan adalah hati yang kita mahu bernyawa. Kami akan membina satu menggunakan elemen pseudo CSS. Memandangkan ia dibina dalam HTML dan bukannya menggunakan imej, walaupun hanya melalui unsur-unsur pseudo, memberi kita peluang untuk menghidupkan pelbagai sifat CSS untuk mewujudkan animasi yang lebih menarik.

kita sering dapat mencari lebih daripada satu cara untuk membina bentuk dengan cara ini, tetapi jika kita merancang untuk menghidupkannya, ia patut difikirkan tentang geometri dan bagaimana pilihan struktur yang berbeza mempengaruhi pergerakan dan memudahkan kod frames.

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>

sisi bulat ditetapkan dengan dua nilai radii untuk mendapatkan lengkung elips dan bukannya bulat, dan oleh itu bentuk jantung yang lebih semula jadi. Kerana panjang sisi segi empat tepat mempunyai nisbah 5/8, radius ellipsis mengira hingga 50%/37.5% untuk melengkapkan hanya sudut yang tidak bertindih.

<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>

Sekarang apa yang tersisa adalah untuk menyesuaikan titik asal transformasi untuk segi empat tepat sehingga titik-titiknya di tengah-tengah kawasan persegi di mana segi empat tepat melakukan pertindihan. Penampilan yang sama dapat dicapai dengan menyesuaikan pengisytiharan kedudukan mutlak dan bukannya menggunakan pendekatan transformasi-asal. Tetapi itu kemudiannya akan merumitkan kod Keyframes kerana ia akan memaksa kita untuk mengawal kedudukan dengan lebih terperinci dan bukannya bergantung pada fungsi skala transformasi untuk melakukan kerja untuk kita.

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>

Dan sekarang kita mempunyai bentuk jantung simetri yang indah. Kami boleh menambah bayang-bayang kotak inset, berbeza untuk setiap segi empat tepat, untuk menjadikannya semua plump dan 3D.

<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>

bunyi hati

Untuk memperkenalkan audio ke dalam halaman, kami menggunakan elemen dengan laluan ke fail audio dan tanpa atribut kawalan kerana kami tidak mahu pemain audio penyemak imbas dalaman muncul (baca lebih lanjut dalam menggunakan audio html5 dan Video di MDN).

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

Daripada kawalan, kami menggunakan JavaScript untuk memanipulasi main balik. Contoh ini menggunakan butang untuk memulakan dan menetapkan semula trek, tetapi dengan sedikit lebih banyak kerja yang dapat kita lakukan tanpa butang dan mulakan dan menetapkan semula audio apabila elemen jantung diklik atau berlegar.

Suara kami adalah bunyi degupan jantung yang diulang empat kali dan ia akan berfungsi sebagai bunyi animasi CSS kami akan diikuti.

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.

inilah cara gaya flexed akan membaca jika kita memerlukannya statik, di luar animasi:

<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>

Peralihan di antara negeri -negeri berehat dan flexed dan kemudian kembali ke bentuk berehat asal membuat satu denyutan jantung. Peratusan kerangka utama kami secara berkesan mengisytiharkan, bergilir -gilir, gaya berehat dan flexed. Tetapi untuk menjadikannya disegerakkan dengan audio yang kita perlu tahu berapa lama animasi harus dimainkan dan peratusan utama yang digunakan untuk keadaan jantung yang mana. Beberapa perisian audio yang berguna dapat membantu kami menganalisis bunyi dan perhatikan maklumat masa yang kami perlukan untuk kerangka utama kami.

Menganalisis isyarat audio dengan Audacity

Audacity® adalah perisian cross-platform sumber terbuka untuk rakaman dan pengeditan bunyi. Ia mudah digunakan dan walaupun anda tidak mempunyai pengalaman dengan perisian pengeditan audio atau video yang sama, ia tidak akan mengambil banyak usaha untuk mendapatkan maklumat yang anda perlukan.

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!

Soalan Lazim (Soalan Lazim) Mengenai Penyegerakan Animasi CSS dengan Audio HTML5

Bagaimana saya boleh menyegerakkan animasi CSS dengan audio HTML5 dalam pelayar yang berbeza? Walau bagaimanapun, penting untuk diperhatikan bahawa tidak semua pelayar menyokong semua format audio HTML5. Sebagai contoh, MP3 disokong oleh semua pelayar, tetapi OGG tidak disokong oleh Internet Explorer. Oleh itu, adalah dinasihatkan untuk menyediakan pelbagai sumber untuk fail audio anda untuk memastikan keserasian dengan penyemak imbas yang berbeza. aliran audio. Walau bagaimanapun, prosesnya sedikit lebih kompleks daripada dengan fail audio pra-rakaman. Anda perlu menggunakan API Audio Web untuk menganalisis aliran audio secara real-time dan menyesuaikan animasi CSS anda dengan sewajarnya. Terdapat beberapa sebab mengapa animasi CSS anda tidak menyegerakkan dengan audio HTML5 anda. Satu isu biasa ialah animasi dan tempoh audio tidak sepadan. Pastikan tempoh animasi CSS anda sepadan dengan panjang fail audio anda. Juga, pastikan fail audio anda dimuatkan dengan betul dan bermain sebelum memulakan animasi. Kelajuan animasi CSS anda berdasarkan kadar main balik audio dengan menggunakan harta 'Playbackrate' dari elemen audio HTML5. Dengan menyesuaikan harta ini, anda boleh membuat audio bermain lebih cepat atau lebih perlahan, dan animasi CSS anda akan menyesuaikan kelajuannya dengan sewajarnya. , Anda boleh menyegerakkan animasi CSS dengan audio HTML5 pada peranti mudah alih. Walau bagaimanapun, perlu diingat bahawa pelayar mudah alih mempunyai beberapa batasan dan perbezaan berbanding dengan pelayar desktop. Sebagai contoh, sesetengah penyemak imbas mudah alih tidak membenarkan audio bermain auto, jadi anda mungkin perlu menambah butang main untuk fail audio anda.

Untuk membuat animasi CSS anda lebih responsif terhadap perubahan audio, anda boleh menggunakan API Audio Web. API ini membolehkan anda menganalisis data audio dalam masa nyata dan menyesuaikan animasi CSS anda berdasarkan keadaan semasa audio. Ya, anda boleh menggunakan animasi CSS dengan audio HTML5 di laman WordPress. Anda boleh menambah animasi CSS dan audio HTML5 dalam bahagian CSS dan HTML tersuai tema WordPress anda, atau anda boleh menggunakan plugin yang membolehkan anda menambah CSS dan HTML tersuai.

Bagaimana saya boleh menguji penyegerakan animasi CSS saya dengan audio HTML5?

Anda boleh menguji penyegerakan animasi CSS anda dengan audio HTML5 dengan menggunakan alat pemaju dalam penyemak imbas anda. Alat ini membolehkan anda memeriksa HTML, CSS, dan JavaScript halaman anda, dan anda boleh menggunakannya untuk memeriksa sama ada animasi dan audio anda bermain seperti yang diharapkan. Tapak e-dagang?

Ya, anda boleh menyegerakkan animasi CSS dengan audio HTML5 di tapak e-dagang. Ini boleh menjadi cara terbaik untuk meningkatkan pengalaman pengguna di laman web anda. Sebagai contoh, anda boleh menggunakan animasi dan audio CSS untuk menyerlahkan tawaran istimewa atau produk baru. Animasi CSS anda diselaraskan dengan audio HTML5, anda boleh mengoptimumkan fail CSS dan audio anda. Sebagai contoh, anda boleh meminimumkan CSS anda dan memampatkan fail audio anda untuk mengurangkan saiz dan masa pemuatannya. Juga, pertimbangkan untuk menggunakan sifat CSS yang dipercepatkan perkakasan untuk animasi anda, kerana ia dapat meningkatkan prestasi rendering.

Atas ialah kandungan terperinci Menyelaraskan animasi CSS dengan audio html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!