กฎเก่าก่อนใช้ซอร์สโค้ดก่อน พื้นที่รูปภาพสามารถคลิกได้และภาพเคลื่อนไหวจะเริ่มจากตำแหน่งคลิก
ตอนแรกฉันทำเอฟเฟกต์นี้เมื่อสามปีก่อน แต่มันทำด้วยแท็ก Div นับไม่ถ้วน เมื่อเร็ว ๆ นี้ฉันต้องการเรียนรู้พระเจ้าผู้ยิ่งใหญ่ที่มี CSS บริสุทธิ์เพื่อเรียนรู้เอฟเฟกต์ CSS
การตระเตรียม1. ก่อนอื่นให้เตรียมรูปภาพที่มีขนาดเท่ากัน CSS) เพื่ออำนวยความสะดวกในการใช้งานให้เพิ่มรูปภาพเหล่านี้ลงในองค์ประกอบที่ซ่อนอยู่ใน HTML สำหรับการใช้งานในภายหลัง
<div class = 'ซ่อน'> <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 '/> </div>
.hide {display: none;}2. แทรกผ้าใบผ้าใบใน HTML และถูกกำหนดโดยขนาด แต่ต้องมั่นใจว่ามันสอดคล้องกับความกว้างและความสูงของทรัพยากรรูปภาพ ขนาดของผ้าใบในตัวอย่างนี้คือ 800 * 450
<canvas id = mycanvas width = 800 height = 450> เบราว์เซอร์ของคุณไม่รองรับ Canvas </anvas>
3. รหัสพื้นฐานมีดังนี้ก่อนอื่นรับวัตถุบริบทของผืนผ้าใบ;
var ctx = document.querySelector ('#mycanvas') จังหวะ (); ทำให้สำเร็จฉันเชื่อว่าหลายคนสามารถเข้าใจได้อย่างรวดเร็วหลังจากดูนี่คือการรวมกันของหน่วยเล็ก ๆ หลายหน่วย
จากนั้นก่อนที่จะอธิบายซอร์สโค้ดลองตรวจสอบการใช้ฟังก์ชัน DrawImage ในผืนผ้าใบ เนื่องจากเราจำเป็นต้องใช้พารามิเตอร์ 9 ของฟังก์ชั่นนี้มีพารามิเตอร์มากมายและเราจำเป็นต้องคำนึงถึงความหมายและวัตถุอ้างอิงของพารามิเตอร์เหล่านี้
บริบท DRAWIMAGE (IMG, SX, SY, Swidtht, Sheight, X, Y, ความกว้าง, ความสูง, ความสูง);
· IMG: ภาพผ้าใบหรือวิดีโอที่ระบุว่าใช้
· SX: ตำแหน่งพิกัด X ของการตัดการตัด
· SY: ตำแหน่งพิกัด y ของการตัดการตัด
· Swidth: ความกว้างของภาพของภาพตัด
· Sheight: ความสูงของภาพถูกตัด
· X: วางตำแหน่งพิกัด x ของภาพบนผืนผ้าใบ
Y: วางตำแหน่งพิกัด y ของภาพบนผืนผ้าใบ
·ความกว้าง: ความกว้างของภาพที่คุณต้องการใช้
·ความสูง: ความสูงของภาพที่คุณต้องการใช้
ฉันเชื่อว่าแม้ว่าพารามิเตอร์ข้างต้นจะอยู่ในรายการ แต่ก็ยังง่ายต่อการพัฒนา นี่คือเคล็ดลับสำหรับทุกคน: นอกเหนือจากพารามิเตอร์ IMG แรกมีพารามิเตอร์ 8 ตัวซึ่งการอ้างอิงขนาดของพารามิเตอร์ 4 ตัวแรกคือแผนที่ดั้งเดิมนั่นคือ 1920 * 1080;
โปรดจำไว้ว่าสูตรนี้ไม่ใช่เรื่องง่ายที่จะเป็นลมเมื่อมันเป็นจริง
แบ่งการแบ่งคือการตั้งค่าขนาดของหน่วยในผืนผ้าใบ . จำนวนการประชุมไม่จำเป็นต้องเป็นจำนวนสูงสุดหรือขั้นต่ำของการแบ่งเนื่องจากเอฟเฟกต์ที่มากเกินไปไม่ได้พราวและประสิทธิภาพขนาดเล็กจะอยู่ภายใต้แรงกดดัน
การใช้ขนาดของ 800 * 450 ในตัวอย่างนี้ฉันเลือก 25 * 25 เป็นขนาดหน่วยที่นี่นั่นคือผ้าใบทั้งหมดประกอบด้วย 32 * 18 ทั้งหมด 576 เซลล์ หลังจากหารกริดเราต้องคำนวณพารามิเตอร์พื้นฐานบางอย่าง
var imgw = 1920, // รูปภาพของความกว้าง/ความสูงดั้งเดิม imgh = 1080; ฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉันฉัน = conh /dh, // หน่วย /คอลัมน์หมายเลข j = conw /dw; = 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 (); (); ctx.stroke ();
สมบูรณ์แบบ ~. ในความเป็นจริงส่วนหลักของขั้นตอนนี้เสร็จสิ้นแล้ว เพราะในเวลานี้ภาพนี้รวมกับเซลล์หลายร้อยเซลล์แล้วและทุกคนสามารถให้เอฟเฟกต์ภาพเคลื่อนไหวกับจินตนาการของ Tianma
ก่อนที่จะแบ่งปันอัลกอริทึมแอนิเมชั่นของคุณให้ฉันแสดงให้คุณเห็นว่าการสะกดผิดคืออะไร ~
มันเจ๋งนิดหน่อย ~
อัลกอริทึมแอนิเมชั่นมาแบ่งปันอัลกอริทึมแอนิเมชั่นของฉันกันเถอะ ผลกระทบในการสาธิตเกิดขึ้นได้อย่างไร?
เนื่องจากแต่ละเซลล์มีหมายเลขอันดับ (i, j) บนกริดของผืนผ้าใบ ฉันหวังว่าหลังจากพิกัด (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;
-
นอกจากนี้ยังเป็นเรื่องง่ายที่จะค้นหาอัลกอริทึมของชุดของคะแนนนี้เนื่องจาก行号差值的绝对值+ 列号差值的绝对值= 距离เฉพาะ: เฉพาะ:
ฟังก์ชั่น countaround (i, j, dst) {var resarr = []; ); n <= (j+dst); ;}}} return resarr;}ฟังก์ชั่นนี้ใช้เพื่อให้พิกัดและระยะทางที่กำหนด (DST) และค้นหาคะแนนทั้งหมดในระยะทางรอบพิกัดเพื่อกลับในรูปแบบของอาร์เรย์ อย่างไรก็ตามอัลกอริทึมข้างต้นมีข้อ จำกัด ขอบเขตน้อยกว่าดังนี้:
Countaround (i, j, dst) {var resarr = []; ; n <= (j+dst); = (i i -1) && n <= (j -1))) {resarr.push ({x: m, y: n});}}} return resarr;}ด้วยวิธีนี้เรามีฟังก์ชั่นบริสุทธิ์ที่คำนวณคะแนนทั้งหมดในระยะที่คงที่โดยรอบจากนั้นเริ่มที่จะทำให้การแสดงภาพเคลื่อนไหวเสร็จสมบูรณ์
ก่อนอื่นเขียนฟังก์ชั่นการล้างสำหรับการล้างเนื้อหาของเซลล์
handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}อีกภาพหนึ่งคือภาพถัดไปและในที่สุดก็วาดภาพใหม่ไปยังเลเยอร์ด้านนอกผ่าน setInterval เพื่อให้เอฟเฟกต์การไล่ระดับสีที่กระจัดกระจายสมบูรณ์
var dst = 0, intervalBj = setInterval (ฟังก์ชัน () {var resarr = countaround (i, j, dst); resarr.foreach (It, index) {handleclear (item.x, item. y); handledraw x, item.y);}); หาก (! resarr.length) {clearinterval (Intervalobj);} dst ++;}, 20);เมื่อความยาวของอาร์เรย์ที่ส่งคืนโดย countaround คือ 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, ordicy = e.offsety, j = math.floor (Offsetx / dw), i = math.floor เพื่อเริ่มต้นในปัจจุบันเอฟเฟกต์นี้เป็นเพียงขั้นตอนการสาธิต
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้