القواعد القديمة ، قم أولاً بتطبيق رمز المصدر. يمكن النقر فوق منطقة الصورة ، وسيبدأ الرسوم المتحركة من موضع النقر.
لقد حدث هذا التأثير في الأصل قبل ثلاث سنوات ، لكن تم القيام به مع علامات DIV التي لا حصر لها. في الآونة الأخيرة ، أريد أن أتعلم إلهًا عظيماً مع CSS النقي لتعلم تأثير CSS.
تحضير1. أولاً وقبل كل شيء ، قم بإعداد عدد من الصور من نفس الحجم. CSS). من أجل تسهيل الاستخدام ، أضف هذه الصور إلى عنصر مخفي في HTML للاستخدام لاحقًا.
<div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './ الصور/e.jpg '/> </viv>
.hide {display: none ؛}2. أدخل قماش قماش في HTML ، ويتم تحديده حسب الحجم ، ولكن يجب التأكد من أنه يتسق مع عرض وارتفاع موارد الصورة. حجم القماش في هذا المثال هو 800 * 450.
<canvas id = عرض mycanvas = 800 ارتفاع = 450> لا يدعم متصفحك القماش <//canvas>
3. الكود الأساسي هو ما يلي ، احصل على كائن السياق من القماش ؛
var ctx = document.queryselector ('#mycanvas'). سكتة دماغية ()؛ ينجزأعتقد أن الكثير من الناس يمكنهم الفهم بسرعة بعد مشاهدته.
ثم قبل شرح الكود المصدري ، دعنا نراجع استخدام وظيفة DrawImage في القماش. نظرًا لأننا بحاجة إلى استخدام المعلمات التسعة لهذه الوظيفة ، فهناك العديد من المعلمات ، ونحن بحاجة إلى وضع المعنى والكائن المرجعي لهذه المعلمات.
context.drawImage (IMG ، SX ، SY ، Swidtht ، Sneight ، X ، Y ، العرض ، الارتفاع ، الارتفاع) ؛
· IMG: الصورة أو القماش أو الفيديو الذي يحدد استخدامه
· SX: موضع الإحداثيات X لقطع القطع
· SY: موضع الإحداثيات Y لقطع القطع
· Swidth: عرض صورة الصورة المقطوعة
· سقوط: تم قطع ارتفاع الصورة
· x: ضع موضع الإحداثيات x للصورة على القماش
Y: ضع موضع إحداثيات Y للصورة على القماش
· العرض: عرض الصورة التي تريد استخدامها
· الارتفاع: ارتفاع الصورة التي تريد استخدامها
أعتقد أنه حتى إذا تم إدراج المعلمات أعلاه ، فلا يزال من السهل الإغماء عند التطوير. فيما يلي نصائح للجميع: بالإضافة إلى المعلمة IMG الأولى ، هناك 8 معلمات ، منها مرجع الحجم للمعلمات الأربعة الأولى هو الخريطة الأصلية ، أي 1920 * 1080 ؛
تذكر هذه الصيغة ، ليس من السهل إغماءها عندما تكون فعلية.
قسمةالقسم هو ضبط حجم الوحدة في القماش. . عدد الاتفاقيات ليس بالضرورة الحد الأقصى لعدد أو الحد الأدنى للتقسيم ، لأن التأثير المفرط ليس مبهرًا ، وسيكون الأداء الصغير تحت الضغط.
مع أخذ حجم 800 * 450 في هذا المثال ، اخترت 25 * 25 كحجم الوحدة هنا ، أي أن القماش بأكمله يتكون من 32 * 18 في إجمالي 576 خلية. بعد تقسيم الشبكة ، نحتاج إلى حساب بعض المعلمات الأساسية.
var imgw = 1920 ، صور العرض/الارتفاع الأصلي = 1080 ؛ أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا أنا I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I = imgh /i ؛
يتم تعيين المجموعات الثلاثة行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度المعلمات من قبل.行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. إذا تم عكس ذلك ، فسيتم فرضه لاحقًا. المجموعة الأخيرة من DW/DH هي حجم الخلية الذي يوسع ويتحول إلى الصورة الأصلية ، والتي تستخدم لصور الخياطة اللاحقة.
بالترتيب ، نرسم الخلية أولاً في الزاوية اليسرى العلوية. نظرًا لأن原图裁切位置ووضعه画布摆放位置(0 ، 0) ، الأسهل.
CTX.DrawImage (IMG ، 0 ، 0 ، DH ، DH ، 0 ، 0 ، DH) ؛
ناجح. إذن كيف تكتب السطر الثاني الآن ، كيف تكتب الصورة في العمود الثالث؟
var i = 2 ، j = 3 ؛
ما يسهل الخلط بينه هو أن裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.
للراحة ، يتم تغليف وظيفة خالصة عن التقديم.
وظيفة handledraw (img ، i ، j) {ctx.drawimage (img ، dw*j ، dh*i ، dh ، dw*j ، dh*i ، dh) ؛}بعد تغليف طريقة التقديم ، يتم تقديم الصورة بأكملها من خلال الدورات المزدوجة من الصفوف والأعمدة.
ctx.beginpath () ؛ () ؛
مثالي ~. في الواقع ، يتم الانتهاء من الجزء الأساسي من هذه الخطوة. لأنه في هذا الوقت ، تم دمج هذه الصورة بالفعل مع مئات الخلايا ، ويمكن للجميع إعطائها تأثيرًا متحركًا مع خيال Tianma.
قبل مشاركة خوارزمية الرسوم المتحركة الخاصة بك ، اسمحوا لي أن أريكم ما هو الإملاء الخطأ ~
إنه رائع بعض الشيء ~
خوارزمية الرسوم المتحركةدعنا نشارك خوارزمية الرسوم المتحركة الخاصة بي. كيف يتم تحقيق التأثير في العرض التجريبي؟
نظرًا لأن كل خلية تصنف الرقم (I ، J) على شبكة اللوحة القماشية. آمل أنه بعد إحداثيات (أنا ، ي) ، يمكننا الحصول على جميع النقاط حول الإحداثيات من بالقرب من بعيد. الصورة المحددة أدناه ، كسول جدًا لإنشاء صورة ~
على سبيل المثال ، الإحداثيات هي (3 ، 3)
هناك 4 نقاط على مسافة 1 (2 ، 3) ، (3 ، 4) ، (4 ، 3) ، (3 ، 2) في المجموع ؛
هناك نقاط بمسافة 2 (1 ، 3) ، (2 ، 4) ، (3 ، 5) ، (4 ، 4) ، (5 ، 3) ، (4 ، 2) ، (3 ، 1) ، (2) ، (2) 2) هناك 8 في المجموع ؛
..........
من السهل أيضًا العثور على خوارزمية هذه السلسلة من النقاط ، لأن行号差值的绝对值+ 列号差值的绝对值= 距离، والتحديد:
وظيفة contaround (i ، j ، dst) {var resarr = [] ؛ ) ؛ ؛}}} إرجاع resarr ؛}يتم استخدام هذه الوظيفة لإعطاء إحداثيات ومسافة معينة (DST) ، وإيجاد جميع النقاط على المسافة حول الإحداثيات للعودة في شكل صفيف. ومع ذلك ، فإن الخوارزمية أعلاه لديها قيود أقل على الحدود ، على النحو التالي:
Countaround (i ، j ، dst) {var resarr = [] ؛ ؛ = ((i i -1) && n <= (j -1)))) {resarr.push ({x: m ، y: n}) ؛}} respray resarr ؛}وبهذه الطريقة ، لدينا وظيفة نقية تحسب جميع النقاط على المسافة الثابتة المحيطة ، ثم تبدأ في إكمال عرض الرسوم المتحركة.
اكتب أولاً وظيفة المقاصة لتطهير محتوى الخلية.
HandleClear (i ، j) {ctx.clearrect (dw*j ، dh*i ، dw ، dh) ؛}أخرى هي الصورة التالية ، وأخيراً ترسم صورة جديدة إلى الطبقة الخارجية عبر SetInterval لإكمال تأثير التدرج المجزأ.
var dst = 0 ، sterialbj = setInterval (function () {var resarr = countAround (i ، j ، dst) ؛ resarr.foreach (it ، index) {handleclear (item.x ، item. y) ؛ handledraw (عنصر آخر. x ، item.y) ؛}) ؛عندما يكون طول المصفوفة التي يتم إرجاعها بواسطة العداد هو 0 ، أي أن جميع النقاط عند نقطة الإحداثيات تكون خارج الحدود ، ويتم إيقاف دورة المؤقت. في هذه المرحلة ، تم تقديم جميع التعليمات البرمجية الأساسية.
في الوقت الحاضر ، يمكن لأي إحداثيات على قماش معين نشر تأثير تبديل الصورة المجزأة من هذه النقطة إلى المحيط.
عند الدوران التلقائي ، ابدأ الرسوم المتحركة من 8 نقاط محددة مسبقًا (أربع زوايا ونقطة متوسطة من أربعة جوانب).
var randompoint = [{x: 0 ، y: 0} ، {x: i -1 ، y: 0} ، {x: 0 ، y: j -1} ، {x: i -1 ، y: j -1 } ، {x: 0 ، y: math.ceil (j / 2)} ، {x: i -1 ، y: math.ceil (j / 2)} ، {x: math.ceil (i / 2) ، y: 0} ، {x: math.ceil (i / 2) ، y: j -1}]عند النقر ، يتم حساب النقرات ، وبدء الرسوم المتحركة من النقطة.
دالة HandleClick (e) {var offsetx = e.offsetx ، Officey = E.OffSety ، j = Math.Floor (Offsetx / dw) ، i = math.floor (Offsety / DH) ، // with i ، j ، ابدأ البدء للبدء.في الوقت الحاضر ، هذا التأثير هو المرحلة التجريبية فقط.
ما سبق هو كل محتويات هذا المقال.