ในโครงการล่าสุดฉันต้องสร้างความต้องการใหม่: ตระหนักถึงแอนิเมชั่นเส้นทางที่กำหนดเองในผืนผ้าใบ เส้นทางที่กำหนดเองที่เรียกว่าที่นี่ไม่เพียง แต่รวมถึงเส้นตรงอาจมีการผสมผสานการเคลื่อนไหวแบบเส้นตรงหลายเส้นและรวมถึงเส้นโค้ง Bessel
ดังนั้นเราจะบรรลุเอฟเฟกต์ภาพเคลื่อนไหวนี้ในผืนผ้าใบได้อย่างไร ในความเป็นจริงมันง่ายมาก
สร้างเส้นทางก่อนที่จะสร้างภาพเคลื่อนไหวเราจะต้องได้รับเส้นทางของแอนิเมชั่นก่อน เพียงใช้ SVG API ดังนั้นจึงไม่จำเป็นต้องแทรกลงในหน้า)
เส้นทาง const = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861 128,92 C150.091399 1602 1602 1602 1602 160210 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16,16,16,16,16,90861, 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 z '; Pathelement.setAttributens (null, 'd', เส้นทาง);getTotallength และ getPointTlength
API ทั้งสองที่จัดทำโดย SVGPathlement นั้นมีความสำคัญอย่างยิ่ง
วิธี getTotallength สามารถรับความยาวทั้งหมดของ svgpathlement
วิธี getPointTlength จะถูกส่งผ่านเป็นความยาว x ซึ่งจะส่งคืนพิกัดสิ้นสุดของความยาวของจุดเริ่มต้นของ SVGPathelement
ใช้ API ทั้งสองนี้เพื่ออัปเดตพิกัดกราฟิกที่วาดในผืนผ้าใบอย่างต่อเนื่องผ่านวงจรและแอนิเมชั่นพา ธ สามารถทำได้:
ความยาว const = pathelement.getTotallength (); 0; ตัวจับเวลา const = setInterval (function () {ถ้า (เวลา <= ระยะเวลา) {const x = pathelement (pathelement.getPointTlength (ขั้นตอน) .x); const y = p arseint ย้าย (x, y); , canvas.head); ClosePath ();}ในที่สุดเราก็ห่อหุ้มมันเพื่อให้ตระหนักถึงฟังก์ชั่นง่าย ๆ ที่ตระหนักถึงภาพเคลื่อนไหวที่กำหนดเองในผืนผ้าใบ:
ฟังก์ชั่น CustMepath (Path, Func) {const Forms = document.createElementNs ('http://www.w3.org/2000/svg', เส้นทาง); ระยะเวลา const = 1000; ขั้นตอน) .x); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128,92 C150.09139,72 160,560,560,90862 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,90861,16 96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 z '; {context.clearRect (0, 0, Canvas.width, Canvas.Height);การใช้ความคิดเป็นไปอย่างคร่าวๆตามที่อธิบายไว้ข้างต้น แต่นี่ไม่ใช่ผลลัพธ์ที่ดีที่สุด เมื่อเราตัดสินใจที่จะสร้างแอนิเมชั่นเส้นทางที่กำหนดเองในผืนผ้าใบเราจะต้องไม่เพียง แต่พิจารณาวิธีการบรรลุผล แต่ยังพิจารณาการเพิ่มประสิทธิภาพประสิทธิภาพ จะควบคุมอัตราเฟรมให้เหมาะสมได้อย่างไร? เป็นต้น
แม้ว่าพวกเขาจะไม่ได้อยู่ในขอบเขตของการอภิปรายของบทความนี้ แต่พวกเขาควรจะคิดเกี่ยวกับ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้