Lapan mata pengetahuan tentang kemahiran animasi_javascript js motion

Hari ini saya hanya belajar animasi gerakan js, merakam pengalaman saya dan berkongsi dengan semua orang.

Berikut adalah hasil yang saya susun.

Titik pengetahuan 1: Animasi kelajuan.

1. Langkah pertama ialah melaksanakan animasi gerakan laju dan merangkum fungsi Pengetahuan yang digunakan ialah setInterval(function(){

Salin kod Kod adalah seperti berikut:

　　oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).

Mengenai sebab offsetLeft digunakan di sini, saya secara khusus mencarinya dan maklumat berguna yang saya dapat ialah:

Persamaan antara a.offsetLeft dan left ialah ia mewakili kedudukan kiri nod anak berbanding nod induk.
b. Tetapi kiri boleh dibaca dan ditulis, manakala offsetLeft ialah baca sahaja; c. Dan offsetLeft tidak mempunyai unit, dan tiada px di belakangnya apabila mendapatkan kedudukan nod anak.

Berikut adalah beberapa ilmu tambahan, terima kasih kepada blogger ini,

http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.

2. Hentikan nod bergerak Di sini kita menggunakan pernyataan if untuk melakukan pengesahan Jika offsetLeft==0, clearInterval (pemasa), pemasa di sini harus dimulakan = batal terlebih dahulu, dan kemudian menetapkan animasi gerakan sebelumnya. kepadanya.

3. Terdapat masalah di sini Jika pergerakan dicetuskan semula sebelum tamat pergerakan, kelajuan pergerakan akan terkumpul di sini, selagi clearInterval (pemasa) digunakan sebelum keseluruhan pergerakan bermula. ia akan baik-baik saja.

4. Tetapkan kesan pergerakan masuk dan penyingkiran, dan tetapkan parameter untuk pergerakan Satu ialah kelajuan, dan satu lagi ialah kedudukan sasaran iTarget Kami mendapati bahawa kelajuan juga boleh dinilai oleh kedudukan ITarget. jadi hanya satu parameter diperlukan.

Titik pengetahuan 2: Kecerunan ketelusan

1. Sebenarnya hampir sama macam dulu cuma nilai ITarget adalah transparency dan prosesnya masih nak clear timer kemudian buka timer untuk judge dsb.

2. Tentukan parameter alpha = ketelusan Ambil perhatian bahawa pemasa harus ditulis seperti ini:

Salin kod Kod adalah seperti berikut:

​alfa =kelajuan；
oDiv.style.filter='alpha(opacity:' alpha ')'; //Ini adalah kaedah yang sangat penting, sila ambil perhatian bahawa ia ditulis seperti ini
oDiv.style.opacity=alpha/100; //Berhati-hati untuk tidak lupa membahagi dengan 100

　3. Di atas adalah semua gaya sebaris.

Ilmu Pengetahuan 3: Pergerakan Menampan

1. Gerakan menampan bermaksud semakin besar jarak, semakin besar kelajuan, dan semakin kecil jarak, semakin kecil kelajuan, iaitu kelajuan berkaitan dengan jarak.

2. Menurut pernyataan di atas, takrifkan semula kelajuan adalah 0 pada mulanya, tetapi sekarang:

Salin kod Kod adalah seperti berikut:

var speed=iTarget-oDiv.offsetLeft;

Takrif semula pemasa:

Salin kod Kod adalah seperti berikut:

oDiv.style.left=oDiv.offsetKelajuan kiri 'px';

Pada ketika ini kami mendapati bahawa kelajuan terlalu tinggi, kami boleh melakukan ini:

Salin kod Kod adalah seperti berikut:

var speed=(iTarget-oDiv.offsetLeft)/10;

3. Akan ada masalah yang serius pada masa ini Kerana unit minimum skrin ialah px, akan ada iTarget yang nilai terakhirnya ialah perpuluhan dan bukan sasaran diperkenalkan di sini floor(), yang membulatkan ke bawah, dan Math.ceil(), yang membulatkan ke atas. Selepas menentukan kelajuan kami menulis seperti ini:

Salin kod Kod adalah seperti berikut:

kelajuan=kelajuan>0?Math.ceil(speed):Math.floor(speed);

Dengan cara ini, ia dijamin sepenuhnya bahawa kelajuan adalah semua integer dan semuanya 0 pada nilai kritikal.

Titik pengetahuan 4: Pergerakan pelbagai objek　

1. Mula-mula dapatkan semua objek dan bentuk tatasusunan, dan kemudian gunakan gelung for untuk melakukannya (betapa klasik kaedah ini!), tambah peristiwa nod dalam gelung for, dan gunakan ini untuk menggantikan nod semasa dalam fungsi , cth: startMove(ini, iTarget), apabila mentakrifkan fungsi startMove(obj, iTarget).

2. Apabila mengambil lebar semasa offsetWidth, anda mesti menggunakan nilai obj.

3. Apabila tetikus bergerak dengan sangat pantas, lebar nod tidak boleh dipulihkan kepada keadaan asalnya Ini kerana pemasa adalah pemasa biasa untuk semua orang Nod seterusnya telah mengosongkan pemasa sebelum nod sebelumnya kembali kepada keadaan asalnya. Oleh itu, kita harus memberi perhatian kepada fakta bahawa sesuatu akan berlaku kepada pemasa yang dikongsi.

4. Dalam pergerakan transparency, alpha menggantikan kelajuan, tetapi walaupun pemasa tidak dikongsi, masalah akan timbul dalam pergerakan beberapa objek Ini kerana alpha dikongsi, menyebabkan setiap objek terkoyak antara satu sama lain. Penyelesaiannya adalah dengan menggunakannya seperti Berikan alfa kepada setiap nod dalam gelung untuk seperti pemasa.

Ringkasan: Untuk menyelesaikan konflik, sama ada memulakan atau memperibadikan.

Titik pengetahuan 5. Dapatkan gaya

1. Dalam pemasa yang menukar lebar nod (besar untuk bergerak masuk, kecil untuk mengalih keluar), jika anda menambah sempadan pada nod, ia akan menjadi lebih kecil daripada nod sasaran apabila bergerak masuk, dan lebih besar daripada nod sasaran apabila bergerak keluar. Perhatikan sempadan bar skrol padding (bar skrol) lebar, jadi sebabnya ialah setiap offset akan meningkatkan sempadan*2- (nilai menurun setiap kali dalam pemasa).

　2. Cara untuk menyelesaikan masalah di atas adalah dengan menulis lebar dalam baris dan menggunakan parseInt(oDiv.style.width) dan bukannya offsetLeft Walau bagaimanapun, ia tidak boleh selalu ditulis dalam baris, jadi kami mentakrifkan fungsi untuk mendapatkannya gaya pautan:

Salin kod Kod adalah seperti berikut:

fungsi getStyle(obj,attr){
　　jika(obj.currentStyle){
kembalikan obj.currentStyle[attr]; //iaitu pelayar
　　}
　　lain{
kembalikan getComputerStyle(obj,false)[attr]; //Pelayar lain
　　}
}

3. Untuk saiz fon, hanya ada satu cara untuk menulis Saiz fon dalam js.

Titik pengetahuan 6: Sebarang nilai atribut

1. Semua jenis offset akan mempunyai pepijat kecil Anda perlu menggunakan fungsi getStyle Fungsi ini sering digunakan bersama parseInt() dan biasanya disimpan dalam pembolehubah.

2. Apabila menulis style.width, anda juga boleh menulis style['width'].

3. Untuk melaraskan nilai atribut berbilang objek, anda boleh merangkum gaya sebagai parameter, supaya fungsi atribut berbilang objek merangkumi tiga nilai atribut (obj, attr, iTarget).

4. Kerangka gerakan di atas tidak sesuai untuk perubahan ketelusan, kerana ketelusan ialah perpuluhan, atas dua sebab, yang pertama ialah parseInt, yang kedua ialah attr=...px, di sini kita boleh menggunakan tafsiran Use if untuk memproses ketelusan secara berasingan, gantikan parseInt dengan parseFloat, dan alih keluar px.

5. Komputer itu sendiri mempunyai pepijat 0.07*100 tidak sama dengan 7, jadi kami memperkenalkan fungsi yang dipanggil Math.round(), iaitu nilai bulat.

Titik pengetahuan 7: Gerakan rantai

　1. Perkenalkan rangka kerja move.js.

2. Hantarkan fungsi panggil balik fn(), gunakan if untuk menilai, jika ada fn(), kemudian laksanakan fn().

Titik pengetahuan 8: Pergerakan serentak

1. Jika anda menulis dua fungsi gerakan untuk mengawal gerakan serentak, liputan fungsi akan berlaku.

　2. Gunakan titik pengetahuan json Gelung json menggunakan untuk (i dalam json), dan parameter fungsi gerakan ialah obj, json, fn.

3. Tiada nilai iTarget lagi, ia digantikan dengan json[attr].

Semasa saya menulis ini, saya harap anda semua menyukainya. Saya juga berharap ia akan membantu semua orang untuk mempelajari animasi gerakan js.