, Anda dapat menggunakan , pastikan Anda menyetelnya sebagai display: block; .

Kami sudah lama berjanji untuk membuat video tentang animasi elemen SVG di halaman, tapi entah kenapa tidak pernah berhasil. Hari ini kami akhirnya dengan senang hati mempersembahkan kepada Anda video pertama dalam seri ini, di mana kami akan memberi tahu Anda tentang opsi animasi SVG: menggunakan CSS, SMIL, dan JavaScript (menggunakan Snap.svg sebagai contoh).

Faktanya, dengan video ini rasanya seperti Mistral. Tidak ada keadaan untuk merekam. Nah, sekarang akhirnya berhasil.

Animasi SVG

Mari kita coba sekali lagi menyatukan semuanya dengan tautan. Ada tiga cara untuk menganimasikan elemen SVG pada halaman, dua di antaranya juga berlaku untuk elemen HTML. Tentu saja saya berbicara tentang animasi CSS dan JavaScript. Namun untuk SVG juga bisa menggunakan animasi SMIL (Synchronized Multimedia Integration Language).

Animasi SMIL

Ini adalah teknologi yang sangat keren jika kita perlu menganimasikan jalur dan sekaligus menyimpan semuanya dalam satu file SVG. Ya, animasi CSS juga dapat disertakan dalam file, tetapi tidak dapat digunakan untuk menganimasikan atribut jalur d, jadi SMIL ternyata merupakan teknologi yang jauh lebih menarik. Sebenarnya JavaScript juga bisa dimasukkan langsung ke dalam file SVG, namun dukungan browsernya sedikit berbeda, jadi Anda perlu memikirkan apa dan bagaimana cara menggunakannya.

SMIL telah didukung di semua browser sejak dahulu kala (sejak versi sebelumnya), kecuali Penjelajah Internet, yang hingga saat ini tidak mendukung animasi tersebut.

Animasi CSS

Semuanya sangat jelas di sini, kami sudah lama terbiasa menggunakan CSS untuk animasi kecil elemen HTML. Hal yang sama dapat dilakukan dengan SVG: sebagian besar atribut dapat dianimasikan dan dukungan browser jauh lebih baik. Ya, karena setidaknya Internet Exporer 10 belajar tentang fenomena seperti Animasi CSS.

Animasi JavaScript

Solusi yang paling dapat diandalkan dan nyaman, seperti biasa, adalah JavaScript, tidak ada jalan keluar dari hal ini. Saat bekerja dengan antarmuka, ini adalah satu-satunya pilihan untuk membuat skrip sesuatu. Untungnya, sudah ada cukup banyak perpustakaan untuk bekerja dengan SVG.

Beberapa bahkan menyertakan kemampuan animasi, seperti Snap.svg. Saya akan merekomendasikan perpustakaan ini kepada semua orang, meskipun banyak yang terbiasa bekerja dengan Velocity.js, pendekatan ini juga berhak untuk ada.

5 Januari 2014 pukul 16:27

Menganimasikan elemen jalur SVG

• Pengembangan situs web,
• Visualisasi data

• tutorial

Saya rasa banyak yang telah melihat ulasannya konsol permainan generasi baru dari Poligon (Media Vox). Di sinilah konsol digambar dengan gaya cetak biru:

Ulasannya terlihat keren, sangat tidak biasa dan baru. Anda dapat mengetahui di bawah ini bagaimana fitur utama ulasan diimplementasikan - animasi SVG, bagaimana melakukan hal serupa sendiri, dan kemampuan "rahasia" apa lagi yang disembunyikan SVG lama dalam hal animasi elemen jalur.

Interpolasi stroke-dasharray, teori

Secara umum teknik animasi garis seperti itu bukanlah hal baru, hanya saja sampai saat ini SVG dan segala sesuatu yang berhubungan dengannya, menurut saya, secara tidak adil dilupakan, namun untungnya situasinya berubah. Jadi, trik untuk menganimasikan elemen path dimungkinkan berkat properti stroke-dasharray dari elemen path. Properti ini memungkinkan Anda mengatur parameter garis putus-putus, yaitu panjang pukulan dan jarak antar pukulan. Jika kita mengatur panjang guratan sama dengan seluruh panjang garis, kita mendapatkan garis biasa garis padat. Jika kita mengatur panjang guratan sama dengan nol, dan panjang celah kembali sama dengan seluruh panjang garis, maka kita mendapatkan garis tak kasat mata. Dan secara bertahap meningkatkan panjang pukulan dengan panjang celah, sama dengan panjangnya seluruh garis, kita dapat mensimulasikan gambarnya. Dengan pendekatan ini, pengundian akan dilakukan dari awal garis. Jika Anda tiba-tiba perlu menggambar dari akhir, maka Anda perlu menggunakan properti lain: stroke-dashoffset . Properti ini menentukan offset untuk pukulan pertama. Jadi, dengan mengurangi offset dan menambah panjang goresan, kita mendapatkan gambar dari ujung garis.

Orang-orang dari Media Vox mereka menggunakan opsi hybrid (yang menurut saya mubazir), omong-omong, Anda dapat (dan harus) membaca tentang bagaimana mereka melakukan ini di blog mereka: Desain fitur Polygon: Animasi SVG untuk kesenangan dan keuntungan.

Implementasi animasi SVG

DI DALAM Media Vox mereka menyarankan penggunaan requestAnimationFrame untuk animasi yang halus, tetapi kami memiliki tujuan yang sedikit berbeda, jadi kami akan mengambil rute yang lebih sederhana, menggunakan perpustakaan D3.js dan animasi berbasis durasi yang diterapkan di dalamnya.

Berikut adalah kode kerja sebenarnya yang digunakan untuk menganimasikan konsol dari awal artikel.

Antrian() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(siap); function ready(error, xml) ( //Menambahkan file svg kita ke dokumen HTML var importNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var path = svg.selectAll("path") .call(transisi) ; transisi fungsi(jalur) ( path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() ( d3.select(this).call(transisi) ; )); // loop tak terbatas ) fungsi tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolasi goresan -dasharray attr fungsi pengembalian(t) ( kembalikan i(t); ) )

Mari kita mulai dengan hanya bergerak sepanjang garis, tanpa memutar terlebih dahulu.

Antrian() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(siap); function ready(error, xml) ( //Menambahkan file svg kita ke dokumen HTML var importNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var path = svg.select("path#wiggle"), startPoint = pathStartPoint(path); var marker = svg.append("lingkaran"); .attr("transform", "translate(" + startPoint + ")"); //Dapatkan titik awal jalur untuk menempatkan fungsi penanda pathStartPoint(path) ( var d = path.attr( "d"), dsplitted = d.split(" "); kembalikan dsplitted.split("," ) fungsi transisi() ( marker.transition() .duration(7500) .attrTween("transform", TranslateAlong( path.node())) .each("end", transisi);// loop tak terbatas ) fungsi TranslateAlong(jalur) ( var l = path.getTotalLength(); return function(i) ( return function(t) ( var p = path.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")";//Pindahkan penanda ) ) )
Di sini pathStartPoint(path) menarik koordinat awal garis dari atribut elemen path. Di TranslateAlong(path), koordinat penanda kita diatur menggunakan interpolator. Contohnya bisa dilihat di sini: Animasi penanda sepanjang elemen jalur SVG dengan D3.js. Anda juga dapat menggabungkan animasi gambar garis dan pergerakan penanda; tampilannya mungkin seperti ini: Animasi penanda sepanjang elemen jalur SVG dengan D3.js II .

Mari kita memperumit tugas, menambahkan rotasi (yah, ubah penanda dari lingkaran menjadi sesuatu yang lebih menarik). Sebagai penanda kita akan memiliki roket dengan lebar 48 dan panjang 24. Karena titik jangkar default penanda adalah sudut kiri atas, kita perlu mengimbanginya agar tepat di tengah penanda. Hal ini juga perlu diperhitungkan saat melakukan rotasi, karena secara default ini juga terjadi di sekitar kiri sudut atas. Tampaknya kami sudah menyelesaikan perpindahan tersebut. Sekarang mari kita langsung ke rotasi, disinilah definisi garis singgung akan membantu kita, kita akan menentukan sudut menggunakan arctangen.

Fungsi TranslateAlong(path) yang mendefinisikan interpolator akan terlihat seperti ini:

Fungsi TranslateAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) ( return function(t) ( var p0 = path.getPointAtLength(t0 * l);//poin sebelumnya var p = path.getPointAtLength(t * l);////titik saat ini var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle untuk tangen t0 = t ; //Menggeser pusat ke pusat roket var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12 "+")"; ) ) )
Implementasinya dapat dilihat di sini.

DI DALAM desain web modern Kita pasti menyadari popularitas animasi yang menggunakan CSS dan SVG. Memang benar, animasi elemen website sedang mengalami kelahiran kembali saat ini. banyak efek yang digunakan menjadi lebih berguna bagi pengguna dan terlihat lebih tepat dalam hal kegunaan sumber daya web dan UX. Teknologi telah membuatnya lebih mudah tugas yang kompleks Menganimasikan grafik dan elemen tanpa mengorbankan kinerja situs web (seperti halnya Flash). Selain itu, tidak memerlukan kerumitan apa pun, dan bahkan dengan animasi halaman yang ringan, Anda dapat mencapai hasil yang mengesankan dan membuat situs lebih mengesankan.

Animasi selalu menempati tempat khusus dalam kreativitas desain dan menarik perhatian pengembang pemula dan profesional. Sekarang individualitas dan keunikan efek khusus sedang tren, sekarang saatnya untuk memperhatikan kemampuan modern CSS dan juga SVG. Dengan peningkatan resolusi layar di semua jenis perangkat, minat untuk menskalakan elemen web tanpa kehilangan kualitas dapat dimengerti. Hal yang paling menarik tentang kreativitas web modern adalah gayanya efek animasi Sangat mungkin untuk membuatnya sendiri.

Pilihan animasi SVG/CSS yang indah dan modern menjelaskan secara singkat poin-poin utama implementasi. Untuk contoh yang jelas dan inspirasi: situs yang menggunakan efek ini.

01. Gelembung pop-up

Contoh aplikasi di situs: 7UP
Kode lengkap di CodePen

Animasi gelembung CSS di 7UP luar biasa. Proses animasi terdiri dari beberapa bagian: rendering SVG, kemudian menganimasikan setiap gelembung dalam dua tahap.

Animasi pertama mengubah transparansi dan memunculkan gelembung ke bagian atas area pandang, sedangkan animasi kedua menambahkan getaran realistis. Pelepasan dan pergerakan terjadi secara kacau dengan penundaan dan durasi yang bervariasi. Menggunakan SVG, dua lapisan dibuat - untuk gelembung besar dan kecil.

... ...

Metode animasi terpisah dalam SVG ini memerlukan animasi elemen demi elemen. Elemen SVG dapat digunakan mirip dengan DIV dalam HTML; kita perlu membungkus setiap gelembung dalam tag pengelompokan.

CSS memberi fitur-fitur canggih untuk animasi, kodenya yang sangat sederhana menciptakan efek yang kompleks. Untuk gelembung yang bergerak ke atas layar, kami mengubah transparansi hingga hilang sepenuhnya.

@keyframe naik( 0% ( opacity : 0; ) 10%, 90% ( opacity : 1; ) 100% ( opacity : 0; transform : TranslateY (-1024px) ; ) )

Untuk membuat goyangan, Anda hanya perlu menambahkan gerakan ke kiri dan kanan - cukup untuk melihat efeknya, tapi tidak lebih.

@keyframes goyah( 33% ( transformasi : TranslateX (-50px) ; ) 66% ( Transformasi : TranslateX (50px) ; ) )

Menganimasikan gelembung akan memerlukan penggunaan grup yang digunakan sebelumnya dan tipe n untuk identifikasi kelompok terpisah. Demi akselerasi perangkat keras, kita akan menggunakan nilai transparansi dan properti will-change.

.bubbles-large > g ( opacity : 0; akan berubah : transform, opacity; ) ( ...) ... .gelembung-kecil g: tipe ke-n (10) { ...}

Untuk mengatur waktu dan penundaan animasi akan dibatasi lebih baik berpasangan detik dan ulangi tanpa henti. Selain itu, kami menggunakan fungsi pengaturan waktu ease-in-out untuk mendekatkan tampilan ke natural.

.gelembung-besar g: tipe ke-n (1)(animasi: naik 6,5 detik tanpa batas;) .bubbles-large g:nth-of-type(1) lingkaran(animasi: goyangan 3 detik dengan kemudahan masuk yang tak terbatas;) ... lingkaran gelembung-kecil g:nth-of-type(9).(animasi: goyangan 3s 275ms kemudahan masuk-keluar yang tak terbatas;) .gelembung-kecil g: tipe ke-n (10)(animasi: hingga 6 detik 900 ms tanpa batas;)

02. Ikon bergulir

Contoh penerapan di website: Pelatihan Baltik
Kode di CodePen

Pengunjung perlu diperlihatkan bahwa ada konten di bawah ini. Kami menerapkan undangan untuk menggulir dengan animasi ringan ikon mouse. Meskipun hal ini dapat diselesaikan dengan elemen HTML, kami menggunakan konstruksi SVG yang paling sesuai. Buat persegi panjang dengan sudut membulat dan elemen melingkar yang akan kita animasikan. Keunggulan SVG adalah skalabilitasnya.

Gaya diterapkan pada ikon SVG yang dibuat untuk menentukan ukuran dan penempatannya dalam wadah. Kami mengikat tautan dan menempatkan ikon di bagian bawah layar.

Mari kita mulai menganimasikan ikonnya. Kami menetapkan awal pergerakan: dari 0 hingga 20 persen. Untuk intervalnya, 20% diterapkan dengan pengulangan tanpa akhir.

@keyframes gulir( 0%, 20% ( transformasi : terjemahkanY (0) skalaY (1) ; ) )

Tambahkan transparansi di sepanjang vertikal Y, gunakan 100% pada titik akhir gerakan animasi untuk menghilangkan lingkaran.

@keyframes gulir( ... 10% ( opacity : 1; ) 100% ( transform : TranslateY (36px) scaleY (2); opacity : 0.01; ) )

Terakhir, kami menerapkan animasi dengan kode yang cukup jelas. Fungsi timing kubik-bezier digunakan untuk mengembalikan lingkaran ke atas.

.scroll ( nama animasi : gulir; durasi animasi : 1,5 detik; fungsi waktu animasi : kubik-bezier (0,650, -0,550, 0,250, 1,500) ; jumlah iterasi animasi : tak terbatas; asal transformasi : 50% 20.5px; akan berubah: transformasi;

03. Prasasti yang muncul secara bertahap

Dengan pramuat animasi, Toy Fight mendemonstrasikannya, menerapkan efek huruf tulisan tangan yang muncul secara bertahap. Mari kita lihat penerapan efeknya menggunakan SVG. Ada dua opsi: menganimasikan keterangan dan menggunakan teks SVG. Setiap metode memiliki kelebihan dan kekurangannya masing-masing.

Animasi keyframe dibuat menggunakan stroke-dashoffset , stroke-dasharray . Kami mendapatkan efek tulisan tangan. Di sini kita beralih ke Sass/SCSS dan tipe nth.

Masking ( transformasi: skala(0); asal transformasi: 50% 50%; akan berubah: transformasi; )

Sekali lagi, bahasa SVG digunakan untuk membuat bentuk, pola, dan topeng. Setelah selesai, kami menggunakan CSS dan menyiapkan semuanya untuk animasi.

@keyframes scale ( 0%, 50% ( opacity: 1; ) 80% ( opacity: 0; ) 100% ( transform: scale(1.4); opacity: 0; ) ) Terakhir kita perlu menerapkan animasi ke mask; .masking ( ... animasi: skala 4s linier tak terbatas; )

05. Burung terbang

Contoh penerapan di website: Père et Fils
Pilihan dengan seekor burung dan sekawanan burung

Kita akan mulai dengan pendekatan vektor sepenuhnya, menggambar setiap bentuk untuk animasi kita, menggambar berbagai fase penerbangan burung. Ini akan membantu memanipulasi penempatan vektor dan garis dengan garis luar. Hasilnya, formulir-formulir tersebut ditempatkan dalam kotak-kotak dengan ukuran yang sesuai, satu demi satu. Ekspor file sebagai SVG.

Kode HTMLnya sangat sederhana. Yang perlu Anda lakukan hanyalah membungkus setiap burung dalam sebuah wadah, memungkinkan beberapa animasi - satu untuk membuat burung terbang, dan satu lagi untuk membuatnya terbang melintasi layar.

Kami menggunakan SVG kami sebagai latar belakang div burung dan memilih ukuran bentuk. Kami menggunakan lebar untuk menghitung secara kasar posisi di latar belakang. Kami menambah lebarnya sepuluh kali lipat, lalu menyesuaikan jumlahnya agar pas.

Burung ( gambar latar: url("bird.svg"); ukuran latar belakang: otomatis 100%; lebar: 88 piksel; tinggi: 125 piksel; akan berubah: posisi latar belakang; ) @keyframes siklus terbang ( 100% ( latar belakang -posisi: -900 piksel 0; ) )

Untuk animasi - beberapa trik CSS yang mungkin asing bagi Anda. Fungsi pengaturan waktu animasi digunakan untuk tampilan langkah demi langkah - mirip dengan bagaimana halaman dengan gambar dibalik di buku catatan untuk "menghidupkannya kembali".

Nama animasi: siklus terbang; fungsi pengaturan waktu animasi: langkah(10); jumlah-iterasi-animasi: tak terbatas; durasi animasi: 1 detik; penundaan animasi: -0,5 detik;

Kini setelah siklus terbang tercipta, burung mengepakkan sayapnya, namun tetap di tempatnya. Bergerak di sekitar layar ditentukan oleh animasi keyframe lainnya. Burung bergerak secara horizontal melintasi layar, berubah-ubah tinggi vertikal dalam kisaran tertentu (untuk realisme yang lebih besar).

Animasi ikon hamburger sering ditemukan di situs web modern: garis bersilangan/berbalik, atau ikon berubah bentuk. Sampai saat ini, efeknya dicapai dengan bantuan bantuan HTML elemen, tetapi format SVG lebih cocok untuk tugas ini. Tidak perlu lagi membebani kode Anda dengan banyak rentang.

Berkat ciri ciri animasi, kode untuk SVG tidak banyak berubah - tekniknya sama. Pertama, Anda perlu menggunakan empat elemen: span untuk div, atau jalur untuk SVG. Saat menggunakan span, pemosisian di dalam div diselesaikan menggunakan CSS (dalam SVG masalah ini telah diselesaikan).

Kami menempatkan garis 2 dan 3 di tengah - satu di atas yang lain, dan garis 1 dan 4 - di atas dan di bawah. Ada dua properti yang digunakan di sini: opacity dan rotasi. Pertama-tama, kita perlu menghilangkan baris 1 dan 4 - untuk ini kita akan menggunakan selector:nth-child .

Menu-icon.is-active (tipe-elemen):nth-child(1), .menu-icon.is-active (tipe-elemen):nth-child(4) ( opacity: 0; )

Tetap memutar garis ke arah satu sama lain sebesar 45 derajat.

Menu-icon.is-active (tipe-elemen):nth-child(2) ( transform:rotate(45deg); ) .menu-icon.is-active (elemen-type):nth-child(3) ( transform : memutar (-45 derajat)

07. Unduh prapemuat

Ikon pramuat terdiri dari empat lingkaran yang warnanya bergantian.

Di CSS, lingkaran diterapkan gaya dasar, lalu gunakan:pemilih jenis ke-n untuk arti yang berbeda stroke-dasharray setiap lingkaran. Dengan 'ease-in-out' animasi preload akan terlihat lebih menyenangkan.

Lingkaran: tipe ke-n (1) ( guratan-dasharray: 550; ) lingkaran: tipe ke-n (2) ( guratan-dasharray: 500; ) lingkaran: tipe ke-n (3) ( guratan-dasharray : 450;) lingkaran: tipe ke-n (4) ( garis-dasharray: 300; )

Sekarang kita membutuhkan animasi keyframe. Caranya sederhana: Anda hanya perlu memutar lingkaran 360 derajat. Terapkan animasi ke 50% dan kembalikan lingkaran ke posisi semula.

@keyframes prapemuat ( 50% ( transformasi: putar(360deg); ) )

Yang tersisa hanyalah menjalankan animasi yang dibuat dengan parameter yang diperlukan. Kami memberinya nama, mengatur durasi, jumlah iterasi dan menerapkan fungsi pengaturan waktu.

Nama animasi: preloader; durasi animasi: 3 detik; jumlah-iterasi-animasi: tak terbatas; fungsi pengaturan waktu animasi: kemudahan masuk;

Preloader melingkar berfungsi, tetapi bagian-bagiannya berputar pada saat yang bersamaan. Mari kita perbaiki ini dengan menambahkan penundaan, gunakan Sass untuk loopnya.

@untuk $i dari 1 hingga 4 ( &:nth-of-type(#($i)) ( penundaan animasi: #($i * 0.15)s; ) )

Berkat penundaan ini, lingkaran-lingkaran itu berputar satu demi satu, saling mengejar. Satu-satunya masalah adalah pada awalnya, ketika halaman dimuat, bagian-bagian pemuat mulai bergerak secara serempak. Untuk mengkompensasi hal ini tanpa menyebabkan penundaan waktu yang tidak diinginkan di awal, kita cukup mengatur nilai penundaan ke nilai negatif.

Penundaan animasi: -#($i * 0.15)s;