Pembahasan singkat beberapa pemikiran tentang gerak parabola gambar di HTML5

Biasanya objek/gambar bergerak secara parabola atau lebih tepatnya sepanjang kurva Bezier. Ini adalah persyaratan umum dalam pengembangan H5 Jadi bagaimana cara cepat menghitung jalur pergerakan berdasarkan rancangan desain adalah masalah pertama yang dihadapi pengembang menyelesaikan.

Ukuran rancangan desain yang umum digunakan untuk pengembangan H5 di sini adalah 640 * 1008, sehingga ide solusi berdasarkan ukuran ini adalah sebagai berikut:

1. Pertama, ekspor elemen yang akan dipindahkan di PS ke png secara terpisah. Jika rute pergerakan telah direncanakan dalam rancangan desain, Anda juga perlu mengekspor rute sebagai png;

2. Buat file baru di AI dengan ukuran yang sama dengan draft desain, lalu seret elemen perpindahan ke dalam file sebanyak dua kali. Jika ada rute gerak, seret juga ke dalam, seperti gambar di bawah ini:

Yang perlu diperhatikan disini adalah penempatan gambar perpindahan. Titik awal dan titik akhir jalur harus sesuai dengan titik pergerakan gambar.

1. Tidak ada proses deformasi pada kanvas, sehingga titik bergeraknya adalah pojok kiri atas gambar.
2. Di kanvas, gambar telah diterjemahkan dan dipindahkan karena dx dan dy di drawImage(gambar, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ditambahkan berdasarkan x1 dan y1 di terjemahan(x1, y1). offset akhir.
3. Jika elemen diposisikan berdasarkan posisi:absolut dan posisinya dikontrol oleh Translate3d(x, y, z) dalam transformasi, offsetnya harus x, y. Biasanya, dalam transformasi kita dapat meniru margin kiri, atas, dan tambahan untuk mengontrol posisi elemen, tambahkan Translate3D(marginLeftX, marginLeftY, 0) tambahan di transformasi.

3. Pada AI, gunakan tombol ctrl + r untuk menarik garis referensi, dan memindahkan gambar elemen untuk menarik keluar posisi x dan y, seperti terlihat pada gambar di bawah ini:

Kemudian pilih pen tool dan klik pada titik awal dan titik akhir. Jangan lepaskan mouse setelah mengklik titik akhir. Tarik AI secara langsung dan secara otomatis akan menambahkan 2 titik kontrol posisi kedua titik kontrol untuk mengatur pena. Tujuan jalur yang dihasilkan alat adalah sampai sesuai dengan jalur garis acuan pada rancangan desain.

Setelah menyeret ke posisi yang diinginkan, lepaskan mouse dan tekan Enter pada keyboard untuk mengonfirmasi jalur. Jika jalur yang digariskan tidak sesuai dengan yang Anda inginkan, Anda dapat terus menyeret titik kontrol untuk melakukan penyesuaian.

4. Setelah penyesuaian selesai, seret dua garis referensi tambahan ke posisi titik kontrol 1, lalu buka panel informasi melalui bilah menu - jendela - informasi, dan ubah titik awal, titik kontrol, titik akhir, dan tiga titik masing-masing. Keluarkan koordinatnya.

5. Hitung selisih piksel masing-masing titik kendali, titik akhir, dan titik awal, serta hitung koordinat titik kendali sebenarnya dan titik akhir berdasarkan nilai koordinat x, y sebenarnya, dan selisih piksel gambar yang akan dipindahkan ke H5 Lalu gabungkan ketiga koordinat tersebut Klik Apply pada rumusnya.