จะมีแอนิเมชั่นพาราโบลาสำหรับการเพิ่มผลิตภัณฑ์ลงในตะกร้าสินค้าให้กับ Tmall โดยบอกผู้ใช้ว่าการดำเนินการประสบความสำเร็จและที่ตั้งของตะกร้าสินค้า จำเป็นต้องมีผลกระทบที่คล้ายกันในธุรกิจ บันทึกบันทึกกระบวนการดำเนินการและเริ่มการสาธิต
ตอนแรกฉันไม่คิดว่าจะใช้ฟังก์ชั่นพาราโบลาเพื่อทำมันและฉันลืมไปว่ามีฟังก์ชั่นดังกล่าว ฉันคิดว่าพาราโบลาเป็นหลักมีความเร็วไปทางทิศทางขวาและขึ้นไปด้านบน (เท่าที่การสาธิตด้านบน) ความเร็วไปทางขวานั้นสม่ำเสมอความเร็วไปยังทิศทางขึ้นไปลดลงและทิศทางย้อนกลับจะเพิ่มขึ้น ค่าซ้ายและด้านบนของการเปลี่ยนแปลงองค์ประกอบตามเวลาและวิถีการเคลื่อนไหวขององค์ประกอบคือพาราโบลา ความคิดนี้ไม่ใช่สากลและการดำเนินการค่อนข้างซับซ้อนดังนั้นฉันจึงยอมแพ้
ต่อมาฉันอ้างถึงการใช้งานของพาราโบลาของ Zhang Xinxu และการปรับปรุงท่าเทียบเรือของคนโง่และก็ตระหนักได้ทันที
ฉันจะดูความคิดอีกครั้ง ฟังก์ชั่นพาราโบลา y = a*x*x + b*x + c โดยที่ a ไม่เท่ากับ 0, a, b และ c เป็นค่าคงที่ X และ Y เป็นพิกัดของพาราโบลาที่ผ่าน A กำหนดทิศทางการเปิดของพาราโบลาโดยมีการเปิดตัวของ> 0 ขึ้นไปและการเปิดตัวของ <0 ลง เห็นได้ชัดว่าการเปิดพาราโบลาของ TMALL ลดลงและ A ยังกำหนดขนาดของการเปิด ค่าที่เล็กลงยิ่งเปิดมากเท่าไหร่ก็ยิ่งราบรื่นพาราโบลาและในทางกลับกัน ดังนั้นค่าของ A สามารถปรับแต่งได้ซึ่งเทียบเท่ากับการรู้พิกัดสองแห่ง (จุดเริ่มต้นและจุดสิ้นสุดการนั่งนั่นคือองค์ประกอบด้านซ้ายและค่าสูงสุด) การค้นหาตัวเลขที่ไม่รู้จักสองตัวคุณสามารถเรียนรู้วิธีการใช้คณิตศาสตร์ของโรงเรียนมัธยมต้นสมการกำลังสองไบนารี
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A เป็นที่รู้จักการแทนที่พิกัดที่รู้จักสองแห่ง [X1, Y1] [X2, Y2] สามารถส่งผลให้ค่าของ B และ C และความสัมพันธ์ที่สอดคล้องกันระหว่าง X และ Y มีอยู่
ไม่ว่าการเปิดพาราโบลาจะสูงขึ้นหรือลงความเร็วขององค์ประกอบที่เคลื่อนที่ในทิศทางแนวนอนยังคงไม่เปลี่ยนแปลงนั่นคือค่าซ้ายจะเปลี่ยนไปด้วยความเร็วคงที่ คุณสามารถตั้งค่าเวลาการเคลื่อนไหวพาราโบลา t ความเร็วขององค์ประกอบในทิศทางแนวนอนคือ speedx = (x2 - x1)/t ตั้งค่าตัวจับเวลาซึ่งดำเนินการทุก ๆ 30ms ค่าซ้ายหลังจากแต่ละครั้งที่ตัวจับเวลาถูกดำเนินการคือ x = speedx * ปัจจุบันที่ตัวจับเวลาถูกดำเนินการแล้ว แทนที่ฟังก์ชั่น y = a*x*x + b*x + c เพื่อรับค่าสูงสุด เนื่องจากการคำนวณทั้งหมดนี้ขึ้นอยู่กับการแปลของจุดเริ่มต้นพิกัดไปยังจุดเริ่มต้น (จุดสิ้นสุดยังถูกแปลตามลำดับ) เมื่อในที่สุดการตั้งค่าค่าซ้าย/บนสุดขององค์ประกอบที่เคลื่อนที่จะต้องเพิ่มค่าซ้าย/สูงสุดเริ่มต้นขององค์ประกอบจุดเริ่มต้น สำหรับรายละเอียดโปรดตรวจสอบรหัสตัวอย่างใน F12
รหัสหลัก:
/** * js ภาพเคลื่อนไหวพาราโบลา * @param {[วัตถุ]} ต้นกำเนิด [องค์ประกอบเริ่มต้น] * @param {[วัตถุ]} เป้าหมาย [องค์ประกอบจุดเป้าหมาย] * @param {[วัตถุ]} องค์ประกอบ [องค์ประกอบที่จะย้าย] * @param {[number]} a [parabola radian] * @param การดำเนินการพาราโบลาเสร็จสมบูรณ์] */ var parabola = ฟังก์ชั่น (config) {var b = 0, interval = 15, timer = null, x1, y1, x2, y2, originx, Originy, diffx, diffy; this.config = config || - // จุดเริ่มต้น this.origin = $ (this.config.origin) || null; // จุดสิ้นสุด this.target = $ (this.config.target) || null; // องค์ประกอบของการเคลื่อนไหว this.element = $ (this.config.element) || null; // เส้นโค้งเรเดียน this.a = this.config.a || 0.004; // เวลาการเคลื่อนไหว (MS) this.time = this.config.time || 1,000; this.init = function () {x1 = this.origin.offset (). ซ้าย; y1 = this.origin.offset (). ด้านบน; x2 = this.target.offset (). ซ้าย; y2 = this.target.offset (). ด้านบน; Originx = x1; ต้นกำเนิด = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // เป็นที่ทราบกันดีว่าตามฟังก์ชั่นพาราโบลา y = a*x*x + b*x + c จุดเริ่มต้นของพาราโบลาถูกแปลไปยังจุดกำเนิดพิกัด [0, 0] และจุดสิ้นสุดจะถูกแปลตามลำดับ จากนั้นพาราโบลาจะผ่านจุดกำเนิด [0, 0] และได้รับ c = 0; // หลังจากจุดสิ้นสุดได้รับการแปลจะได้รับ: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // i.e. diffy = a*diffx*diffx + b*diffx; // ค่าของค่าคงที่ b สามารถพบได้ b = (diffy - this.a*diffx*diffx)/diffx; this.element.css ({ซ้าย: x1, top: y1}) ส่งคืนสิ่งนี้; } // กำหนดวิธีการเคลื่อนไหว this.movestyle = function () {var movestyle = 'ตำแหน่ง', testDiv = document.createElement ('div'); if ('placeholder' ใน testdiv) {['', 'ms', 'moz', 'webkit']. foreach (ฟังก์ชั่น (pre) {var transform = pre + (ก่อน? } this.move = function () {var start = new date (). getTime (), movestyle = this.movestyle (), _this = this; timer = setInterval (function () {ถ้า (วันที่ใหม่ (). getTime () - เริ่มต้น> _This.Time) {clearInterval (ตัวจับเวลา); _this.element.css ({ซ้าย: x2, top: y2}) typeof _this.config.callback === } x = speedx*(วันที่ใหม่ (). getTime () - เริ่มต้น); y = _this.a*x*x+b*x; Window.requestimationFrame (_this.Element [0] .style [Movestyle] = 'Translate ('+x+'px,'+y+'px)'); } this.init (); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น