حركة التخفيف، واسمها العلمي توين، هي اختصار للحركة العازلة. إذا كنت تريد تبديل محتوى الصفحة بشكل مريح، فاستخدم تأثيرات التلاشي. وإذا كنت تريد أن تتحرك عناصر الصفحة بشكل طبيعي، فاستخدم تأثيرات التخفيف. يمكن أن يؤدي خلط هذين الاثنين إلى إنتاج مجموعة متنوعة من المؤثرات الخاصة. شكرًا لمطوري Flash الذين أجروا الكثير من الأبحاث التمهيدية لنا، فقد قمنا بإزالته وتثبيته في قوائم وألبومات صور متنوعة. لنبدأ بأبسط الأشياء، التسارع والتباطؤ.
وبما أنه تخفيف، فإنه يجب أن يشمل المفاهيم التالية: المسافة والوقت والسرعة. يمكننا أن نتخيل أن هناك خطًا مستقيمًا L، والنقطتان A وB هما نقطتا البداية والنهاية للخط L. وهناك نقطة C تتحرك على الخط المستقيم L، من النقطة A إلى النقطة B. عادة ما يكون الوقت المطلوب غير معروف، ولكن يجب تحديد السرعة. انظر إلى الصورة أدناه، نريد أن يتحرك المربع الأخضر على الشريط المنزلق الخفيف والضيق. الزاوية اليسرى العليا من الشريط المنزلق تعادل النقطة A، الزاوية اليمنى العليا تعادل النقطة B، الزاوية اليسرى العليا من المربع تعادل النقطة C، والمسافة المتحركة هي الفرق بين عرض الاثنين . نظرًا لأن الكائن الذي نحركه له عرض، أي أن النقطة C لا يمكن أن تتطابق أبدًا مع النقطة B. لكن الوجهة الدقيقة (للتسهيل، دعنا نسميها النقطة د) ضرورية، ويجب علينا حسابها. لأنه أثناء الحركة المتسارعة، قد تتجاوز النقطة C النقطة D في أي وقت، وعندما تتجاوزها النقطة، يجب علينا إنهاء الحركة وسحب النقطة C مرة أخرى إلى النقطة D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<أتش تي أم أل>
<الرأس>
<TITLE> مستند جديد </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<اسم التعريف = "المؤلف" المحتوى = "">
<اسم التعريف = "الكلمات الرئيسية" المحتوى = "">
<اسم التعريف = "الوصف" المحتوى = "">
</الرأس>
<الجسم>
<STYLE type=text/css>#taxiway {
الخلفية: #e8e8ff؛ العرض: 800 بكسل؛ الارتفاع: 100 بكسل
}
#يتحرك {
الخلفية: #a9ea00؛ العرض: 100 بكسل؛ الارتفاع: 100 بكسل
}
</ستايل>
<معرف DIV = طريق التاكسي>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice Display="text-align:center">انقر لتحريك المربع الأخضر</P>
<نوع البرنامج النصي = نص/جافا سكريبت>
فار getCoords = function(el){
فار بوكس = el.getBoundingClientRect(),
doc = el.ownerDocument,
الجسم = الوثيقة. الجسم،
أتش تي أم أل = doc.documentElement،
clientTop = html.clientTop ||.body.clientTop ||0,.
clientLeft = html.clientLeft ||.body.clientLeft ||0,.
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop،
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
العودة { 'أعلى': أعلى، 'يسار': يسار }؛
};
var getStyle = function(el, style){
إذا (!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
إرجاع letter.toUpperCase();
});
var value = el.currentStyle[style];
(القيمة == "تلقائي")&&(القيمة = "0px" );
قيمة الإرجاع؛
}آخر{
إرجاع document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
// الوظيفة المساعدة 3، المكافئة لـ $()، لا تستخدم الرمز $ لتسميتها لأن حديقة المدونات تستخدم JQuery، مما سيؤدي إلى تعارض في التسمية.
// تتميز طريقة الجيل الجديد للاستعلام عن العناصر بقدرات التخزين المؤقت
فار مخبأ = []
فار _ = الوظيفة(المعرف){
إرجاع ذاكرة التخزين المؤقت [المعرف] || (cache[id] = document.getElementById(id));
}
فار التحرك = وظيفة(إل){
el.style.position = "مطلق";
فار تبدأ = getCoords(el).left،
المسافة = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
النهاية = البداية + المسافة،
السرعة = 10، // سرعة الحركة الأولى، بالبكسل / مللي ثانية، مضروبة ضمنيًا في 1 مللي ثانية
دلتا = 1.5،
تغيير = صحيح؛
el.onclick = الدالة(){
إذا (تغيير) {
el.innerHTML = "التسريع";
(وظيفة(){
setTimeout(وظيفة(){
el.style.left = getCoords(el).left + speed + "px";//نقل
السرعة *= دلتا؛ // مسافة التحرك التالية
إذا (getCoords(el).left >= النهاية){
el.style.left = end + "px";
تغيير = خطأ؛
دلتا = 0.85،
السرعة = 100؛
}آخر{
setTimeout(arguments.callee,25);// ابق لمدة 25 مللي ثانية في كل مرة تتحرك فيها
}
},25)
})()
}آخر{
el.innerHTML = "إبطاء";
(وظيفة(){
setTimeout(وظيفة(){
el.style.left = getCoords(el).left - السرعة + "px";//نقل
speed = Math.ceil(speed * delta); // مسافة التحرك التالية
إذا (getCoords(el).left <= تبدأ ){
el.style.left = begin + "px";
تغيير = صحيح؛
دلتا = 1.5،
السرعة = 10؛
}آخر{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
نافذة.onload = وظيفة () {
نقل(_("نقل"))
}
</النص>
</BODY></HTML>
من أجل الحصول على إحداثياتها وأحجامها على الصفحة، يتم تشغيل getCoords() و getStyle() مرة أخرى. عذرًا، لا أريد حقًا إظهار وظائفي. علاوة على ذلك، تم قطع getStyle() كثيرًا، ولم تعد قوتها قوية كما كانت من قبل.
// الوظيفة المساعدة 1
فار getCoords = function(el){
فار بوكس = el.getBoundingClientRect(),
doc = el.ownerDocument,
الجسم = الوثيقة. الجسم،
أتش تي أم أل = doc.documentElement،
clientTop = html.clientTop ||.body.clientTop ||0,.
clientLeft = html.clientLeft ||.body.clientLeft ||0,.
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop،
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
العودة { 'أعلى': أعلى، 'يسار': يسار }؛
};
// الوظيفة المساعدة 2
var getStyle = function(el, style){
إذا (!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
إرجاع letter.toUpperCase();
});
var value = el.currentStyle[style];
(القيمة == "تلقائي")&&(القيمة = "0px" );
قيمة الإرجاع؛
}آخر{
إرجاع document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}