ที่ได้รับการแนะนำ
ตัวจับเวลาเป็นเทคโนโลยีหลักของแอนิเมชั่น JavaScript กุญแจสำคัญในการเขียนลูปแอนิเมชั่นคือการรู้ว่าความล่าช้านานแค่ไหนที่เหมาะสม ในอีกด้านหนึ่งช่วงเวลาวนรอบจะต้องสั้นพอที่เอฟเฟกต์ภาพเคลื่อนไหวที่แตกต่างกันจะดูราบรื่นและราบรื่น ในทางกลับกันช่วงเวลาวนรอบจะต้องยาวพอเพื่อให้เบราว์เซอร์สามารถทำการเปลี่ยนแปลงได้
ความถี่รีเฟรชของจอภาพคอมพิวเตอร์ส่วนใหญ่คือ 60Hz ซึ่งเทียบเท่ากับการทาสีใหม่ 60 ครั้งต่อวินาที เบราว์เซอร์ส่วนใหญ่จะ จำกัด การดำเนินการวาดใหม่ให้ไม่เกินความถี่การวาดใหม่ของจอภาพเพราะแม้ว่าจะเกินความถี่นั้นประสบการณ์ผู้ใช้จะไม่ดีขึ้น ดังนั้นช่วงเวลาวนรอบที่ดีที่สุดสำหรับแอนิเมชั่นที่ราบรื่นที่สุดคือ 1,000ms/60 ซึ่งเท่ากับ 16.6ms
และปัญหาเกี่ยวกับ Settimeout และ SetInterval ก็คือว่าพวกเขาไม่ถูกต้อง กลไกการทำงานที่แท้จริงของพวกเขากำหนดว่าพารามิเตอร์ช่วงเวลาจริงเพียงแค่ระบุระยะเวลาในการเพิ่มรหัสแอนิเมชั่นลงในคิวเธรด UI ของเบราว์เซอร์เพื่อรอการดำเนินการ หากมีการเพิ่มงานอื่น ๆ ลงในคิวรหัสแอนิเมชั่นจะต้องรอจนกว่างานก่อนหน้าจะเสร็จสมบูรณ์ก่อนที่จะดำเนินการ
RequestanimationFrame ใช้ช่วงเวลาของระบบเพื่อรักษาประสิทธิภาพการวาดที่ดีที่สุดและจะไม่ถอนเกินเนื่องจากช่วงเวลาสั้น ๆ ซึ่งจะเพิ่มค่าใช้จ่าย และการใช้แอนิเมชั่นจะไม่ติดอยู่และไม่ราบรื่นเพราะช่วงเวลานั้นยาวเกินไปดังนั้นเอฟเฟกต์ภาพเคลื่อนไหวบนเว็บต่าง ๆ สามารถมีกลไกการรีเฟรชแบบครบวงจรซึ่งจะช่วยประหยัดทรัพยากรระบบปรับปรุงประสิทธิภาพของระบบและปรับปรุงเอฟเฟกต์ภาพ
คุณสมบัติ
【 1 】การร้องขอ frame จะเน้นการทำงานของ DOM ทั้งหมดในแต่ละเฟรมเสร็จสมบูรณ์ในการทาสีใหม่หรือการรีฟลอรี่และช่วงเวลาของการทาสีใหม่
【 2 】ในองค์ประกอบที่ซ่อนอยู่หรือมองไม่เห็นการร้องขอ frame จะไม่ถูกทาสีใหม่หรือ reflowed ซึ่งแน่นอนว่าหมายถึง CPU, GPU และการใช้หน่วยความจำน้อยลง
【 3 】 RequestAnimationFrame เป็น API ที่ได้รับจากเบราว์เซอร์โดยเฉพาะสำหรับแอนิเมชั่น เมื่อรันเบราว์เซอร์จะเพิ่มประสิทธิภาพการโทรของวิธีการโดยอัตโนมัติ หากหน้าไม่เปิดใช้งานภาพเคลื่อนไหวจะหยุดชั่วคราวโดยอัตโนมัติให้ประหยัดค่าใช้จ่าย CPU ได้อย่างมีประสิทธิภาพ
ใช้
การใช้งานของ RequestimationFrame นั้นคล้ายกับ SettimeOut มากยกเว้นว่าไม่จำเป็นต้องกำหนดช่วงเวลา RequestAnimationFrame ใช้ฟังก์ชันการเรียกกลับเป็นพารามิเตอร์ซึ่งเรียกว่าก่อนที่เบราว์เซอร์จะทาสีใหม่ มันส่งคืนจำนวนเต็มแทนหมายเลขของตัวจับเวลาซึ่งสามารถส่งผ่านไปยัง CancelimationFrame เพื่อยกเลิกการดำเนินการของฟังก์ชันนี้
requestId = requestanimationFrame (โทรกลับ); // คอนโซลเอาต์พุต 1 และ 0VAR Timer = RequestAnimationFrame (ฟังก์ชัน () {console.log (0);}); console.log (ตัวจับเวลา); // 1 เมธอด CancelanimationFrame ใช้เพื่อยกเลิกตัวจับเวลา // คอนโซลเอาต์พุตไม่มีอะไร var timer = RequestAnimationFrame (ฟังก์ชั่น () {console.log (0);}); CancelimationFrame (ตัวจับเวลา);คุณยังสามารถใช้ค่าส่งคืนเพื่อยกเลิกได้โดยตรง
var timer = requestanimationFrame (function () {console.log (0);}); CancelimationFrame (1);เข้ากันได้
IE9-Browser ไม่รองรับวิธีนี้คุณสามารถใช้ settimeout เพื่อความเข้ากันได้
if (! window.requestanimationFrame) {var ล่าสุด = 0; window.requestanimationFrame = function (callback) {var currtime = วันที่ใหม่ (). getTime (); var timetocall = math.max (0,16.7- (currtime - currtime - timet); currtime + timetocall; return id;}} if (! window.cancelanimationFrame) {window.cancelanimationFrame = function (id) {cleartimeout (id);};}แอปพลิเคชัน
ตอนนี้ใช้วิธีการสามวิธีของ setInterval, settimeout และ requestanimationframe เพื่อสร้างเอฟเฟกต์ระบบอย่างง่าย
【 1 】 setInterval
<div id = "mydiv" style = "พื้นหลังสี: lightblue; width: 0; ความสูง: 20px; line-height: 20px;"> 0%</div> <button id = "btn"> เรียกใช้ </button> <script> var; btn.onclick = function () setInterval (function () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; } else {clearInterval (ตัวจับเวลา);}}, 16);} </script>【 2 】 settimout
<div id = "mydiv" style = "พื้นหลังสี: lightblue; width: 0; ความสูง: 20px; line-height: 20px;"> 0%</div> <button id = "btn"> เรียกใช้ </kout> <script> var timer; btn.onclick = function fn () {ถ้า (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 settimeout (fn, 16);} else {cleartimeout (ตัวจับเวลา);}}, 16);} </script>【 3 】การร้องขอ FRAME
<div id = "mydiv" style = "พื้นหลังสี: lightblue; width: 0; ความสูง: 20px; line-height: 20px;"> 0%</div> <button id = "btn"> เรียกใช้ </button> <script> timer var; btn.onclick = function () RequestanimationFrame (ฟังก์ชั่น fn () {ถ้า (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; RequestanimationFrame (fn);} else {cancelanimationFrame (ตัวจับเวลา);}});} </script>โอเครหัสอยู่ที่นี่เพื่อแนะนำแอปพลิเคชันตัวจับเวลาที่สามในซีรีส์ BOM (นาฬิกา, นับถอยหลัง, นาฬิกาจับเวลาและนาฬิกาปลุก)
ด้านบนเป็นตัวจับเวลาครั้งที่สองคำขอ Frame ของซีรี่ส์ BOM ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!