วิธีการใช้เอฟเฟ็กต์แอนิเมชั่นการพลิกกระจกรูปภาพองค์ประกอบบนผืนผ้าใบ

คุณสามารถคลิกที่นี่: การสาธิตภาพเคลื่อนไหวพลิกกระจกแนวนอนภาพผ้าใบ

เอฟเฟกต์ภาพเคลื่อนไหวของการคลิกรูปภาพบนหน้าสาธิตสามารถมองเห็นได้

มันค่อนข้างง่ายที่จะบรรลุผลการพลิกขององค์ประกอบใน CSS ตัวอย่างเช่น หากเราต้องการให้ภาพบางภาพพลิกในแนวนอน เราต้องใช้ CSS เพียงบรรทัดเดียว:

 img { แปลง: scaleX (-1);}

หรือ:

 img { แปลง: สเกล (-1, 1);}

แต่ในแคนวาสจะลำบากกว่านิดหน่อย ปัญหาไม่ใช่ว่าพลิกไม่ได้ แต่อยู่ที่การวางตำแหน่งระบบพิกัด

ใน Canvas รหัสต่อไปนี้สามารถบรรลุการพลิกกระจกแนวนอนของทรัพยากร (สมมติว่าบริบทเป็นบริบท 2d ของ Canvas):

 บริบท.สเกล(-1, 1);

หรือใช้ setTransform API สำหรับการแปลงเมทริกซ์โดยตรง:

 บริบท setTransform (-1, 0, 0, 1, 0, 0);

อย่างไรก็ตาม แม้ว่าจะมีการนำการพลิกไปใช้ก็ตาม แต่ก็มีปัญหาใหญ่กับการวางตำแหน่งองค์ประกอบใน Canvas เนื่องจากระบบการแปลงพิกัดของ Canvas แตกต่างจากระบบ CSS ดังนั้น หากเราต้องการให้ได้เอฟเฟกต์การพลิกที่อยู่ตรงกลาง เราจำเป็นต้องย้ายจุดศูนย์กลางขององค์ประกอบเป้าหมายไปยังแกนการแปลงก่อนที่จะพลิก

ใช้ระยะการพลิกแนวนอน แปลออฟเซ็ตแนวนอนหลังจากการเปลี่ยนแปลงการกระจัดก่อนที่จะปรับขนาด จากนั้นคุณจะเห็นผลของการวางศูนย์กลางการพลิกเสมอ

ภาษามันซีด เลยถ่ายรูปมาอธิบายกัน

ระบบพิกัดการเปลี่ยนแปลงเริ่มต้นของ Canvas อยู่ที่มุมซ้ายบน

ดังนั้นหากสเกลแนวนอนคือ 1, 0.5, 0, -0.5, -1 ตำแหน่งสุดท้ายจะเป็นดังนี้:

ดังนั้นเราจึงได้สูตรระยะทางแนวนอนที่ควรออฟเซ็ต:

distance = (canvas.width – image.width * scale) / 2;

ดังนั้นรหัสคีย์สุดท้ายสำหรับการมิเรอร์และการวาดภาพจึงเป็นเช่นนี้ (สมมติว่าขนาดมาตราส่วนแนวนอนคือมาตราส่วน):

 //ประสานงานการปรับการอ้างอิง context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//ประสานงานการอ้างอิง เรียกคืนบริบท setTransform (1, 0, 0, 1, 0, 0);

จะเพิ่มเอฟเฟ็กต์ภาพเคลื่อนไหวได้อย่างไร?

เราสามารถใช้ Tween.js, https://github.com/zhangxinxu/tween

มีอัลกอริธึมการค่อยๆ เปลี่ยนหลายอย่างอยู่ในนั้น ด้วยความช่วยเหลือของวิธี Math.animation() ที่สะดวกสบาย เราก็สามารถบรรลุผลที่เราต้องการได้อย่างง่ายดาย!

 Math.animation (แบบฟอร์ม, ถึง, ระยะเวลา, การค่อยๆ เปลี่ยน, โทรกลับ);

ภาพเคลื่อนไหว JS มีดังนี้:

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', ฟังก์ชัน (ค่า, isEnding ) { // ล้างเนื้อหาแคนวาส context.clearRect(0, 0, canvas.width, canvas.height); ปรับพิกัด context.translate((canvas.width - canvas.width * value) / 2, 0); // ปรับสเกล context.scale(value, 1); // วาดภาพปัจจุบัน context.drawImage(eleImg, 0, 0); // ประสานบริบทการกู้คืนการอ้างอิง setTransform (1, 0, 0, 1, 0, 0);});

บทความเย็นอีกเรื่อง มีผู้ใช้ Canvas ไม่มากนักและมีผู้ชมจำนวนจำกัด อย่างไรก็ตาม ดังสุภาษิตโบราณที่ว่า ไม่มีความดีใดจะเล็กเกินกว่าที่จะละเลยได้ ฉันหวังว่าเพื่อน ๆ จะสามารถให้ความช่วยเหลือเมื่อพวกเขาค้นหาประเด็นที่เกี่ยวข้องในอนาคต

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network