Segera setelah Anda mendengar nama ini, Anda akan tahu bahwa efek dari kerangka kerja ini pada dasarnya dapat dicapai secara online. Bahkan, kerangka gerak sebelumnya masih memiliki keterbatasan, yaitu, beberapa nilai tidak dapat dipindahkan bersama.
Jadi bagaimana cara menyelesaikan masalah ini? Mari kita lihat kerangka olahraga sebelumnya
fungsi getStyle (obj, name) {if (obj.currentstyle) {return obj.currentstyle [name]; } else {return getComputedStyle (obj, null) [name]; }} function startMove (obj, attr, itarget) {clearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (attr == 'opacity') {cur = math.round (parsefloat (getStyle (obj, attr)) * 100);} else {cur = parseInt (getStyle (obj, attr));} var speed = (itarget - curred (getStyle (Obj, attr));} var speed = (itarget - curred (getStyle (Obj, attr));} var speed = (itarget - curr) / getSstyle (Obj, attr));} var speed = (itarget - curr) / lipe) (6; Math.floor (kecepatan); }}}}, 30);}Bagaimana cara memodifikasinya? Ini sebenarnya sangat sederhana. Dalam kerangka kerja masa lalu, Anda hanya bisa melewati satu gaya dan satu nilai pada satu waktu. Kemudian sekarang ubah ini menjadi objek JSON. Saya percaya semua orang akan mengerti.
Ketika kita menyebutnya, startMove (ODIV, {lebar: 200, tinggi: 200}); Jika perlu, tambahkan fungsi panggilan balik. Jadi mari kita lihat bagaimana kode dimodifikasi.
fungsi startMove (obj, json, fnend) {var max = 18; // Setiap timer dipanggil, hanya ada satu timer yang bekerja (timer yang ada dimatikan ketika gerakan dimulai) // dan timer dari objek saat ini ditutup atau dihidupkan, yang mencegah konflik dengan timer lain pada halaman, sehingga setiap timer tidak saling mengganggu satu sama lain dengan jelas (obj.timer); obj.timer = setInterval (function () {var bstop = true; // asumsi: semua nilai telah dicapai untuk (nama var dalam json) {var itarget = json [name]; // target point // menangani transparansi, Anda tidak dapat menggunakan parseInt, jika tidak, Anda akan ada 0 if (name == 'Opacity') {// Anda tidak akan menjadi 0 if (name == 'Opacity') {// * Round var Cur = Math.round (parsefloat (getStyle (obj, name))*100); speed = 0? Math.ceil (kecepatan): Math.floor (kecepatan); } else {obj.style [name] = Cur+speed+'px'; if (fnend) // hanya fungsi ini yang dilewati, hubungi {fnend (); }}}}, 20);}Mengapa ada asumsi tentang BSTOP?
Faktanya, jika saya menelepon startMove (ODIV, {lebar: 101, tinggi: 200}); Lebar menjadi 101, gerakan telah selesai, ketinggian belum tercapai, tetapi kita mungkin telah mematikan timer saat ini. Latihan telah berakhir dan bug akan terjadi dalam keadaan khusus. Mari kita jelaskan:
Bahkan, dibutuhkan semua gerakan untuk mematikan timer sebelum mencapai akhir. Sebaliknya, jika tidak ada yang tidak mungkin, maka matikan. Secara terprogram mendefinisikan nilai boolean, yang benar pada awalnya, dengan asumsi
Semua nilai telah tiba. Jika ada nilai yang tidak sama dengan titik target, BSTOP salah. Setelah seluruh siklus selesai, BSTOP ada di Ture, yang berarti bahwa semua gerakan telah selesai, dan timer dimatikan saat ini.
Maka kerangka gerak ini pada dasarnya telah selesai, dan CSS2 tidak berlaku untuk CSS3.
Meringkaskan:
Evolusi kerangka gerak
bingkai gerak StartMove (Itarget)
StartMove (OBJ, Itarget) Multi-objek
StartMove (obj, attr, itarget) Nilai apa pun
StartMove (OBJ, ATTR, Itarget, FN) Gerakan rantai
StartMove (OBJ, JSON, FN) Olahraga Sempurna
O (∩_∩) o Terima kasih ~