ทันทีที่คุณได้ยินชื่อนี้คุณจะรู้ว่าผลกระทบของกรอบนี้สามารถทำได้โดยทั่วไปทางออนไลน์ ในความเป็นจริงเฟรมเวิร์กการเคลื่อนไหวก่อนหน้านี้ยังคงมีข้อ จำกัด นั่นคือไม่สามารถเคลื่อนย้ายค่าได้หลายค่าเข้าด้วยกัน
แล้วจะแก้ปัญหานี้ได้อย่างไร? มาดูกรอบกีฬาก่อนหน้านี้
ฟังก์ชั่น getStyle (obj, ชื่อ) {ถ้า (obj.currentstyle) {return obj.currentstyle [ชื่อ]; } else {return getComputedStyle (obj, null) [ชื่อ]; }} ฟังก์ชั่น startMove (obj, attr, itarget) {clearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; ถ้า (attr == 'opacity') {cur = math.round (parsefloat (getstyle (obj, attr)) * 100);} else {cur = parseint (getstyle (obj, attr); Math.floor (ความเร็ว); ถ้า cur == itarget) {clearinterval (obj.time); 'px';}}}}, 30);จะแก้ไขได้อย่างไร? มันง่ายมากจริงๆ ในเฟรมเวิร์กที่ผ่านมาคุณสามารถผ่านสไตล์เดียวและหนึ่งค่าได้ในแต่ละครั้ง จากนั้นเปลี่ยนสิ่งเหล่านี้เป็นวัตถุ JSON ฉันเชื่อว่าทุกคนจะเข้าใจ
เมื่อเราเรียกมันว่า startmove (odiv, {width: 200, ความสูง: 200}); หากจำเป็นให้เพิ่มฟังก์ชั่นการโทรกลับ ลองมาดูกันว่ารหัสได้รับการแก้ไขอย่างไร
ฟังก์ชั่น startmove (obj, json, fnend) {var max = 18; // ตัวจับเวลาทุกตัวถูกเรียกมีเพียงการจับเวลาเพียงตัวเดียว (ตัวจับเวลาที่มีอยู่จะถูกปิดเมื่อการเคลื่อนไหวเริ่มต้น) // และตัวจับเวลาของวัตถุปัจจุบันถูกปิดหรือเปิดซึ่งป้องกันความขัดแย้งกับตัวจับเวลาอื่น ๆ ในหน้าเพื่อให้แต่ละตัวจับเวลาไม่รบกวนกันและกัน obj.timer = setInterval (function () {var bstop = true; // สมมติว่า: ค่าทั้งหมดได้มาถึง (ชื่อ var ใน json) {var itarget = json [ชื่อ]; // จุดเป้าหมาย // จัดการความโปร่งใสคุณไม่สามารถใช้ parseint ได้ ในการหมุน var = math.round (parsefloat (getStyle (obj, name))*100); ความเร็ว = 0? Math.Ceil (ความเร็ว): Math.Floor (ความเร็ว); Chrome} else {obj.style [ชื่อ] = cur+speed+'px';} // ค่าที่แน่นอนไม่เท่ากับจุดเป้าหมายถ้า (cur! = itarget) {bstop = false; ถ้า (fnend) // เฉพาะฟังก์ชั่นนี้จะผ่านการโทร {fnend (); }}}}, 20);}เหตุใดจึงมีสมมติฐานเกี่ยวกับ BSTOP?
อันที่จริงถ้าฉันเรียก startmove (odiv, {width: 101, ความสูง: 200}); ความกว้างกลายเป็น 101 การเคลื่อนไหวเสร็จสมบูรณ์ความสูงยังไม่ถึง แต่เราอาจปิดตัวจับเวลาปัจจุบัน การออกกำลังกายสิ้นสุดลงและข้อผิดพลาดจะเกิดขึ้นในสถานการณ์พิเศษ มาอธิบายกันเถอะ:
ในความเป็นจริงมันต้องใช้การเคลื่อนไหวทั้งหมดเพื่อปิดตัวจับเวลาก่อนที่จะถึงจุดสิ้นสุด ในทางกลับกันหากไม่มีสิ่งใดที่เป็นไปไม่ได้ให้ปิด กำหนดค่าบูลีนโดยทางโปรแกรมซึ่งเป็นจริงในตอนต้นโดยสมมติว่า
ค่าทั้งหมดมาถึงแล้ว หากมีค่าที่ไม่เท่ากับจุดเป้าหมาย BSTOP เป็นเท็จ หลังจากรอบทั้งหมดสิ้นสุดลง BSTOP อยู่ในช่วงเวลาซึ่งหมายความว่าการเคลื่อนไหวทั้งหมดเสร็จสมบูรณ์และตัวจับเวลาจะถูกปิดในเวลานี้
จากนั้นกรอบการเคลื่อนไหวนี้เสร็จสมบูรณ์โดยทั่วไปและ CSS2 ไม่สามารถใช้ได้กับ CSS3
สรุป:
วิวัฒนาการของกรอบการเคลื่อนไหว
เฟรมการเคลื่อนไหว startmove (itarget)
startmove (obj, itarget) หลายวัตถุ
startmove (obj, attr, itarget) ค่าใด ๆ
startmove (obj, attr, itarget, fn) การเคลื่อนไหวของโซ่
StartMove (OBJ, JSON, FN) กีฬาที่สมบูรณ์แบบ
o (∩_∩) o ขอบคุณ ~