rekod_jquery pembelajaran fungsi animasi jQuery

Saya sangat berminat dengan pelaksanaan jQuery animate sejak sekian lama, tetapi saya sangat sibuk suatu ketika dahulu dan tidak sempat mengkajinya sehingga cuti Festival Bot Naga beberapa hari lalu.

Setiap kesan peralihan animasi jQuery.animate dicapai melalui fungsi pelonggaran. Terdapat dua fungsi yang dipratetap dalam jQuery1.4.2:

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

Ia boleh disimpulkan secara samar-samar daripada nama parameter bahawa firstNum ialah nilai awal. Jika anda mahir dalam matematik, anda boleh mendapati bahawa fungsi linear ialah persamaan garis lurus; jika anda mahir dalam fizik, anda boleh mendapati bahawa ia adalah persamaan anjakan bagi gerakan seragam (saya tidak mahir dalam matematik dan fizik, tetapi orang lain mengingatkan saya tentang……). Kemudian diff dan p ialah kelajuan dan masa.

Lihat prototaip jQuery.animate sekali lagi:

menghidupkan: fungsi( prop, kelajuan, pelonggaran, panggil balik )

Penerangan bagi setiap parameter adalah seperti berikut:

prop: Satu set yang mengandungi sifat gaya dan nilainya sebagai sifat animasi dan nilai akhir.
kelajuan: tempoh animasi.
pelonggaran: Nama kesan pemadaman untuk digunakan.
panggil balik: fungsi dilaksanakan apabila animasi selesai.

Nilai gaya semasa (firstNum) elemen

boleh diperolehi, tempoh animasi (p) ialah tempoh dan nilai gaya akhir ialah prop. Secara teorinya, kelajuan animasi (diff) boleh dikira. Tetapi ini semestinya memerlukan fungsi lain untuk melakukan pengiraan. Ini jelas tidak bijak. Mari lihat kod yang berkaitan untuk memanggil fungsi pelonggaran (terletak dalam jQuery.fx.prototype.step):

var t = sekarang();
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing ||. defaultEasing](this.state, n, 0, 1, this.options.duration);

Dapat didapati bahawa nilai parameter p juga adalah nilai ini.keadaan Daripada konteks, kita tahu bahawa ia sebenarnya adalah kemajuan masa animasi. Nilai parameter firstNum dan diff adalah berkod keras, iaitu 0 dan 1 masing-masing. Sekarang rahsia fungsi pelonggaran didedahkan sepenuhnya p, firstNum, dan diff adalah semua peratusan daripada nilai sebenar Nilai pulangan bagi fungsi pelonggaran ialah kemajuan anjakan. Nilai perbezaan ialah 1, yang bermaksud animasi berjalan pada kelajuan 1x. Selepas mengira kemajuan anjakan, nilai anjakan semasa boleh dikira melalui "nilai awal (nilai akhir - nilai awal) × kemajuan":

this.now = this.start ((this.end - this.start) * this.pos);

Gunakan setInterval untuk melakukan operasi anjakan setiap masa tertentu (13ms dalam jQuery) sehingga perbezaan antara masa semasa dan masa awal lebih besar daripada tempoh animasi Ini ialah proses pelaksanaan jQuery.animate.

Mengikut idea konvensional, animasi dilaksanakan seperti berikut: menggunakan setInterval untuk meningkatkan nilai tertentu dengan nilai tertentu pada masa tertentu sehingga nilai mencapai nilai had. Masalah utama dengan ini ialah penyemak imbas yang berbeza berjalan pada kelajuan yang berbeza, mengakibatkan perbezaan dalam kelajuan animasi Secara amnya, IE lebih perlahan dan Firefox lebih pantas. jQuery.animate menentukan nilai anjakan berdasarkan masa semasa Nilai anjakan pada masa tertentu sentiasa tetap, jadi tidak akan ada perbezaan dalam kelajuan animasi.