Kandungan
- 01. Tukar gambar menjadi poligon
- 02. Tampal SVG anda ke dalam HTML
- 03. Ekstrak koordinat poligon
- 04. Kemas kini susunan poligon
- 05. Menganimasikan poligon
Dalam tutorial ini kita akan membuat rangkaian gambar dari segitiga SVG, dan mengatur peralihan animasi dari satu gambar ke gambar yang lain ketika diklik. Ia akan kelihatan seperti laman web Faces of Power. Animasi ini benar-benar dapat menambahkan minat pada laman web, terutama halaman arahan, dan juga meningkatkan pengalaman pengguna. Sekiranya anda mempunyai laman web yang kompleks untuk dijaga, anda memerlukan perkhidmatan hosting web yang super. membina sesuatu yang kurang rumit? Pembina laman web mungkin menjalankan tugas.
Untuk memulai kita akan mulai dengan dua tatasusunan: satu dengan nilai yang kita animasikan, dan satu dengan nilai yang kita animasikan. Setiap kali pautan diklik, kita akan mencari SVG yang sesuai dengan href pautan itu dan dapatkan mata atribut setiap poligon dalam SVG khusus itu.
Kami akan mengekstrak semua koordinat di mata atribut, dapatkan warna isian poligon dan kemudian tambahkan ini sebagai sifat objek. Kemudian kita akan menambahkan semua objek ini ke salah satu daripada dua tatasusunan: the ke susunan.
Kami akan menggunakan TweenMax untuk menghidupkan nilai-nilai dari tatasusila dengan nilai-nilai ke susunan. Apabila animasi selesai, kami akan menetapkannya ke untuk menjadi yang baru dari susunan.
Pada jangka pertama, the dari susunan akan mengandungi semua nilai titik dan semua warna isian poligon yang sedang dilihat.
a href = "# nat"> Nat / a> a href = "# bwl"> bwl / a> a href = "# kevin"> kevin / a> svg> poligon untuk #nat pergi ke sini / svg> svg id = "nat"> poligon untuk #nat pergi ke sini / svg> svg id = "bwl"> poligon untuk #bwl pergi ke sini / svg> svg id = "kevin"> poligon untuk #kevin pergi ke sini / svg>
01. Tukar gambar menjadi poligon
Langkah pertama adalah membuat gambar. Untuk ini saya menggunakan alat yang dipanggil Primitive (lihat repo GitHub). Gambar yang digunakan dalam tutorial adalah gambar peribadi beberapa rakan.
Jalankan gambar yang anda pilih melalui utiliti Primitive menggunakan baris arahan:
primitif -i input.webp -o output.svg -n 250 -m 1
-n 250 menentukan 250 poligon, -m 1 menentukan bentuk segitiga, dan -i input.webp -o output.svg adalah input dan output. Adalah penting bahawa semua SVG mempunyai bilangan poligon yang sama dan bentuknya sama. Keluaran.svg akan menjadi kumpulan poligon.
02. Tampal SVG anda ke dalam HTML
Setelah membuat SVG, tampalkannya ke badan HTML. Gandakan SVG pertama dan berikan salah satu kelas pendua .svg-pemegang.
The .svg-pemegang akan menjadi satu-satunya yang dapat dilihat secara teknikal; ia akan menjadi pemegang bagi semua poligon yang dianimasikan ke dalam dan di luarnya. Berikan semua kelas SVG kecuali pemegang kelas tersembunyi dan sebuah ID dengan nama yang unik. Ini harus sesuai dengan href di pautan. SVG yang tersembunyi akan disembunyikan dengan paparan: tiada;. Penting untuk memastikannya href setiap pautan sepadan dengan ID SVG masing-masing.
Kemudian nyatakan pemboleh ubah:
biarkan kePolygonArray = []; biarkan dariPolygonArray = [];
03. Ekstrak koordinat poligon
Sekarang kita harus melalui setiap poligon kita dan mendapatkan koordinat dalam atribut poin. Kita boleh melakukannya dengan menggunakan regex:
const getCoordinates = (poligon) => {return polygon.getAttribute ("points"). match (/ (-? [0-9] [0-9 .] *), (-? [0-9] [ 0-9 .] *) (-? [0-9] [0-9 .] *), (-? [0-9] [0-9 .] *) (- ? [0-9] [0-9 .] *), (-? [0-9] [0-9 .] *) /);};
04. Kemas kini susunan poligon
Setiap kali pautan diklik, kita akan menjalankan fungsi yang menjadikan href dari pautan yang diklik sebagai argumen dan mencari SVG yang sesuai, mendapatkan nilai poin, menghidupkannya, dan mengemas kini array dari.
const updatePolygonArrays = (idToAnimateTo) => {toPolygonArray = createPolygonPointsObject (document.getElementById (idToAnimateTo) .querySelectorAll ("polygon")); animatePolygons (); dariPolgon ()
Fungsi ini memanggil dua fungsi lain - buatPolygonPointsObject dan animasiPoligon.
buatPolygonPointsObject menukar semua unsur poligon menjadi objek yang dapat kita menjiwai nilai, dan animasiPoligon menghidupkan poligon di dalamnya .svg-pemegang.
const createPolygonPointsObject = (poligon) => {const polygonsArray = []; polygons.forEach ((polygon, i) => {const coordinat = getCoordinates (polygon); polygonsArray.push ({fill: polygon.getAttribute ("isi"), satu: koordinat [1], dua: koordinat [2] tiga: koordinat [3], empat: koordinat [4], lima: koordinat [5], enam: koordinat [6]});}); pulangkan poligonArray;}
Ini menggunakan kami getCoordinates berfungsi untuk mendapatkan semua koordinat dalam atribut poin dan mencipta objek dengan setiap koordinat dan isi. Ia mengembalikan pelbagai objek. Saya memutuskan untuk menjadikannya objek kerana jenis data itu nampaknya lebih senang digunakan ketika anda menghidupkan banyak nilai sekaligus.
05. Menganimasikan poligon
Mari gunakan TweenMax untuk menghidupkan poligon.
const animatePolygons = () => {const polygons = document.querySelector (". svg-holder"). querySelectorAll ("poligon"); fromPolygonArray = createPolygonPointsObject (poligon); fromPolygonArray.forEach ((obj, i) => {TweenMax.to (obj, 1, {one: toPolygonArray [i] .one, two: toPolygonArray [i] .two, three: toPolygonArray [i]. tiga, empat: toPolygonArray [i] .four, lima: toPolygonArray [i] .five, six: toPolygonArray [i] .six, easy: Power3.easeOut, onUpdate: () => {poligon [i] .setAttribute ("titik", " $ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six} ");}});});}
Pada setiap bingkai animasi, gelung ini menghidupkan atribut titik dari poligon yang sedang dilihat di .svg-pemegang kepada nilai baru yang ditetapkan di atas. The diKemas kini kaedah dalam TweenMax.to dipanggil setiap kali animasi dikemas kini, jadi di sini ia akan dijalankan pada setiap perubahan nilai obj.satu, obj.two, obj.tiga, dan sebagainya. Dengan cara ini, nilai titik beranimasi dan bentuknya mempunyai koordinat yang berbeza.
Seterusnya kita dapat menghidupkan pengisiannya. Untuk setiap poligon di .svg-pemegang, tetapkan isian ke isian di kePolygonArray yang berada dalam indeks yang sama.
polygons.forEach ((polygon, i) => {const toColor = toPolygonArray [i] .fill; TweenLite.to (poligon, 1, {isi: toColor, kemudahan: Power3.easeOut});});
Kini poligon akan menghidupkan koordinat dan warna isiannya seperti yang diharapkan. Dan anda sudah selesai! Ingin menyimpan halaman anda? Eksportnya sebagai PDF dan masukkan ke dalam storan awan.
Untuk meningkatkan lagi kemahiran reka bentuk laman web anda, teruskan ke persidangan kami. Jana dan alami jadual penceramah, bengkel dan peluang rangkaian bernilai industri yang penuh sesak. Jangan ketinggalan!Dapatkan tiket Jana anda sekarang.
