วันนี้ฉันได้เรียนรู้อนิเมชั่น JS Sports สั้น ๆ บันทึกประสบการณ์ของฉันและแบ่งปันกับทุกคน
ด้านล่างเป็นผลลัพธ์ที่ฉันได้แยกออก
จุดความรู้ 1: แอนิเมชั่นความเร็ว
1. ขั้นแรกขั้นตอนแรกคือการใช้แอนิเมชั่นการเคลื่อนไหวความเร็ว, ห่อหุ้มฟังก์ชั่นความรู้ที่ใช้คือ setInterval (function () {
การคัดลอกรหัสมีดังนี้:
odiv.style.left = odiv.offsetleft+10+"px";
}, 30)
เกี่ยวกับสาเหตุที่ Offsetleft ใช้ที่นี่ฉันเป็นพิเศษและข้อมูลที่เป็นประโยชน์ที่ฉันได้รับคือ:
A.offsetleft และซ้ายเป็นเช่นเดียวกับตำแหน่งด้านซ้ายของโหนดเด็กที่สัมพันธ์กับโหนดพาเรนต์
ข. แต่ด้านซ้ายนั้นสามารถอ่านได้และเขียนได้ในขณะที่ Offsetleft เป็นแบบอ่านอย่างเดียว
ค. และ Offsetleft ไม่มีหน่วยและไม่มี PX เมื่อได้รับตำแหน่งโหนดเด็ก
ฉันกำลังขยายความรู้อื่น ๆ ที่นี่ ขอขอบคุณบล็อกเกอร์นี้ http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/
2. ปล่อยให้โหนดที่เคลื่อนที่หยุด ที่นี่เราใช้คำสั่ง IF เพื่อตรวจสอบ หาก Offsetleft == 0, ClearInterval (ตัวจับเวลา) ตัวจับเวลาที่นี่ควรเริ่มต้น = null ล่วงหน้าจากนั้นกำหนดภาพเคลื่อนไหวการเคลื่อนไหวก่อนหน้าให้กับมัน
3. มีปัญหาที่นี่ หากการเคลื่อนไหวถูกกระตุ้นอีกครั้งก่อนสิ้นสุดการเคลื่อนไหวความเร็วของการเคลื่อนไหวจะสะสม ที่นี่ตราบใดที่การเคลื่อนไหวทั้งหมดเริ่มต้นขึ้น ClearInterval (ตัวจับเวลา) ก็เพียงพอแล้ว
4. ตั้งค่าเอฟเฟกต์การเคลื่อนย้ายและการกำจัดและตั้งค่าพารามิเตอร์สำหรับการเคลื่อนไหวหนึ่งคือความเร็วความเร็วและอีกอันคือตำแหน่งเป้าหมาย เราพบว่าความเร็วสามารถตัดสินได้โดยตำแหน่งของ itarget ดังนั้นจึงจำเป็นต้องมีพารามิเตอร์เดียวเท่านั้น
จุดความรู้ที่ 2: การไล่ระดับสีโปร่งใส
1. อันที่จริงมันคล้ายกับตอนนี้ยกเว้นว่าค่าของ itarget นั้นโปร่งใสและกระบวนการคือการล้างตัวจับเวลาและเปิดตัวจับเวลาอื่นเพื่อตัดสิน ฯลฯ
2. กำหนดพารามิเตอร์ alpha = ความโปร่งใสโปรดทราบว่าควรเขียนตัวจับเวลาเช่นนี้:
การคัดลอกรหัสมีดังนี้:
อัลฟ่า+= ความเร็ว;
odiv.style.filter = 'alpha (ความทึบ:'+alpha+')'; // นี่เป็นวิธีที่สำคัญมากโปรดทราบว่ามีการเขียนเช่นนี้
odiv.style.Opacity = alpha/100; // ระวังอย่าลืมหารด้วย 100
3. ข้างต้นเป็นสไตล์ในบรรทัดทั้งหมด
จุดความรู้ที่สาม: การเคลื่อนไหวบัฟเฟอร์
1. การเคลื่อนที่บัฟเฟอร์หมายความว่าระยะทางที่ใหญ่ขึ้นความเร็วที่ใหญ่ขึ้นและระยะทางที่เล็กลงเท่าไหร่ความเร็วก็คือความเร็วที่น้อยลงนั่นคือความเร็วที่เกี่ยวข้องกับระยะทาง
2. ตามคำสั่งข้างต้นความเร็วจะถูกนิยามใหม่ ความเร็วคือ 0 ในตอนแรกและตอนนี้:
การคัดลอกรหัสมีดังนี้:
var speed = itarget-odiv.offsetleft;
กำหนดตัวจับเวลาใหม่:
การคัดลอกรหัสมีดังนี้:
odiv.style.left = odiv.offsetleft+ความเร็ว+'px';
ในเวลานี้เราพบว่าความเร็วสูงเกินไปดังนั้นเราจึงสามารถทำได้เช่นนี้:
การคัดลอกรหัสมีดังนี้:
var speed = (itarget-odiv.offsetleft)/10;
3. จะมีปัญหาร้ายแรงในเวลานี้ เนื่องจากหน่วยขั้นต่ำของหน้าจอคือ PX ค่าซ้ายสุดท้ายจะปรากฏเป็นทศนิยมและ itarget จะไม่เป็นเป้าหมาย มันสามารถแก้ไขได้โดยการตัดสิน ควรมีการแนะนำ Math.floor () ที่นี่ซึ่งกำลังปัดเศษลงและ Math.ceil () ก็จะปรากฏขึ้นเช่นกันซึ่งกำลังปัดเศษขึ้น หลังจากกำหนดความเร็วเราเขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
ความเร็ว = ความเร็ว> 0? math.ceil (ความเร็ว): math.floor (ความเร็ว);
สิ่งนี้จะช่วยให้มั่นใจได้ว่าความเร็วเป็นจำนวนเต็มและเป็น 0 ในค่าวิกฤต
จุดความรู้ 4: การเคลื่อนไหวหลายวัตถุ
1. ก่อนอื่นรับวัตถุทั้งหมดสร้างอาร์เรย์จากนั้นใช้ A for loop เพื่อทำมัน (วิธีการนี้คลาสสิกนี้!) เพิ่มเหตุการณ์โหนดในการวนรอบและใช้สิ่งนี้เพื่อแทนที่โหนดปัจจุบันในฟังก์ชั่นเช่น: startmove (นี่คือ itarget), startmove (obj
2. เมื่อใช้ความกว้างปัจจุบัน OffsetWidth คุณต้องใช้ค่าของ OBJ
3. เมื่อเมาส์เคลื่อนที่เร็วมากความกว้างของโหนดจะไม่สามารถกู้คืนสู่สถานะเดิมได้ นี่เป็นเพราะตัวจับเวลาเป็นตัวจับเวลาที่ทุกคนใช้ โหนดถัดไปได้ล้างตัวจับเวลาก่อนที่โหนดก่อนหน้าจะกลับสู่สถานะเดิม วิธีแก้ปัญหาคือการเพิ่มดัชนีลงในแต่ละโหนดซึ่งคือการเพิ่ม adiv [i] .timer = null ไปที่ด้านบนสำหรับลูป; จากนั้นกำหนดฟังก์ชั่นเพื่อแทนที่ตัวจับเวลาด้วย obj.timer ดังนั้นเราควรให้ความสนใจกับความจริงที่ว่ามีบางอย่างเกิดขึ้นเมื่อแบ่งปันตัวจับเวลา
4. ในการเคลื่อนไหวของความโปร่งใสอัลฟ่าจะแทนที่ความเร็ว แต่ถึงแม้ว่าตัวจับเวลาจะไม่ถูกใช้ร่วมกันการเคลื่อนไหวของวัตถุหลายชิ้นจะมีปัญหา นี่เป็นเพราะอัลฟ่าเป็นเรื่องธรรมดาทำให้แต่ละวัตถุฉีกขาดซึ่งกันและกัน วิธีแก้ปัญหาคือการกำหนดอัลฟ่าให้กับแต่ละโหนดในการวนรอบเช่นตัวจับเวลา
สรุป: การแก้ไขปัญหาความขัดแย้งไม่ว่าจะเริ่มต้นหรือปรับแต่ง
จุดความรู้ 5. ได้รับสไตล์
1. ในตัวจับเวลาที่เปลี่ยนความกว้างของโหนด (เคลื่อนที่เป็นขนาดใหญ่ลบขนาดเล็ก) ถ้าคุณเพิ่มเส้นขอบเข้ากับโหนดมันจะเล็กกว่าโหนดเป้าหมายเมื่อมันถูกย้ายเข้าและใหญ่กว่าโหนดเป้าหมายเมื่อมันถูกย้ายออก ให้ความสนใจกับความกว้าง+ช่องว่าง+แถบเลื่อน (แถบเลื่อน)+เส้นขอบดังนั้นเหตุผลก็คือการชดเชยทุกครั้งจะเพิ่มเส้นขอบ*2- (ค่าของการลดลงของแต่ละครั้งในตัวจับเวลา)
2. การแก้ปัญหาข้างต้นคือการเขียนความกว้างในบรรทัดและใช้ parseint (odiv.style.width) แทนที่จะเป็น Offsetleft แต่มันไม่สามารถเขียนในบรรทัดได้เสมอดังนั้นเราจึงกำหนดฟังก์ชั่นเพื่อให้ได้สไตล์โซ่:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getStyle (obj, attr) {
if (obj.currentstyle) {
ส่งคืน obj.currentstyle [attr]; // คือเบราว์เซอร์
-
อื่น{
return getComputerstyle (obj, false) [attr]; // เบราว์เซอร์อื่น ๆ
-
-
3. สำหรับขนาดตัวอักษรมีเพียงวิธีการเขียนของตัวอักษรใน JS
จุดความรู้ 6: ค่าแอตทริบิวต์ใด ๆ
1. ออฟเซ็ตทั้งหมด- จะมีข้อบกพร่องเล็ก ๆ ใช้ฟังก์ชั่น getStyle ฟังก์ชั่นนี้มักจะใช้กับ parseint () และมักจะถูกบันทึกด้วยตัวแปร
2. เมื่อเขียนสไตล์ความกว้างคุณยังสามารถเขียนเป็นสไตล์ ['ความกว้าง']
3. สำหรับการปรับค่าแอตทริบิวต์ของวัตถุหลาย ๆ วัตถุคุณสามารถห่อหุ้มรูปแบบเป็นพารามิเตอร์เพื่อให้ฟังก์ชันของแอตทริบิวต์ของวัตถุหลายชิ้นรวมถึงค่าแอตทริบิวต์ทั้งสาม (OBJ, attr, itarget)
4. กรอบการเคลื่อนไหวด้านบนไม่เหมาะสำหรับการเปลี่ยนแปลงความโปร่งใสเนื่องจากความโปร่งใสเป็นทศนิยมทั้งหมด ด้วยเหตุผลสองประการแรกคือ ParseInt และที่สองคือ attr = ...+px ที่นี่เราสามารถใช้การตีความ IF เพื่อประมวลผลความโปร่งใสแยกต่างหากแทนที่ ParseInt ด้วย parsefloat และลบ PX
5. คอมพิวเตอร์มีข้อผิดพลาด 0.07*100 ไม่เท่ากับ 7 ดังนั้นเราจึงแนะนำฟังก์ชั่นที่เป็นคณิตศาสตร์ Round () ซึ่งเป็นค่าโค้งมน
จุดรู้ที่ 7: การเคลื่อนไหวของห่วงโซ่
1. แนะนำกรอบการเคลื่อนไหว JS
2. ผ่านในฟังก์ชั่นการโทรกลับ fn () และใช้ถ้าจะตัดสิน หากมี fn () ให้ดำเนินการ fn ()
จุดความรู้ 8: การออกกำลังกายพร้อมกัน
1. หากมีการเขียนฟังก์ชั่นการเคลื่อนไหวสองฟังก์ชั่นเพื่อควบคุมการเคลื่อนไหวพร้อมกันการเขียนทับฟังก์ชั่นจะเกิดขึ้น
2. ใช้ JSON เป็นจุดความรู้ JSON Loop ใช้สำหรับ (I ใน JSON) และพารามิเตอร์ของฟังก์ชั่นการเคลื่อนไหวคือ OBJ, JSON และ FN
3. ไม่มีค่าของ itarget และถูกแทนที่ด้วย JSON [attr]
หลังจากเขียนสิ่งนี้มันจบลงแล้ว ฉันหวังว่าทุกคนจะชอบมัน ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้แอนิเมชั่นกีฬา JS