سيكون هناك رسوم متحركة مكافئة لإضافة منتجات إلى عربة التسوق إلى TMALL ، تخبر المستخدم أن العملية ناجحة وموقع عربة التسوق. هناك حاجة إلى آثار مماثلة في العمل. سجل مذكرة عملية التنفيذ وبدء العرض التوضيحي.
في البداية ، لم أفكر في استخدام وظيفة المكافئ للقيام بذلك ، وقد نسيت أن هناك مثل هذه الوظيفة. اعتقدت أن البارابولا لديها بشكل أساسي سرعة إلى الاتجاهات اليمنى والأعلى (بقدر العرض التوضيحي أعلاه) ، تكون السرعة إلى اليمين موحدة ، وتنخفض السرعة إلى الاتجاه الصعودي ، ثم يتم زيادة الاتجاه العكسي. تتغير القيم اليسرى والأعلى للعنصر مع مرور الوقت ، ومسار حركة العنصر هو المكافئ. هذه الفكرة ليست عالمية ، والتنفيذ معقد نسبيًا ، لذلك استسلمت.
في وقت لاحق ، أشرت إلى تنفيذ Zhang Xinxu لوظيفة المكافئ وتحسين رصيف Fool ، وأدركت ذلك فجأة.
سوف أنظر إلى الفكرة مرة أخرى. الدالة المكافئة y = a*x*x + b*x + c ، حيث لا تساوي A 0 و A و B و C هي ثوابت. X و Y هي إحداثيات البارابولا التي تمر ؛ يحدد A الاتجاه الافتتاحي للمادة ، مع فتح A> 0 للأعلى وفتح A <0 لأسفل. من الواضح أن فتحة تامول للمادة تدوير ، ويحدد أيضًا حجم الفتحة. كلما كانت القيمة أصغر ، كلما كانت الفتحة أكبر ، كلما كانت البارابولا أكثر سلاسة ، والعكس صحيح. لذلك ، يمكن تخصيص قيمة A ، وهو ما يعادل معرفة إحداثيين (نقطة البداية ونقطة النهاية ، أي العنصر اليسرى والأعلى). العثور على رقمين غير معروفين ، يمكنك تعلم كيفية استخدام رياضيات المدرسة الثانوية ، والمعادلات التربيعية الثنائية.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
يُعرف A ، حيث يحل محل الإحداثيين المعروفين [x1 ، y1] [x2 ، y2] يمكن أن يؤدي إلى قيم B و C ، والعلاقة المقابلة بين x و y موجودة.
بغض النظر عما إذا كانت فتحة المكافئ لأعلى أو لأسفل ، تظل سرعة العنصر المتحرك في الاتجاه الأفقي دون تغيير ، أي أن القيمة اليسرى تتغير بسرعة ثابتة. يمكنك ضبط وقت حركة المكافئ ر. سرعة العنصر في الاتجاه الأفقي هي speedx = (x2 - x1)/t. تعيين مؤقت ، والذي يتم تنفيذه كل 30 مللي ثانية. القيمة اليسرى بعد كل مرة يتم تنفيذ المؤقت هي X = speedx * تم تنفيذ المؤقت. استبدل الوظيفة y = a*x*x + b*x + c للحصول على القيمة العليا. نظرًا لأن كل هذا الحساب يعتمد على ترجمة تنسيق نقطة البداية إلى الأصل (يتم ترجمة نقطة النهاية أيضًا وفقًا لذلك) ، عند تحديد القيمة اليسرى/العليا للعنصر المتحرك ، يجب إضافة القيمة اليسرى/العليا الأولية لعنصر نقطة البداية. للحصول على التفاصيل ، يرجى التحقق من الرمز التجريبي في F12.
الرمز الرئيسي:
/** * JS parabola Animation * param {[object]} Origin تم الانتهاء من تنفيذ parabola] */ var parabola = function (config) {var b = 0 ، vertal = 15 ، timer = null ، x1 ، y1 ، x2 ، y2 ، OriginX ، Originy ، diffx ، diffy ؛ this.config = config || {} ؛ // start point this.origin = $ (this.config.origin) || null ؛ // end point this.target = $ (this.config.target) || null ؛ // element of motion this.element = $ (this.config.Element) || null ؛ // Curve radian this.a = this.config.a || 0.004 ؛ // وقت الحركة (ms) this.time = this.config.time || 1000 ؛ this.init = function () {x1 = this.origin.offset (). left ؛ y1 = this.origin.offset (). TOP ؛ x2 = this.target.offset (). اليسار ؛ y2 = this.target.offset (). TOP ؛ OriginX = x1 ؛ أولي = y1 ؛ diffx = x2-x1 ؛ diffy = y2-y1 ، speedx = diffx/this.time ؛ // من المعروف أنه وفقًا لوظيفة parabola y = a*x*x + b*x + c ، تتم ترجمة نقطة انطلاق المكافئ إلى الأصل الإحداثي [0 ، 0] ، ويتم ترجمة نقطة النهاية وفقًا لذلك. ثم تمر المكافئ عبر الأصل [0 ، 0] ويحصل على C = 0 ؛ // بعد ترجمة نقطة النهاية ، يتم الحصول عليها: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // أي diffy = a*diffx + b*diffx ؛ // يمكن العثور على قيمة ثابت b = (diffy - this.a*diffx*diffx)/diffx ؛ this.element.css ({left: x1 ، top: y1}) إرجاع هذا ؛ }. if ('placeholder' in testDiv) {['' ، 'ms' ، 'moz' ، 'webkit']. } this.move = function () {var start = new date (). getTime () ، movestyle = this.movestyle () ، _this = this ؛ timer = setInterval (function () {if (new date (). getTime () - start> _this.time) {clearinterval (timer) ؛ _this.Element.css ({left: x2 ، top: y2}) typeof _this.config.callback === 'function' & & _this.call ؛ } x = speedx*(date new (). getTime () - start) ؛ Window.RequestAnimationFrame (_this.element [0]. } this.init () ؛ }ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.