تقدم هذه المقالة مثال التنفيذ للرسوم المتحركة التمريرية السلسة الحائزة على جوائز على محطة Html5 المحمولة وتشاركها مع الجميع، والتفاصيل هي كما يلي:
تحليل الاحتياجات
هاها، الأمر واضح حقًا فور تحميل الصورة الديناميكية.
إنها تتدحرج، تتدحرج، فما هي الطريقة للقيام بذلك؟ دعونا نلخص:
أتش تي أم أل الهيكل العظميإنه في الواقع بسيط جدًا. يتم استخدام <div> الخارجي كنافذة ثابتة، بينما يتحكم <ul> الداخلي في الحركة، ويعرض <li> الداخلي الرسوم المتحركة.
<div class=roll id=roll> <ul> <li>البنية الأولى</li> <li>البنية الثانية</li> <li>البنية الثالثة</li> <li>البنية الرابعة</li> li> <li>الهيكل الخامس</li> <li>الهيكل السادس</li> <li>الهيكل السابع</li> <li>الهيكل الثامن</li> </ul></div>أنماط CSS الأساسية
قم أولاً بتنفيذ نمط CSS الأساسي
*{ الهامش: 0؛ الحشو: 0؛ }.roll { الهامش: 100 بكسل تلقائي؛ العرض: 200 بكسل؛ الارتفاع: 40 بكسل؛ الحدود: 1 بكسل زبرجد صلب؛}. لفة لي { ارتفاع الخط: 20px حجم الخط: 14px؛}يمكنك إلقاء نظرة على النمط العام:
أفكار التنفيذ 1. استخدام الرسوم المتحركة في jqueryطريقة الرسوم المتحركة ().
$(selector).animate(styles,speed,easing,callback)
المعلمة:
الأنماط: المعلمة المطلوبة، نمط CSS الذي يحتاج إلى الرسوم المتحركة (استخدم تسمية حالة الجمل)
السرعة: تحدد سرعة الرسوم المتحركة
@الرقم:1000(ملي ثانية)
@string: بطيء، عادي، سريع
التخفيف: سرعة الرسوم المتحركة (التأرجح، الخطي)
رد الاتصال: وظيفة رد الاتصال بعد تنفيذ الوظيفة
$(document).ready(function(){ setInterval(function(){ // أضف مؤقتًا للتحويل كل 1.5 ثانية $(#roll).find(ul:first).animate({ هامشTop:-40px // The مسافة كل حركة},500,function(){ // يشير وقت حركة الرسوم المتحركة//$(هذا) إلى كائن ul، // بعد إعادة تعيين ul، أدخل العنصرين الأول والثاني // في موضع العنصر الأخير في ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this });ألق نظرة على التأثير:
2. استخدم الرسوم المتحركة CSS3من خلال الإطارات الرئيسية في CSS3، يمكنك الحصول على تأثير تخطي الخطوة. دعونا نلقي نظرة سريعة على الفكرة أولا.
تمهيدي1. إذا كانت جائزة مرمزة، فأنت بحاجة إلى نسخ الجائزة الأمامية إلى الخلف. وإذا تم دحرجتها واحدة تلو الأخرى، انسخ الجائزة الأولى. وإذا تم دحرجتها اثنين في اثنين، انسخ الأولى والثانية فرد .
<div class=roll id=roll> <ul> <li>البنية الأولى</li> <li>البنية الثانية</li> <li>البنية الثالثة</li> <li>البنية الرابعة</li> li> <li>الهيكل الخامس</li> <li>الهيكل السادس</li> <li>الهيكل السابع</li> <li>الهيكل الثامن</li> <li>الهيكل الأول</li > <li>البنية الثانية</li> </ul></div>
2. ثم احسب عدد المرات التي تحتاج إلى التمرير وعدد الثواني في كل مرة، المثال هو تمريران يستغرقان 5 ثوانٍ، لذا فإن وقت الرسوم المتحركة لـ CSS3 هو 5 ثوانٍ. إذن، كم عدد الأجزاء التي يجب تقسيم @keyframe إليها؟ نظرًا لأنه توقف مؤقت، فإن كل تمريرة تتطلب نسختين، ويجب أن تقفز الأخيرة بحيث تكون هناك نسخة واحدة فقط، لذلك يلزم 5 * 2 - 1 = 9 نسخ، وستعرف ذلك من خلال النظر إلى الكود:
/*لا تتم معالجة التوافق هنا*/.roll ul{ list-style: none; Animation: ani 5s Liner infinite; /*الرسوم المتحركة ani, 5s، يتم تشغيلها بسرعة ثابتة في حلقة* /}@keyframes ani{ 0 %{ الهامش العلوي : 0 } 12.5% { الهامش العلوي: 0 } 25% { الهامش العلوي: -40 بكسل } 37.5% { الهامش العلوي: -40 بكسل; } 50%{ الهامش العلوي: -80px; } 62.5%{ الهامش العلوي: -80px } 75%{ الهامش العلوي: -120px; } 87.5%{ الهامش العلوي: -120px } 100%{ الهامش- top: -160px; /*الآخر هو واحد، والذي يمكنه مقاطعة الرسوم المتحركة*/ }} متقدمإذا كان الرقم غير مؤكد، فأنت بحاجة إلى حسابه ديناميكيًا واستخدام js لإضافة @keyframes ديناميكيًا. في ذلك الوقت، طالما يمكنك حساب الفاصل الزمني ومسافة الحركة، فسيكون الأمر جيدًا.
1. احصل أولاً على طول <li>
2. ثم قم بحساب النسبة المئوية للفاصل الزمني، نظرًا لوجود توقف مؤقت، تذكر استخدام عدد الثواني × 2
3. ثم استخدم سلسلة لتهجئة @keyframes، 0~length، بما في ذلك الطول، نظرًا لوجود رقم آخر، ويتم فصل الأرقام الزوجية والأرقام الفردية.
4. استنساخ الكلمتين الأولى والثانية في <ul> إلى نهاية <ul>
5. أنشئ علامة <style> وأضفها إلى <head>
6. أضف سمات الرسوم المتحركة إلى <ul>
بدون مزيد من اللغط، دعونا نتحدث عن الكود:
function addKeyFrame(){ var ulObj = $(#roll ul), // احصل على طول كائن ul = $(#roll li).length, // احصل على طول مصفوفة li لكل = 100 / (الطول / 2 * 2 ) // احسب النسبة المئوية للفواصل الزمنية المتوسطة// قم بتسلسل السلاسل var keyframes = `/ @keyframes ani{`; for(var i = 0; i<= length; i++){ keyframes+=`${i * ; per}%{ هامش أعلى: ${i % 2 == 0 ? -i - 1) * 20}px; li:first)، // احصل على العنصر الأول liSec = liFirst.next(); // احصل على العنصر الثاني ulObj.append(liFirst.clone()).append(liSec.clone()); // أدخل العنصرين في ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); // أنشئ علامة نمط لإدراج الإطارات الرئيسية في الرأس ulObj.css(animation,ani 5s line infinite); // أضف الرسوم المتحركة CSS3 إلى UL} addKeyFrame(); 3. تنفيذ انتقال zeptoلا يحتوي Zepto على وظيفة الرسوم المتحركة إذا كنت لا تستخدم سمات CSS3، فكيف يمكنك كتابتها في JS؟
var timer,top;function roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); // أضف الأول والثاني إلى علامة <ul> ClearInterval(timer); timer = setInterval(function(){ // اضبط المؤقت var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ // احصل على الارتفاع الحالي إذا لم يكن في النهاية، فانتقل إلى الأعلى -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ // إذا وصل إلى النهاية، فسوف يصل بسرعة إلى الصفر top = 0; {-webkit-transition:none,transition:none,margin-top:top}); // أضف تأخيرًا هنا، ويجب تنفيذه في نهاية قائمة الانتظار لتجنب دمج الرسوم المتحركة أعلى -= 40; الهامش العلوي :أعلى}); },0) } },2000);}roll();إذا كان هناك طريقة أخرى، سأقوم بتحديثها من وقت لآخر في المرة القادمة. ولكن بالنسبة للجوال، يجب أن تكون هذه كافية.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.