بمجرد أن تسمع هذا الاسم ، ستعرف أن تأثيرات هذا الإطار يمكن تحقيقها بشكل أساسي عبر الإنترنت. في الواقع ، لا يزال إطار الحركة السابق لديه قيود ، أي أنه لا يمكن نقل العديد من القيم معًا.
فكيف تحل هذه المشكلة؟ لنلقي نظرة على الإطار الرياضي السابق
وظيفة getStyle (obj ، الاسم) {if (obj.currentStyle) {return obj.currentStyle [name] ؛ } آخر {return getComputedStyle (obj ، null) [name] ؛ }} وظيفة StartMove (obj ، attr ، itarget) {clearinterval (obj.time) ؛ obj.time = setInterval (function () {var cur = 0 ؛ if (attr == 'opitive') {cur = math.round (parsefloat (getStyle (obj ، attr)) * 100) ؛ Math.floor (speed) ؛ 'px' ؛}}} ، 30) ؛}كيفية تعديله؟ إنه في الواقع بسيط للغاية. في الأطر السابقة ، يمكنك فقط تمرير نمط واحد وقيمة واحدة في كل مرة. ثم الآن تغيير هذه إلى كائن JSON. أعتقد أن الجميع سيفهمون.
عندما نسميها ، startMove (ODIV ، {العرض: 200 ، الارتفاع: 200}) ؛ إذا لزم الأمر ، أضف وظيفة رد الاتصال. لذلك دعونا نلقي نظرة على كيفية تعديل الكود.
وظيفة StartMove (OBJ ، JSON ، fnend) {var max = 18 ؛ // يسمى كل مؤقت ، لا يوجد سوى مؤقت واحد يعمل (يتم إيقاف الموقت الحالي عند بدء الحركة) // ويتم إغلاق مؤقت الكائن الحالي أو تشغيله ، مما يمنع الصراعات مع الموقتات الأخرى على الصفحة ، بحيث لا يتداخل كل مؤقت مع بعضها البعض (OBJ.Timer) ؛ obj.timer = setInterval (function () {var bstop = true ؛ // على افتراض: لقد وصلت جميع القيم إلى (اسم var في json) {var itarget = json [name] ؛ Round Var Cur = Math.Round (GetStyle (OBJ ،)*100) ؛ السرعة> 0؟ Math.Ceil (Math.Floor (Speed) ؛ chrome} آخر {obj.style [name] = cur+speed+'px' ؛ إذا (fnend) // فقط يتم تمرير هذه الوظيفة ، اتصل {fnend () ؛ }}}} ، 20) ؛}لماذا هناك أي افتراضات حول BSTOP؟
في الواقع ، إذا أسميت StartMove (Odiv ، {العرض: 101 ، الارتفاع: 200}) ؛ يصبح العرض 101 ، وقد تم الانتهاء من الحركة ، ولم يتم الوصول إلى الارتفاع ، لكن ربما يكون قد أوقفنا الموقت الحالي. لقد انتهى التمرين وسيحدث خطأ في ظروف خاصة. لنشرح:
في الواقع ، يتطلب الأمر كل الحركة لإيقاف الموقت قبل أن يصل إلى النهاية. على العكس ، إذا لم يكن هناك شيء غير ممكن ، فقم بإيقاف تشغيله. حدد برمجيًا قيمة منطقية ، وهي صحيحة في البداية ، على افتراض
لقد وصلت جميع القيم. إذا كانت هناك قيمة لا تساوي النقطة المستهدفة ، فإن BSTOP خاطئة. بعد انتهاء الدورة بأكملها ، يكون BSTOP في حالة Ture ، مما يعني أنه تم الانتهاء من جميع الحركات ، ويتم إيقاف الموقت في هذا الوقت.
ثم تم الانتهاء من إطار الحركة هذا بشكل أساسي ، ولا ينطبق CSS2 على CSS3.
تلخيص:
تطور إطار الحركة
StartMove (Itarget) إطار الحركة
StartMove (OBJ ، Itarget) Multi-Object
StartMove (OBJ ، attr ، itarget) أي قيمة
StartMove (OBJ ، ATTR ، ITARGET ، FN) سلسلة سلسلة
StartMove (OBJ ، JSON ، FN) الرياضة المثالية
o (∩_∩) يا شكرا لك ~