اليوم تعلمت لفترة وجيزة الرسوم المتحركة الرياضية JS ، وسجلت تجربتي وشاركتها مع الجميع.
فيما يلي النتائج التي قمت بفرزها.
نقطة المعرفة 1: سرعة الرسوم المتحركة.
1. أولاً ، الخطوة الأولى هي تنفيذ الرسوم المتحركة للحركة السريعة ، وتغليف وظيفة ، والمعرفة المستخدمة هي setInterval (function () {
نسخة الكود كما يلي:
Odiv.Style.Left = odiv.offsetleft+10+"px" ؛
} ، 30).
فيما يتعلق لماذا يتم استخدام OffsetLeft هنا ، فأنا على وجه الخصوص ، والمعلومات المفيدة التي حصلت عليها هي:
أ.
ب. لكن اليسار قابلة للقراءة وقابلة للكتابة ، في حين أن الأطراف القراءة فقط ؛
ج. و OffsteLft ليس له وحدة ، ولا يحتوي على PX عند الحصول على موضع العقدة الفرعية.
أقوم بتمديد المعرفة الأخرى هنا. شكرًا لك على هذا المدون ، http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120137285729561/.
2. دع العقدة المتحركة تتوقف. هنا نستخدم عبارة if للتحقق. إذا كانت OffsetLeft == 0 ، ClearInterval (Timer) ، يجب تهيئة المؤقت هنا = NULL مقدمًا ، ثم تعيين الرسوم المتحركة السابقة للحركة إليها.
3. هناك مشكلة هنا. إذا تم تشغيل الحركة مرة أخرى قبل نهاية الحركة ، فإن سرعة الحركة ستتراكم. هنا ، طالما تبدأ الحركة بأكملها ، فإن ClearInterval (مؤقت) يكفي.
4. اضبط تأثير الحركة والإزالة وضبط المعلمات للحركة ، والآخر هو سرعة السرعة والآخر هو الموضع المستهدف. وجدنا أن السرعة يمكن الحكم عليها أيضًا من خلال موقف ITArget ، لذلك هناك حاجة إلى معلمة واحدة فقط.
نقطة المعرفة 2: تدرج الشفافية
1. في الواقع ، يشبه الآن فقط ، باستثناء أن قيمة Itarget شفافة ، والعملية هي مسح المؤقت وتشغيل مؤقت آخر لإصدار أحكام ، إلخ.
2. تحديد معلمة ألفا = الشفافية ، لاحظ أنه يجب كتابة المؤقت على هذا النحو:
نسخة الكود كما يلي:
ألفا+= السرعة ؛
Odiv.Style.filter = 'alpha (التعتيم:'+alpha+')' ؛ // هذه طريقة مهمة للغاية ، يرجى ملاحظة أنه مكتوب مثل هذا
Odiv.Style.Opacity = alpha/100 ؛ // احرص على ألا ينسى أن تقسم على 100
3. ما سبق كلها أنماط في الخط.
نقطة المعرفة الثالثة: حركة التخزين المؤقت
1. حركة التخزين المؤقت تعني أنه كلما زادت المسافة ، كلما زادت السرعة ، وأصغر المسافة ، كلما كانت السرعة الأصغر ، هي السرعة المرتبطة بالمسافة.
2. وفقا للبيان أعلاه ، يتم إعادة تعريف السرعة. السرعة هي 0 في البداية ، والآن:
نسخة الكود كما يلي:
var speed = itarget-odiv.offsetleft ؛
إعادة تعريف المؤقت:
نسخة الكود كما يلي:
Odiv.Style.Left = Odiv.offSetLeft+Speed+'Px' ؛
في هذا الوقت ، وجدنا أن السرعة كانت عالية جدًا ، لذلك يمكننا أن نفعل ذلك على هذا النحو:
نسخة الكود كما يلي:
var speed = (iTarget-odiv.offsetleft)/10 ؛
3. ستكون هناك مشكلة خطيرة في هذا الوقت. نظرًا لأن الحد الأدنى للوحدة من الشاشة هو PX ، ستظهر القيمة اليسرى النهائية على أنها عشرية ، ولن تكون ITARGET هي الهدف. يمكن حلها بالحكم. يجب تقديم Math.floor () هنا ، والتي تدور حولها ، وسيظهر Math.ceil () أيضًا ، وهو ما يدور. بعد تحديد السرعة ، نكتب هذا:
نسخة الكود كما يلي:
السرعة = السرعة> 0؟ Math.ceil (السرعة): Math.Floor (السرعة) ؛
سيضمن ذلك أن تكون السرعة عددًا صحيحًا وأنها 0 في القيمة الحرجة.
نقطة المعرفة 4: حركة متعددة الكائنات
1. احصل أولاً على جميع الكائنات ، وتشكيل صفيف ، ثم استخدم حلقة للقيام بذلك (كيف الكلاسيكية هذه الطريقة!) ، وأضف أحداث العقدة في الحلقة ، واستخدم هذا لاستبدال العقدة الحالية في الوظيفة ، على سبيل المثال: startMove (هذا ، itarget) ، starmove (OBJ ، itarget) عند تحديد الوظيفة.
2. عند أخذ عرض العرض الحالي ، يجب عليك استخدام قيمة OBJ.
3. عندما يتحرك الماوس بسرعة كبيرة ، لا يمكن استعادة عرض العقدة إلى حالتها الأصلية. وذلك لأن المؤقت هو مؤقت يستخدمه الجميع. قامت العقدة التالية بمسح المؤقت قبل أن تعود العقدة السابقة إلى حالتها الأصلية. الحل هو إضافة فهرس إلى كل عقدة ، وهو إضافة adiv [i] .timer = null إلى ما سبق للحلقة ؛ ثم حدد الوظيفة لاستبدال المؤقت بـ OBJ.Timer. لذلك ، يجب أن نولي اهتمامًا لحقيقة أن شيئًا ما يحدث عند مشاركة المؤقت.
4. في حركة الشفافية ، يحل Alpha محل السرعة ، ولكن حتى إذا لم يتم مشاركة المؤقت ، فإن حركة كائنات متعددة سيكون لها مشاكل. وذلك لأن ألفا شائع ، مما يتسبب في تمزيق كل كائن. الحل هو تعيين ألفا لكل عقدة في حلقة مثل مؤقت.
ملخص: حل قضايا الصراع ، إما تهيئة أو تخصيص.
نقطة المعرفة 5. الحصول على الأسلوب
1. في مؤقت يغير عرض العقدة (تحرك إلى حد كبير ، إزالة صغيرًا) ، إذا قمت بإضافة حدود إلى العقدة ، فهي أصغر من العقدة المستهدفة عند نقلها وأكبر من العقدة المستهدفة عند نقلها. انتبه إلى Width+Padding+Scrollbar (Scrollbar)+الحدود ، وبالتالي فإن السبب هو أن كل إزاحة ستزيد من الحدود*2- (قيمة كل انخفاض في المؤقت).
2. الحل للمشكلة أعلاه هو كتابة العرض في السطر واستخدام Parseint (Odiv.Style.width) بدلاً من التعويض ، ولكن لا يمكن دائمًا كتابته في السطر ، لذلك نحدد وظيفة للحصول على نمط السلسلة:
نسخة الكود كما يلي:
وظيفة getStyle (obj ، attr) {
if (obj.currentStyle) {
إرجاع OBJ.CurrentStyle [attr] ؛ // أي متصفح
}
آخر{
إرجاع getComputerstyle (OBJ ، false) [attr] ؛ // متصفحات أخرى
}
}
3. بالنسبة لحجم الخط ، هناك طريقة للكتابة فقط في الحجم في JS.
نقطة المعرفة 6: أي قيمة سمة
1. جميع الإزاحة- سيكون لها حشرات صغيرة. استخدم وظيفة getStyle. غالبًا ما تستخدم هذه الوظيفة مع Parseint () وعادة ما يتم حفظها مع المتغيرات.
2. عند كتابة نمط.
3. لتعديل قيمة السمة للكائنات المتعددة ، يمكنك تغليف النمط كمعلمة ، بحيث تتضمن وظائف سمات الكائنات المتعددة قيم السمة الثلاث (OBJ ، attarget).
4. إطار الحركة أعلاه غير مناسب لتغيرات الشفافية ، لأن الشفافية كلها عشرية. لسببين ، الأول هو parseint ، والثاني هو attr = ...+px. هنا يمكننا استخدام تفسير if لمعالجة الشفافية بشكل منفصل ، واستبدل parseint بـ parsefloat ، وإزالة PX.
5. يحتوي الكمبيوتر نفسه على خلل ، 0.07*100 لا يساوي 7 ، لذلك نقدم وظيفة هي Math.Round () ، وهي قيمة دائرية.
نقطة المعرفة 7: حركة السلسلة
1. وضع إطار MOVE.JS.
2. تمرير في وظيفة رد الاتصال fn () واستخدم إذا للحكم. إذا كان هناك fn () ، ثم قم بتنفيذ fn ().
نقطة المعرفة 8: التمرين المتزامن
1. إذا تمت كتابة وظيفتين للحركة للتحكم في الحركة المتزامنة ، فسيحدث الكتابة فوق الوظيفة.
2. استخدم JSON كنقطة معرفة. تستخدم حلقة JSON لـ (I في JSON) ، ومعلمات وظيفة الحركة هي OBJ و JSON و FN.
3. لا توجد قيمة لـ Itarget ، ويتم استبدالها بـ JSON [ATTR].
بعد كتابة هذا ، انتهى الأمر تمامًا. أتمنى أن يعجبه الجميع. آمل أيضًا أن يكون من المفيد للجميع تعلم الرسوم المتحركة الرياضية JS.