Bagaimana menerapkan efek animasi flip cermin gambar elemen pada kanvas

Anda dapat mengklik di sini: demo animasi flip cermin horizontal gambar kanvas

Efek animasi mengklik gambar di halaman demo terlihat.

Relatif mudah untuk mencapai efek membalik elemen dalam CSS. Misalnya, jika kita ingin gambar tertentu dibalik secara horizontal, kita hanya memerlukan satu baris CSS:

 img { transformasi: skalaX(-1);}

atau:

 img { transformasi: skala(-1, 1);}

Tapi di kanvas, sedikit lebih merepotkan. Masalahnya bukan tidak bisa dibalik, tapi posisi sistem koordinatnya.

Di Canvas, kode berikut dapat mencapai pembalikan sumber daya secara horizontal (dengan asumsi konteks adalah konteks 2d Canvas):

 konteks.skala(-1, 1);

Atau gunakan setTransform API untuk transformasi matriks langsung:

 konteks.setTransform(-1, 0, 0, 1, 0, 0);

Namun, meskipun flipping diterapkan, ada masalah besar dengan penempatan elemen di Canvas. Hal ini karena sistem transformasi koordinat Canvas berbeda dengan CSS. Oleh karena itu, jika kita ingin mendapatkan efek flip terpusat, kita perlu memindahkan titik tengah elemen target ke sumbu transformasi sebelum membalik.

Ambil jarak flip horizontal, terjemahkan offset horizontal setelah transformasi perpindahan sebelum skala, dan kemudian Anda dapat melihat efek dari selalu memusatkan flip.

Bahasanya pucat, jadi mari kita ambil gambar untuk mengilustrasikannya.

Sistem koordinat perubahan default kanvas adalah sudut kiri atas.

Jadi, jika skala mendatarnya 1, 0,5, 0, -0,5, -1, maka posisi akhirnya seperti gambar di bawah ini:

Sehingga kita bisa mendapatkan rumus jarak horizontal yang harus diimbangi:

distance = (canvas.width – image.width * scale) / 2;

Oleh karena itu, kode kunci untuk mirroring dan menggambar gambar akhirnya menjadi seperti ini (dengan asumsi ukuran skala horizontal adalah skala):

 //Penyesuaian referensi koordinat konteks.translate((kanvas.lebar - gambar.lebar * skala) / 2, 0);context.scale(skala, 1);context.drawImage(gambar, 0, 0);//Referensi koordinat Pulihkan konteks.setTransform(1, 0, 0, 1, 0, 0);

Bagaimana cara menambahkan efek animasi?

Kita bisa menggunakan Tween.js, https://github.com/zhangxinxu/tween

Ada berbagai algoritma pelonggaran di dalamnya. Dengan bantuan metode Math.animation() yang mudah digunakan, kita dapat dengan mudah mencapai efek yang kita inginkan!

 Math.animation(bentuk, ke, durasi, pelonggaran, panggilan balik);

Animasi JS-nya adalah sebagai berikut:

 var kanvas = document.querySelector('canvas');var konteks = kanvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', fungsi (nilai, isEnding ) { // Hapus konteks konten kanvas.clearRect(0, 0, canvas.width, canvas.height); Sesuaikan koordinat konteks.translate((kanvas.lebar - kanvas.lebar * nilai) / 2, 0); //Sesuaikan penskalaan konteks.skala(nilai, 1); 0, 0); //Konteks pemulihan referensi koordinat.setTransform(1, 0, 0, 1, 0, 0);});

Artikel dingin lainnya. Pengguna kanvas front-end tidak banyak, dan audiensnya terbatas. Namun, seperti kata pepatah lama, tidak ada perbuatan baik yang terlalu kecil untuk diabaikan. Saya berharap beberapa teman dapat memberikan bantuan ketika mereka mencari masalah terkait di kemudian hari.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.