عندما تصبح HTML5 و CSS3 تدريجياً ، اعتدت جدًا على استخدام JS لصنع بعض الرسوم المتحركة البسيطة. لأنه على متصفحات سطح المكتب ، لا تدعم جميع CSS3. المستخدمون أيضًا غريبون للغاية. لا يمكن زراعة كل مستخدم. هناك دائمًا العديد من الأشخاص الذين يعتقدون أن Win7.Win8 ليس مفيدًا مثل XP. لكن الهاتف المحمول مختلف تمامًا ، ويدعم متصفح الهاتف المحمول HTML5 و CSS3 جيدًا. ومع ذلك ، فإن قدرة معالجة الأجهزة للهواتف المحمولة محدودة للغاية. اليوم ، عندما تكون الهواتف المحمولة ذات النواة الرباعية والكتوائية متفشية ، لا يزال هناك أشخاص يستخدمون هواتف محمولة ثنائية النواة أو أحادية النواة مثلي. على الرغم من أن JS جيدة ، إلا أنه ليس لدي الكثير من الاتصال بك ، لذلك لا يمكنني ضبط هذا الشعور بشكل جيد. يتم تشغيل تمريرات الصفحة البسيطة بسلاسة على جهاز الكمبيوتر الشخصي i7 ، ولكنه عالق وتلعك وتلعك وتلعك وتلعك على هاتفي المزدوج النواة. إنه محبط للغاية. لهذا السبب ، بحثت أيضًا لفترة طويلة وقرأت الكثير. أخيرًا ، قبل تسوية ، وجدت طريقة بسيطة نسبيًا: استخدم CSS3 لتنفيذ الرسوم المتحركة.
في الماضي ، بالإضافة إلى وظائف الرسوم المتحركة الخاصة بـ JQuery ، تم استخدام SetTimeOut و SetInterval لتغيير الهامش والعرض والأعلى وغيرها من الخصائص لعنصر ما. هذا هو بالضبط ما يجعلني مرتبكًا.
بادئ ذي بدء ، لا يمكن تنفيذ SetTimeOut ، SetInterval طوال الوقت فقط عن طريق تعيين 0 مللي ثانية. لقد اكتشفت هذا السر بطريق الخطأ أثناء تصحيح الأخطاء في iscroll. اتضح أن حساب تأخير المؤقت يعتمد على ساعة المتصفح المدمجة ، ودقة الساعة تعتمد على تواتر تحديثات الساعة. كان الفاصل الزمني للتحديث بين IE8 وإصدارات IE السابقة 15.6 ميلي ثانية. لقد انتهى الأمر ، أعتقد أنه يؤدي إزاحة 1 بكسل في 10 مللي ثانية ، ولا يمكنه القيام بذلك في الوقت المحدد.
وماذا يحدث مع البطاقة؟ البطاقة ، لأن الرمز ليس مكتوبًا جيدًا. بعد كل شيء ، فإن JS متاح واحد ، وبمجرد أن تكون هناك إجراءات تستغرق وقتًا طويلاً ، قد لا تستجيب واجهة المستخدم. على الرغم من أننا استخدمنا setTimeOut ، إلا أن SetTimeout هو الذي يجعلنا نبدو وكأن الواجهة غير ميتة ، لكن الإجراء ليس سلسًا. لأنه بعد تنفيذ SetTimeout هذه المرة ، قبل التنفيذ التالي ، قد يتم مواجهة إجراء آخر يستهلك الوقت في الفاصل الأوسط ، وبالتالي فإن تنفيذ SetTimeout سيكون غير محدود. ثم ماذا؟ بطاقة! ومع ذلك ، هناك سبب آخر يجعل البطاقة يمكن أن تؤدي بطريق الخطأ إلى تشغيل تخطيط المتصفح (أي: Relayout) عند تغيير السمة الأصلية. هذا السؤال يستغرق وقتًا طويلاً ، لكنه يستغرق وقتًا طويلاً. إنه يستغرق وقتًا طويلاً ، ولكن يمكن تجاهله غالبًا. ولكن في كثير من الأحيان لا يمكن تجاهلها.
بالإضافة إلى الفقرتين أعلاه ، هناك مشكلة أخرى ، وهي ، على العديد من الهواتف المحمولة ، تبدو دائمًا أنها إطار تلو الآخر ، وقد يكون أيضًا إطارًا طويلًا وقصيرًا. هذا إيقاع يمكن أن يدمر الجميع. لماذا هذا يحدث؟ لا يزال له علاقة بتأخير settimeout. تجاهل الإطارات. تتضمن هذه المشكلة تردد تحديث الشاشة. انها حقا معقدة للغاية.
أخيرًا ، تم اختيار CSS3 ، غيرت JS ديناميكي سمات العنصر ، وتم استخدام الانتقال للتحكم في وقت تنفيذ الرسوم المتحركة. على سبيل المثال:
نسخة الكود كما يلي:
<div id = "test" style = "Transition: All 1S Ease ؛ Width: 100px ؛" >/div>
JS:
نسخة الكود كما يلي:
$ ("#test"). العرض (200) ؛
وبهذه الطريقة ، بعد ثانية واحدة ، سيصبح عرض هذا div 200 بكسل. ليس مثل Sun Wukong يصبح أكبر في لحظة ، ويندفع ببطء قدميه دون أن يتعثر أو توقف. وهناك ميزة لاستخدام الرسوم المتحركة CSS ، لا تتأثر بتوقيتات JS التي تستغرق وقتًا طويلاً. على الرغم من أن خيوط واجهة المستخدم وخيوط JS حصرية بشكل متبادل في المتصفحات ، فإن هذا غير صالح للرسوم المتحركة CSS ، ويمكن للعديد من المتصفحات أيضًا تمكين تسريع الأجهزة (مثل Chrome). على الرغم من أن إعادة وضع المتصفح ليست واضحة للغاية في المواقف العادية ، إلا أنه ينبغي تجنب إعادة الطلاء على نطاق واسع. لذا أضف -webkit -transform: Translatez (0) ؛ أو -webkit -transform: Translate3D (0،0،0) ؛ بحيث سيجعل المتصفح هذه الطبقة بشكل مستقل. حتى لو كانت إعادة الطلاء أمرًا لا مفر منه ، فإن المنطقة أصغر. إنه بالفعل قرار حكيم للغاية لاستخدام الترجمة لاستبدال الهامش.
أخيرًا ، ستؤدي بعض التغييرات الشائعة إلى ظهور خصائص الترحيل:
نسخة الكود كما يلي:
عرض
ارتفاع
حشوة
هامِش
عرض
عرض الحدود
حدود
طلى
ما سبق هو كل المحتوى الموضح في هذه المقالة. آمل أن يكون من المفيد للجميع تعلم JavaScript و CSS3. في الوقت نفسه ، يرجى إضافة بعض أوجه القصور والفهم.