เมื่อ HTML5 และ CSS3 ค่อยๆกลายเป็นกระแสหลักฉันคุ้นเคยกับการใช้ JS เพื่อสร้างภาพเคลื่อนไหวง่าย ๆ เพราะบนเบราว์เซอร์เดสก์ท็อปไม่สนับสนุน CSS3 ทั้งหมด ผู้ใช้ก็แปลกมาก ไม่ใช่ผู้ใช้ทุกคนที่สามารถปลูกฝังได้ มีหลายคนที่คิดว่า win7.win8 ไม่มีประโยชน์เท่า XP แต่โทรศัพท์มือถือนั้นแตกต่างกันมากและเบราว์เซอร์มือถือรองรับ HTML5 และ CSS3 เป็นอย่างดี อย่างไรก็ตามความสามารถในการประมวลผลฮาร์ดแวร์ของโทรศัพท์มือถือมี จำกัด มาก วันนี้เมื่อโทรศัพท์มือถือ Quad-Core และ Octa-Core อาละวาดมีผู้คนที่ใช้โทรศัพท์มือถือแบบดูอัลคอร์หรือโทรศัพท์เดี่ยวอย่างฉัน แม้ว่า JS จะดี แต่ฉันก็ไม่ได้ติดต่อกับคุณมากนักดังนั้นฉันจึงไม่สามารถปรับความรู้สึกที่ดีได้ การปัดหน้าง่าย ๆ ทำงานได้อย่างราบรื่นบนพีซี i7 แต่มันติดอยู่ติดพูดติดอ่างพูดติดอ่างและพูดติดอ่างบนโทรศัพท์สองคอร์ของฉัน มันน่าหดหู่มาก ด้วยเหตุนี้ฉันจึงค้นหาเป็นเวลานานและอ่านมาก ในที่สุดก่อนที่ฉันจะตัดสินฉันพบวิธีที่ค่อนข้างง่าย: ใช้ CSS3 เพื่อดำเนินการเคลื่อนไหว
ในอดีตนอกเหนือจากฟังก์ชั่นแอนิเมชั่นของ jQuery เช่นภาพเคลื่อนไหว settimeout และ setInterval ถูกนำมาใช้เพื่อลูปเพื่อเปลี่ยนระยะขอบความกว้างความกว้างด้านบนและคุณสมบัติอื่น ๆ ขององค์ประกอบ มันเป็นสิ่งที่ทำให้ฉันสับสน
ก่อนอื่น settimeout setInterval ไม่สามารถดำเนินการได้ตลอดเวลาเพียงแค่ตั้งค่า 0ms ฉันเคยค้นพบความลับนี้โดยบังเอิญในขณะที่ดีบักใน Iscroll ปรากฎว่าการคำนวณความล่าช้าของตัวจับเวลาขึ้นอยู่กับนาฬิกาในตัวของเบราว์เซอร์และความแม่นยำของนาฬิกาขึ้นอยู่กับความถี่ของการอัปเดตนาฬิกา ช่วงเวลาการอัปเดตระหว่าง IE8 และรุ่นก่อนหน้านี้คือ 15.6 มิลลิวินาที มันจบแล้วฉันคิดว่ามันทำการกระจัด 1px ใน 10ms และมันไม่สามารถทำสิ่งนี้ได้ตรงเวลา
และเกิดอะไรขึ้นกับการ์ด? การ์ดเพราะรหัสไม่ได้เขียนไว้อย่างดี ท้ายที่สุดแล้ว JS เป็นเธรดเดี่ยวและเมื่อมีการกระทำที่ใช้เวลานาน UI อาจไม่ตอบสนอง แม้ว่าเราจะใช้ settimeout แต่ก็เป็นเพราะ settimeout ที่ทำให้เราดูเหมือนอินเทอร์เฟซยังไม่ตาย แต่การกระทำนั้นไม่ราบรื่น เพราะหลังจากการดำเนินการ settimeout ในครั้งนี้ก่อนการดำเนินการครั้งต่อไปการกระทำที่ใช้เวลานานอาจพบได้ในช่วงกลางดังนั้นการดำเนินการของ settimeout จะไม่ จำกัด แล้วอะไร? การ์ด! อย่างไรก็ตามมีเหตุผลอีกประการหนึ่งว่าทำไมการ์ดจึงสามารถเรียกเค้าโครงเบราว์เซอร์ (เช่น: รีเลย์) โดยไม่ตั้งใจเมื่อเปลี่ยนแอตทริบิวต์ดั้งเดิม คำถามนี้ใช้เวลานาน แต่ใช้เวลานาน มันใช้เวลานาน แต่มักจะถูกเพิกเฉย แต่หลายครั้งที่ไม่สามารถเพิกเฉยได้
นอกเหนือจากสองย่อหน้าข้างต้นแล้วยังมีปัญหาอีกอย่างหนึ่งนั่นคือในโทรศัพท์มือถือจำนวนมากมันมักจะรู้สึกเหมือนเป็นเฟรมทีละเฟรมและอาจเป็นเฟรมทีละเฟรมยาวและสั้น นี่คือจังหวะที่สามารถทำลายทุกคนได้ ทำไมสิ่งนี้ถึงเกิดขึ้น? มันยังคงมีบางอย่างเกี่ยวกับความล่าช้าของการตั้งถิ่นฐาน ทิ้งเฟรม ปัญหานี้เกี่ยวข้องกับความถี่รีเฟรชของจอภาพ มันซับซ้อนเกินไปจริงๆ
ในที่สุด CSS3 ได้รับการคัดเลือก JS เปลี่ยนคุณลักษณะขององค์ประกอบอย่างไดนามิกและใช้การเปลี่ยนแปลงเพื่อควบคุมเวลาดำเนินการแอนิเมชัน ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<div id = "test" style = "การเปลี่ยนแปลง: ความสะดวก 1S ทั้งหมด; ความกว้าง: 100px;" >/div>
JS:
การคัดลอกรหัสมีดังนี้:
$ ("#test"). ความกว้าง (200);
ด้วยวิธีนี้หลังจาก 1 วินาทีความกว้างของ div นี้จะกลายเป็น 200px มันไม่เหมือนซุนวูกงยิ่งใหญ่ขึ้นในทันทีและเขาก็ค่อยๆวิ่งเท้าของเขาอย่างช้าๆโดยไม่ติดขัดหรือหยุด และมีข้อได้เปรียบในการใช้แอนิเมชั่น CSS มันไม่ได้รับผลกระทบจาก JS ที่ใช้เวลานาน แม้ว่าเธรด UI และเธรด JS นั้นเป็นเอกสิทธิ์เฉพาะบุคคลในเบราว์เซอร์ แต่ก็ไม่ถูกต้องสำหรับแอนิเมชั่น CSS และเบราว์เซอร์จำนวนมากยังสามารถเปิดใช้งานการเร่งความเร็วฮาร์ดแวร์ (เช่น Chrome) แม้ว่าเบราว์เซอร์จะวางใหม่ไม่ชัดเจนในสถานการณ์ปกติ แต่ควรหลีกเลี่ยงการจัดวางขนาดใหญ่อีกครั้ง ดังนั้นเพิ่ม -webkit -transform: Translatez (0); หรือ -webkit -transform: translate3d (0,0,0); เพื่อให้เบราว์เซอร์จะทำให้เลเยอร์นี้เป็นอิสระ แม้ว่าการวางใหม่จะหลีกเลี่ยงไม่ได้พื้นที่ก็มีขนาดเล็กลง เป็นการตัดสินใจที่ดีมากที่จะใช้แปลเพื่อแทนที่มาร์จิ้น
ในที่สุดการเปลี่ยนแปลงทั่วไปบางอย่างจะทำให้เกิดคุณสมบัติในการถ่ายทอด:
การคัดลอกรหัสมีดังนี้:
ความกว้าง
ความสูง
การขยาย
ระยะขอบ
แสดง
ความกว้างของชายแดน
ชายแดน
ความหนักหน่วงน้อย
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ JavaScript และ CSS3 ในเวลาเดียวกันโปรดเพิ่มข้อบกพร่องและเข้าใจ