Gunakan dan gunakan semula segala -galanya dalam SVG ... walaupun animasi!

Jika anda sudah biasa dengan animasi SVG dan CSS dan mula bekerja dengan mereka, berikut adalah beberapa idea yang mungkin anda ingin ingat sebelum melompat ke dalam pekerjaan. Artikel ini akan mempelajari bagaimana untuk membina dan mengoptimumkan kod anda dengan elemen, pembolehubah CSS dan animasi CSS.

Bahagian 1: Elemen SVG

Jika anda seorang pemaju yang suka menyimpan kod anda kering atau peminat besar pembolehubah SASS/CSS, ada peluang yang baik bahawa anda akan menyukai tag ini.

Katakan anda mempunyai elemen yang diulangi berkali -kali dalam grafik anda. Daripada mempunyai bahagian kompleks kod anda yang diulangi berkali -kali dalam SVG anda, anda boleh menentukan bahagian ini sekali dan kemudian mengklonkannya di tempat lain dalam dokumen anda dengan elemen . Ini bukan sahaja akan mengurangkan sejumlah besar kod, tetapi juga akan menjadikan markup anda lebih mudah dan mudah dimanipulasi.

Untuk mula melaksanakan elemen , pergi ke SVG anda dan ikuti langkah -langkah ini:

1. Kenal pasti bahagian kod yang anda mahu klon
2. Tambahkan ID ke bahagian itu
3. Pautkannya di dalam tag anda seperti ini:

Itu sahaja! Klon baru anda sudah siap, kini anda boleh menukar atributnya (contohnya kedudukan X dan Y) agar sesuai dengan keperluan anda.

Mari kita menyelam ke dalam contoh yang sangat mudah

Saya ingin berkongsi kes sebenar ini di mana saya perlu menghidupkan kiub besar yang diperbuat daripada unit kiub kecil. (Bayangkan kiub Rubik klasik.)

Kami akan mulakan dengan melukis unit kiub dalam SVG menggunakan bentuk asas dan mengubah:

 <svg viewbox=" -130 -20 300 100">
  <g>
    <rect width="21" ketinggian="24" transform="skewy (30)"></rect>
    <rect width="21" ketinggian="24" transform="Skewy (-30) Terjemahan (21 24.3)"></rect>
    <rect width="21" height="21" transform="Skala (1.41, .81) Putar (45) Terjemahan (0 -21)"></rect>
  </g>
</svg>

Perhatikan bahawa bentuk dikumpulkan dalam elemen supaya kita dapat menambah ID ke seluruh angka.

Seterusnya, mari kita bina pengklonan kiub yang lebih besar unit ini. Pertama, kita perlu membungkus kiub dari contoh sebelumnya di dalam tag di dalam SVG. Dalam elemen kita boleh meletakkan apa sahaja yang kita mahu gunakan semula, yang boleh menjadi satu bentuk, satu kumpulan, kecerunan .. hampir mana -mana elemen SVG. Mereka tidak akan menjadikan mana -mana melainkan jika kita menggunakannya di luar tag ini.

Kemudian kita boleh menghubungkan unit seberapa banyak yang kita mahu menggunakan IDnya dan menukar kedudukan X dan Y pada setiap klon seperti ini:

 <gunakan xlink: href="#cube" x="142" y="124"></gunakan>
<gunakan xlink: href="#cube" x="100" y="124"></gunakan>

Sekarang kita perlu meletakkan setiap kiub mengingati bahawa elemen terakhir akan muncul di bahagian depan, selepas itu kita akan mempunyai kiub besar pertama kita siap!

XLink: HREF ditutup sejak SVG2, tetapi lebih baik menggunakannya untuk tujuan keserasian. Dalam pelayar moden, anda hanya boleh menggunakan HREF tetapi saya mengujinya di Safari dan pada masa penulisan tidak berfungsi di sana. Jika anda menggunakan xlink: href pastikan anda memasukkan ruang nama ini dalam tag SVG anda: xmlns: xlink = "http://www.w3.org/1999/xlink" (anda tidak perlu jika anda memutuskan untuk menggunakan HREF).

Bahagian 2: Menggunakan pembolehubah CSS untuk menggunakan gaya yang berbeza untuk grafik yang digunakan semula

Saya memilih warna utama untuk kiub, yang lebih ringan dan naungan yang lebih gelap untuk sisi dan warna strok. Tetapi bagaimana jika kita mahu membuat kiub kedua warna yang berbeza?

Kita boleh menggantikan pengisian dan strok dengan pembolehubah CSS untuk menjadikan atribut ini lebih fleksibel. Dengan cara itu, kami akan dapat menggunakan semula unit kiub yang sama dengan palet lain (bukannya menentukan unit kedua dengan warna yang berbeza untuk kiub kedua).

Mengapa tidak menambah kelas ke kiub baru dan menukar warna isi dengan CSS? Kami akan berbuat demikian, tetapi pertama, cuba periksa elemen . Anda akan perasan ia menjadikan dalam bayang -bayang dom. Yang bermaksud ia tidak terdedah kepada skrip dan gaya, seperti unsur -unsur dalam DOM biasa. Apa sahaja nilai yang anda tentukan dalam angka di dalam akan diwarisi oleh semua contohnya dan anda tidak akan dapat menulis semula mereka dengan CSS. Tetapi jika anda menggantikan nilai -nilai tersebut dengan pembolehubah, maka anda dapat mengawalnya dalam CSS.

Dalam unit kiub kami, kami akan melalui setiap sisi dan menggantikan nilai mengisi dan strok dengan nama pembolehubah semantik.

Sebagai contoh, ini:

 <rect fill="#00affa" stroke="#0079AD"></rect>

... boleh digantikan dengan ini:

 <rect fill="var (-mainColor)" stroke="var (-strokecolor)"></rect>

Dari sini, kita mesti menduplikasi SVG untuk membina kiub kedua. Walau bagaimanapun, kita tidak perlu menduplikasi jika kita menyimpan kedua -duanya dalam dokumen yang sama. Kami boleh menambah kelas kepada setiap SVG dan mengawal palet warna melalui CSS, mentakrifkan semula nilai pembolehubah.

Mari buat palet untuk kiub biru dan satu lagi untuk kiub merah jambu:

 .blue-cube {
  -Maincolor: #009CDE;
  --strokecolor: #0079AD;
  --lightColor: #00affa;
  -DarkColor: #008BC7;
}

.pink-cube {
  -Maincolor: #DE0063;
  --StrokeColor: #AD004E;
  --lightColor: #FA0070;
  -DarkColor: #C7005A;
}

Dengan cara ini, kita boleh menambah seberapa banyak kiub yang kita mahu dan menukar semua warna dari satu tempat.

Bahagian 3: Menggunakan semula animasi

Idea untuk contoh ini adalah untuk memecahkan kiub pada hover - sesuatu seperti pandangan yang meletup sehingga beberapa keping akan bergerak dari pusat apabila kita meletakkan kursor di atas kiub.

Mari kita mulakan dengan menentukan dua pergerakan, satu untuk setiap paksi: bergerak Y dan bergerak X. Dengan membahagikan animasi dalam pergerakan, kita akan dapat menggunakannya semula dalam setiap kiub. Animasi akan terdiri daripada menggerakkan kiub dari kedudukan awalnya hingga 30px atau 50px dalam satu arah. Kita boleh menggunakan transform translate (x atau y) untuk mencapai itu. Contohnya:

 @keyframes Movex {
  ke {transform: translateX (-35px); }
}

Tetapi jika kita mahu dapat menggunakan semula animasi ini, lebih baik menggantikan nilai angka dengan pembolehubah, seperti ini:

 @keyframes Movex {
  kepada {transform: translateX (var (-diterjemahkan, 35px)); }
}

Jika pembolehubah tidak ditakrifkan, nilai lalai akan menjadi 35px.

Sekarang kita memerlukan sekurang -kurangnya satu kelas untuk mengikat animasi. Walau bagaimanapun, dalam kes ini, kita memerlukan dua kelas untuk memindahkan kiub dalam paksi-x: .m-kiri dan .m-kanan.

 .m-kiri, .m-kanan { 
  Animasi: 2S Movex Alternate Infinite; 
}

Bagi kiub untuk bergerak ke kiri, kita memerlukan nilai negatif, tetapi kita juga boleh mengisytiharkan nombor yang berbeza. Kita boleh menentukan pemboleh ubah kita seperti ini di dalam kelas .m-kiri:

 .m -left {--translate: -50px; }

Apa yang berlaku di sini ialah kita menyatakan bahawa, apabila kita menambah kelas .m-kiri ke satu elemen, ini akan memainkan Animation Movex (yang ditakrifkan dalam @Keyframes) yang akan bertahan dua saat untuk diterjemahkan dalam paksi x dan mencapai kedudukan baru iaitu -50px tersisa. Kemudian, animasi menggantikan arahan supaya ia bergerak dari kedudukan terakhir dan mengambil dua saat lagi untuk pergi ke keadaan asalnya. Dan sebagainya, kerana ia adalah gelung tak terhingga.

Kita boleh mengisytiharkan pembolehubah lain ke kelas .m-kanan tetapi jika kita tidak, ingatlah bahawa ia akan mengambil 35px yang kita nyatakan pada mulanya.

Nilai animasi-play-play lalai berjalan tetapi mungkin kita tidak mahu kiub bergerak sepanjang masa. Ia akan menjadi sangat mengganggu dan menjengkelkan untuk digunakan di tapak dengan beberapa kandungan berdekatan. Oleh itu, mari kita cuba memainkan animasi hanya pada hover dengan menambahkan ini:

 svg: hover .m-left {
  Animasi: 2S Movex Alternate Infinite;
}

Anda boleh mencubanya sendiri dan akan mendapati bahawa animasi melompat dengan cepat ke keadaan awal setiap kali kita meletakkan kursor keluar dari kiub. Untuk mengelakkannya, kita boleh menambah nilai yang dijeda pada akhir animasi secara langsung:

 .m-left {
  Animasi: 2S Movex Alternate Infinite Jeda;
}

Sekarang animasi dijeda tetapi akan berjalan di hover dengan menambahkan garis CSS ini:

 svg: hover * { 
  Animasi-Play-State: Running; 
}

Kita boleh memohon setiap kelas untuk elemen yang berbeza dalam SVG. Dalam kiub biru pertama, kita bergerak kiub tunggal; Pada yang kedua, kami menggunakan kelas tersebut kepada kumpulan kiub.

Satu perkara terakhir ...

Tidak sampai kemudian saya menyedari bahawa saya dapat menggunakan semula satu unit untuk membina mereka semua. Saya bekerja di kubus kecil untuk menjadikannya cukup isometrik supaya ia dapat diselaraskan dengan mudah dengan yang lain di sebelahnya. Pada ketika ini, unit saya adalah , tetapi saya memutuskan untuk menggantikannya dengan bentuk SVG untuk mengurangkan kod dan mendapatkan markup bersih.

Saya belajar bahawa lebih baik mengambil sedikit masa untuk menganalisis apa yang boleh dilakukan dengan SVG sebelum melukis setiap bentuk dan berurusan dengan jumlah kod yang besar. Ia mungkin mengambil lebih banyak masa pada mulanya, tetapi akan menjimatkan banyak masa dan usaha dalam jangka masa panjang.

Atas ialah kandungan terperinci Gunakan dan gunakan semula segala -galanya dalam SVG ... walaupun animasi!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!