วิธีสร้างแอนิเมชั่นเว็บโค้ดที่สวยงามด้วย Mo.JS

หากคุณกำลังมองหา เริ่มต้นเว็บไซต์ของคุณเอง , แอนิเมชั่นที่ดูสวยงามสามารถทำให้มันเปล่งประกายได้ มีหลายวิธีในการบรรลุเป้าหมายนี้ จากเพียง สร้างภาพเคลื่อนไหว GIF จากภาพยนตร์ที่มีอยู่จนถึงการเรียนรู้ที่จะสร้างของคุณเองตั้งแต่เริ่มต้นด้วยซอฟต์แวร์เช่น เครื่องปั่น หรือ มายา .

นอกจากนี้ยังมีไลบรารี่สำหรับสร้างแอนิเมชั่นโดยทางโปรแกรม ในอดีต ผู้เขียนโค้ดเว็บใช้ jQuery เพื่อสร้างแอนิเมชั่นอย่างง่าย แต่เมื่อเว็บพัฒนาและ HTML5 กลายเป็นมาตรฐานใหม่ ตัวเลือกที่สดใหม่ปรากฏขึ้น ไลบรารี CSS สำหรับแอนิเมชั่นมีประสิทธิภาพอย่างไม่น่าเชื่อภายใต้เฟรมเวิร์กใหม่ ควบคู่ไปกับไลบรารี JavaScript ที่ออกแบบมาโดยเฉพาะสำหรับแอนิเมชั่นเวกเตอร์ในเบราว์เซอร์

---

---

วันนี้เราจะมาดู mo.js หนึ่งในเด็กรุ่นใหม่ในการสร้างภาพที่สวยงามจากโค้ด เราจะพูดถึงฟังก์ชันพื้นฐานสองสามอย่าง ก่อนที่จะสร้างชุดแอนิเมชั่นปฏิกิริยาของผู้ใช้ที่สร้างรูปแบบที่สวยงาม

ใส่ Mo.js

Mo.js เป็นห้องสมุดสำหรับสร้างกราฟิกเคลื่อนไหวสำหรับเว็บอย่างง่ายดาย ได้รับการออกแบบมาเพื่อทำให้การสร้างสิ่งที่สวยงามเป็นเรื่องง่ายสำหรับผู้ที่ไม่เข้าใจโค้ดมากเกินไป ในขณะที่ให้โปรแกรมเมอร์รุ่นเก๋าค้นพบด้านศิลปะที่พวกเขาไม่เคยรู้มาก่อน ตามชื่อของมัน มันขึ้นอยู่กับภาษาการเขียนโปรแกรม JavaScript ยอดนิยม แม้ว่าจะมีการใช้งานในลักษณะที่ทุกคนสามารถเลือกพื้นฐานได้อย่างง่ายดาย

ก่อนที่เราจะไปไกลกว่านี้ เรามาดูกันว่าเราจะสร้างอะไรในวันนี้:

เราจะใช้ CodePen สำหรับโปรเจ็กต์ของวันนี้ เพราะมันทำให้เราทำงานได้ทุกอย่างในหน้าต่างบราวเซอร์เดียวกัน หากคุณต้องการ คุณสามารถทำงานใน an บรรณาธิการที่คุณเลือก แทนที่. หากคุณต้องการข้ามบทแนะนำทีละขั้นตอน โปรดดูโค้ดแบบเต็มได้ที่นี่

ตั้งค่าปากกาใหม่ แล้วคุณจะพบกับหน้าจอนี้:

---

---

ก่อนที่เราจะเริ่มต้น คุณจะต้องทำการเปลี่ยนแปลงสองสามอย่าง คลิกที่ การตั้งค่า ที่ด้านบนขวา แล้วไปที่ JavaScript แท็บ

เราจะใช้ Babel เป็นตัวประมวลผลก่อนรหัสของเรา ดังนั้นให้เลือกสิ่งนี้จากเมนูแบบเลื่อนลง Babel ทำให้ JavaScript เข้าใจง่ายขึ้นเล็กน้อยพร้อมกับให้ ECMAScript 6 รองรับเบราว์เซอร์รุ่นเก่า ถ้าคุณไม่รู้ว่ามันหมายถึงอะไร ไม่ต้องกังวล ,ก็จะทำให้ชีวิตเราง่ายขึ้นนิดหน่อยค่ะ

---

---

เราจำเป็นต้องนำเข้าไลบรารี mo.js ลงในโครงการด้วย ทำได้โดยการค้นหา mo.js ใน เพิ่มสคริปต์ภายนอก/ปากกา ข้อความพร้อมท์และเลือก

เมื่อทั้งสองสิ่งนี้เข้าที่แล้ว คลิก บันทึกและปิด . เราพร้อมที่จะเริ่มต้นแล้ว!

รูปร่างพื้นฐานด้วย Mo.js

ก่อนที่เราจะเริ่มต้นกับกราฟิก เรามาทำอะไรบางอย่างเกี่ยวกับพื้นหลังสีขาวที่ทำให้ไม่เห็นในบานหน้าต่างมุมมองก่อน เปลี่ยนคุณสมบัติสีพื้นหลังโดยเขียนรหัสนี้ใน CSS ขนมปัง.

body{
background: rgba(11,11,11,1);
}

การสร้างรูปร่างเป็นกระบวนการที่เรียบง่าย และแนวคิดเบื้องหลังขับเคลื่อนไลบรารีทั้งหมด มาตั้งค่ารูปร่างวงกลมเริ่มต้นกัน ใส่รหัสนี้ลงใน JS ขนมปัง:

const redCirc = new mojs.Shape({
isShowStart:true
});

ที่นี่เราได้สร้าง const คุณค่ากับชื่อ วงเวียนแดง และมอบหมายให้ a ใหม่ mojs.Shape . หากคุณเป็นมือใหม่ในการเขียนโค้ดโดยสิ้นเชิง ให้ใส่ใจกับลำดับวงเล็บที่นี่ และอย่าลืมเครื่องหมายอัฒภาคที่ส่วนท้าย!

จนถึงตอนนี้เรายังไม่ได้ส่งผ่านพารามิเตอร์ใดๆ ยกเว้น isShowStart:จริง หมายความว่ามันจะปรากฏบนหน้าจอก่อนที่เราจะกำหนดการเคลื่อนไหวใดๆ คุณจะเห็นว่าได้วางวงกลมสีชมพูไว้ตรงกลางหน้าจอ:

วงกลมนี้เป็นค่าเริ่มต้น รูปร่าง สำหรับ mo.js เราสามารถเปลี่ยนรูปร่างนี้ได้อย่างง่ายดายโดยการเพิ่มบรรทัดในโค้ดของเรา:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

ในการเพิ่มคุณสมบัติให้กับวัตถุ เราใช้เครื่องหมายจุลภาคเพื่อคั่นมัน ที่นี่เราได้เพิ่ม รูปร่าง ทรัพย์สินและกำหนดให้เป็น 'ถูกต้อง' . บันทึกปากกาของคุณ แล้วคุณจะเห็นรูปร่างเริ่มต้นเปลี่ยนเป็นสี่เหลี่ยมจัตุรัสแทน

กระบวนการนี้ในการส่งผ่านค่าไปยัง รูปร่าง วัตถุคือวิธีที่เราปรับแต่งมัน ตอนนี้เรามีสี่เหลี่ยมจัตุรัสที่ไม่ได้ทำอะไรมาก มาลองทำแอนิเมชั่นกัน

พื้นฐานของการเคลื่อนไหว

เพื่อให้ได้สิ่งที่ดูน่าประทับใจยิ่งขึ้นอีกเล็กน้อย ให้สร้างวงกลมโดยขีดสีแดงรอบๆ วงกลมโดยไม่เติมเข้าไป

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

อย่างที่คุณเห็น เราได้มอบหมาย a . ด้วย ความกว้าง ค่าของจังหวะ และ a รัศมี สำหรับวงกลม สิ่งต่าง ๆ เริ่มจะดูแตกต่างออกไปเล็กน้อย หากรูปร่างของคุณไม่อัปเดต ตรวจสอบให้แน่ใจว่าคุณไม่ได้พลาดเครื่องหมายจุลภาคหรืออัญประกาศเดี่ยวรอบ ๆ 'สุทธิ' หรือ 'ไม่มี' และตรวจสอบให้แน่ใจว่าคุณได้คลิก บันทึก ที่ด้านบนของหน้า

มาเพิ่มแอนิเมชั่นกัน ในตัวอย่างข้างต้น วงกลมสีแดงนี้จะปรากฏในตำแหน่งที่ผู้ใช้คลิก ก่อนที่จะจางหายไป วิธีหนึ่งที่เราสามารถทำให้สิ่งนี้เกิดขึ้นได้คือการเปลี่ยนรัศมีและความทึบเมื่อเวลาผ่านไป มาแก้ไขโค้ดกัน:

radius: {15:30},
opacity: {1:0},
duration:1000

โดยการเปลี่ยน รัศมี คุณสมบัติและเพิ่ม ความทึบ และ ระยะเวลา คุณสมบัติ เราได้ให้คำแนะนำเกี่ยวกับรูปร่างที่จะดำเนินการเมื่อเวลาผ่านไป เหล่านี้คือ เดลต้า ออบเจ็กต์ เก็บข้อมูลเริ่มต้นและสิ้นสุดสำหรับคุณสมบัติเหล่านี้

คุณจะสังเกตเห็นว่ายังไม่มีอะไรเกิดขึ้น นี่เป็นเพราะเราไม่ได้เพิ่ม .เล่น() ทำหน้าที่บอกให้ปฏิบัติตามคำแนะนำของเรา เพิ่มระหว่างวงเล็บท้ายและเครื่องหมายอัฒภาค แล้วคุณจะเห็นแวดวงของคุณมีชีวิตขึ้นมา

ตอนนี้เรากำลังไปที่ไหนสักแห่ง แต่เพื่อให้มีความพิเศษจริงๆ เรามาดูความเป็นไปได้ในเชิงลึกเพิ่มเติมอีกสองสามข้อ

การสั่งซื้อและการใช้งานง่ายด้วย Mo.js

ตอนนี้ ทันทีที่วงกลมปรากฏขึ้น วงกลมก็เริ่มจางหายไป สิ่งนี้จะทำงานได้ดีอย่างสมบูรณ์ แต่ควรควบคุมมากกว่านี้อีกเล็กน้อย

เราสามารถทำได้ด้วย .แล้ว() การทำงาน. แทนที่จะให้รัศมีหรือความทึบเปลี่ยนแปลง ให้รูปร่างของเราอยู่ที่จุดเริ่มต้น ก่อนเปลี่ยนหลังจากผ่านไประยะหนึ่ง

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

ตอนนี้ รูปร่างของเราจะปรากฏขึ้นพร้อมกับค่าที่เรากำหนดไว้ รอ 1,000 ms ก่อนดำเนินการใดๆ ที่เราใส่ลงใน .แล้ว() การทำงาน. มาเพิ่มคำแนะนำระหว่างวงเล็บ:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

รหัสนี้แนะนำส่วนสำคัญของแอนิเมชั่น ที่เราได้สั่งสอน มาตราส่วน เพื่อเปลี่ยนจาก 1 เป็น 2 เราได้กำหนดให้การค่อยๆ เปลี่ยนตามคลื่นไซน์ด้วย บาป.in . Mo.js มีเส้นโค้งการค่อยๆ เปลี่ยนที่หลากหลายในตัว โดยให้ผู้ใช้ขั้นสูงสามารถเพิ่มเส้นโค้งของตนเองได้ ในกรณีนี้ มาตราส่วนเมื่อเวลาผ่านไปจะเกิดขึ้นตามคลื่นไซน์ที่โค้งขึ้น

หากต้องการดูส่วนโค้งต่างๆ ที่มองเห็นได้ โปรดดูที่ easings.net . รวมสิ่งนี้เข้ากับ จังหวะความกว้าง เปลี่ยนเป็น 0 ตลอดระยะเวลาที่ตั้งไว้ และคุณจะมีผลการหายไปแบบไดนามิกมากขึ้น

รูปร่างเป็นพื้นฐานสำหรับทุกสิ่งใน Mo.js แต่เป็นเพียงจุดเริ่มต้นของเรื่องราวเท่านั้น มาดูกันเลย ระเบิด .

เต็มไปด้วยศักยภาพใน Mo.js

ถึง ระเบิด ใน Mo.js คือชุดของรูปทรงที่เล็ดลอดออกมาจากจุดศูนย์กลาง เรากำลังจะทำให้สิ่งเหล่านี้เป็นพื้นฐานของแอนิเมชั่นที่เสร็จแล้วของเรา คุณสามารถเรียกการถ่ายภาพต่อเนื่องเริ่มต้นในลักษณะเดียวกับที่คุณสร้างรูปร่าง มาทำประกายไฟกันเถอะ:

const sparks = new mojs.Burst({
}).play();

คุณสามารถดูได้โดยการเพิ่มช่องว่าง ระเบิด วัตถุและบอกให้เล่น เราได้รับเอฟเฟกต์ต่อเนื่องเริ่มต้น เราสามารถส่งผลต่อขนาดและการหมุนของการระเบิดโดยทำให้เคลื่อนไหวได้ รัศมี และ มุม คุณสมบัติ:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

เราได้เพิ่มรัศมีที่กำหนดเองและหมุนไปที่การระเบิดของเราแล้ว:

เพื่อให้ดูเหมือนประกายไฟ ให้เปลี่ยนรูปร่างที่ระเบิดใช้ และจำนวนรูปร่างที่สร้างระเบิด คุณทำได้โดยระบุคุณสมบัติของลูกที่ระเบิดออก

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

คุณจะสังเกตเห็นว่าคุณสมบัติของลูกนั้นเหมือนกับคุณสมบัติของรูปร่างที่เราได้ใช้งานไปแล้ว คราวนี้เราได้เลือกไม้กางเขนเป็นรูปเป็นร่างแล้ว รูปร่างเหล่านี้ทั้ง 50 รูปมีคุณสมบัติเหมือนกัน เริ่มจะดูดีขึ้นมาบ้างแล้ว! นี่เป็นสิ่งแรกที่ผู้ใช้จะเห็นเมื่อคลิกเมาส์

แม้ว่าเราจะเห็นแล้วว่าจังหวะสีแดงของการเริ่มต้นของเรา วงเวียนแดง รูปร่างคงอยู่นานเกินไป ลองเปลี่ยนระยะเวลาเพื่อให้ภาพเคลื่อนไหวทั้งสองพอดีกัน มันควรจะมีลักษณะดังนี้:

เรายังทำแอนิเมชั่นของเราไม่เสร็จเลย แต่ขอเวลาสักครู่เพื่อทำให้แอนิเมชันเป็นแบบโต้ตอบกับผู้ใช้

เหตุการณ์หลัก

เราจะใช้ตัวจัดการเหตุการณ์เพื่อเรียกภาพเคลื่อนไหวของเราในตำแหน่งที่ผู้ใช้คลิก ที่ส่วนท้ายของบล็อกโค้ดของคุณ ให้เพิ่มสิ่งนี้:

document.addEventListener( 'click', function(e) {
});

โค้ดชิ้นนี้จะรับฟังการคลิกเมาส์ และทำตามคำแนะนำที่อยู่ในวงเล็บสำหรับเรา เราสามารถเพิ่ม .ของเราได้ วงเวียนแดง และ ประกายไฟ คัดค้านผู้ฟังรายนี้

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

สองฟังก์ชันที่เราเรียกที่นี่คือ .tune() และ .เล่นซ้ำ() . ฟังก์ชันเล่นซ้ำจะคล้ายกับฟังก์ชันเล่น แม้ว่าจะระบุว่าภาพเคลื่อนไหวควรเริ่มต้นอีกครั้งตั้งแต่เริ่มต้นทุกครั้งที่คลิก

NS ปรับแต่ง ฟังก์ชันจะส่งผ่านค่าไปยังออบเจ็กต์ของเรา เพื่อให้คุณสามารถเปลี่ยนสิ่งต่างๆ ได้เมื่อมีการทริกเกอร์ ในกรณีนี้ เรากำลังส่งผ่านพิกัดของหน้าที่เมาส์ถูกคลิก และกำหนดตำแหน่ง x และ y ของแอนิเมชันของเราตามลำดับ บันทึกรหัสของคุณและลองคลิกบนหน้าจอ คุณจะสังเกตเห็นปัญหาสองสามข้อ

ประการแรก ภาพเคลื่อนไหวเริ่มต้นของเรายังคงปรากฏอยู่ตรงกลางหน้าจอ แม้ว่าผู้ใช้จะไม่ได้คลิกอะไรเลยก็ตาม ประการที่สอง แอนิเมชั่นจะไม่ถูกทริกเกอร์ที่จุดเมาส์ แต่ออฟเซ็ตลงและไปทางขวา เราสามารถแก้ไขทั้งสองสิ่งนี้ได้อย่างง่ายดาย

รูปร่างและการระเบิดของเรามี .เล่น() ที่ส่วนท้ายของบล็อคโค้ดที่เกี่ยวข้อง เราไม่ต้องการสิ่งนี้อีกต่อไปเพราะ .เล่นซ้ำ() กำลังถูกเรียกในตัวจัดการเหตุการณ์ คุณสามารถลบ .play() จากโค้ดทั้งสองบล็อกได้ ด้วยเหตุผลเดียวกัน คุณสามารถลบ isShowStart: จริง เช่นกัน เนื่องจากเราไม่ต้องการให้แสดงตั้งแต่เริ่มต้นอีกต่อไป

เพื่อแก้ไขปัญหาการวางตำแหน่ง เราจะต้องตั้งค่าตำแหน่งสำหรับวัตถุของเรา ดังที่คุณจะจำได้จากรูปร่างแรกของเรา mo.js วางไว้ที่กึ่งกลางของหน้าตามค่าเริ่มต้น เมื่อค่าเหล่านี้รวมกับตำแหน่งของเมาส์ จะสร้างออฟเซ็ต หากต้องการกำจัดออฟเซ็ตนี้ ให้เพิ่มบรรทัดเหล่านี้ลงในทั้ง วงเวียนแดง และ ประกายไฟ วัตถุ:

left: 0,
top: 0,

ตอนนี้ ค่าตำแหน่งเดียวที่วัตถุของเรารับคือค่าตำแหน่งของเมาส์ที่ส่งผ่านโดยผู้ฟังเหตุการณ์ ตอนนี้สิ่งต่างๆน่าจะทำงานได้ดีขึ้นมาก

ขั้นตอนการเพิ่มอ็อบเจ็กต์ลงในตัวจัดการเหตุการณ์คือวิธีที่เราจะทริกเกอร์แอนิเมชั่นทั้งหมดของเรา ดังนั้น อย่าลืมเพิ่มทุกวัตถุใหม่ลงไปตั้งแต่บัดนี้เป็นต้นไป! ตอนนี้เรามีพื้นฐานในการทำงานตามที่เราต้องการแล้ว มาเพิ่มการถ่ายภาพต่อเนื่องที่ใหญ่ขึ้นและสว่างขึ้นกันดีกว่า

รับประสาทหลอน

เริ่มจากสามเหลี่ยมหมุน แนวคิดในที่นี้คือการสร้างเอฟเฟกต์สโตรโบสโคปิกที่ถูกสะกดจิต และการตั้งค่านี้ค่อนข้างง่าย เพิ่มการระเบิดอีกครั้งด้วยพารามิเตอร์เหล่านี้:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

ทุกสิ่งทุกอย่างที่นี่น่าจะคุ้นเคยกันดีอยู่แล้ว แม้ว่าจะมีประเด็นใหม่ๆ อยู่บ้าง คุณจะสังเกตเห็นว่าแทนที่จะกำหนดรูปร่างเป็นรูปสามเหลี่ยม เราได้เรียกมันว่า a รูปหลายเหลี่ยม ก่อนกำหนดหมายเลข คะแนน มันมีเป็น 3

เรายังได้ให้ เติม ฟังก์ชันอาร์เรย์ของสีที่จะใช้งานได้ ทุก ๆ สามเหลี่ยมที่ห้าจะเปลี่ยนกลับเป็นสีแดงและรูปแบบจะดำเนินต่อไป มูลค่าสูงของ มุม การตั้งค่าทำให้การหมุนต่อเนื่องเร็วพอที่จะสร้างเอฟเฟกต์สโตรโบสโคปิก

หากโค้ดใช้ไม่ได้ผล ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มอ็อบเจ็กต์รูปสามเหลี่ยมในคลาสตัวฟังเหตุการณ์เหมือนที่เราทำกับออบเจ็กต์ก่อนหน้า

ประสาทหลอนสวย! มาเพิ่มอีกอันเพื่อติดตามครับ

เพนตากอนเต้นรำ

เราสามารถใช้บางสิ่งที่เกือบจะเหมือนกับของเรา สามเหลี่ยม วัตถุที่จะทำให้ระเบิดซึ่งตามมา รหัสที่แก้ไขเล็กน้อยนี้สร้างรูปหกเหลี่ยมหมุนที่ทับซ้อนกันสีสดใส:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

การเปลี่ยนแปลงหลักที่นี่คือเราได้เพิ่ม a ล่าช้า 500ms เพื่อที่การระเบิดจะไม่เริ่มต้นจนกว่าจะถึงหลังรูปสามเหลี่ยม โดยการเปลี่ยนค่าสองสามค่า แนวคิดในที่นี้คือการทำให้การระเบิดหมุนไปในทิศทางตรงกันข้ามกับสามเหลี่ยม ด้วยความบังเอิญที่มีความสุข เมื่อถึงเวลาที่รูปห้าเหลี่ยมปรากฏขึ้น เอฟเฟกต์สโตรโบสโคปของสามเหลี่ยมทำให้มันดูเหมือนกำลังหมุนเข้าหากัน

ความบังเอิญเล็กน้อย

มาเพิ่มเอฟเฟกต์ที่ใช้ค่าสุ่มกันเถอะ สร้างการระเบิดด้วยคุณสมบัติเหล่านี้:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

การระเบิดนี้จะสร้างเส้นที่เริ่มเป็นสีแดงและจางลงจนโปร่งใส และหดตัวลงเมื่อเวลาผ่านไป สิ่งที่ทำให้องค์ประกอบนี้น่าสนใจคือมีการใช้ค่าสุ่มเพื่อกำหนดคุณสมบัติบางอย่าง

NS องศาShift ให้วัตถุลูกเป็นมุมเริ่มต้น โดยการสุ่มสิ่งนี้จะทำให้การระเบิดแต่ละครั้งแตกต่างไปจากเดิมอย่างสิ้นเชิง ค่าสุ่มยังใช้สำหรับ รัศมี และ ล่าช้า ฟังก์ชั่นเพื่อเพิ่มเอฟเฟกต์ที่วุ่นวาย

นี่คือเอฟเฟกต์ด้วยตัวเอง:

เนื่องจากเราใช้ค่าสุ่มที่นี่ เราจึงต้องเพิ่มวิธีการพิเศษให้กับตัวจัดการเหตุการณ์ของเราสำหรับวัตถุ:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

NS สร้าง() ฟังก์ชั่นคำนวณค่าสุ่มใหม่ทุกครั้งที่มีการเรียกเหตุการณ์ หากไม่มีสิ่งนี้ รูปร่างจะเลือกค่าแบบสุ่มในครั้งแรกที่มีการเรียก และใช้ค่าเหล่านั้นต่อไปสำหรับการเรียกครั้งต่อไปทุกครั้ง สิ่งนี้จะทำลายเอฟเฟกต์โดยสิ้นเชิง ดังนั้นอย่าลืมเพิ่มสิ่งนี้!

คุณสามารถใช้ค่าสุ่มสำหรับองค์ประกอบเกือบทั้งหมดของวัตถุ mo.js และเป็นวิธีง่ายๆ ในการสร้างแอนิเมชั่นที่ไม่เหมือนใคร

วิธีดูข้อความ Instagram บนพีซี

การสุ่มไม่ใช่วิธีเดียวที่จะเพิ่มการเคลื่อนไหวแบบไดนามิกให้กับแอนิเมชั่นอย่างไรก็ตาม ลองดูที่ โซเซ การทำงาน.

เส้นที่ส่าย

เพื่อแสดงให้เห็นว่า โซเซ ใช้งานได้ดี เรากำลังจะสร้างบางอย่างที่คล้ายกับ Catherine Wheel สร้างการระเบิดใหม่ด้วยพารามิเตอร์เหล่านี้:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

ทุกอย่างที่นี่คุ้นเคยกันดีอยู่แล้ว การระเบิดสร้างเด็ก 50 คนที่เป็นเส้นสีแดงหรือสีส้ม ความแตกต่างที่นี่คือเราผ่าน ล่าช้า ทรัพย์สิน a โซเซ(10) การทำงาน. ซึ่งจะเพิ่มการหน่วงเวลา 10ms ระหว่างการปล่อยของเด็กทุกคน ทำให้ได้เอฟเฟกต์การหมุนที่เรากำลังมองหา

ฟังก์ชัน stagger ไม่ได้ใช้ค่าสุ่มใดๆ ดังนั้นคุณไม่จำเป็นต้องใช้ a สร้าง ฟังก์ชันในตัวจัดการเหตุการณ์ในครั้งนี้ มาดูทั้งหมดที่เรามีในการดำเนินการ:

เราสามารถหยุดที่นี่ได้ง่ายๆ แต่ขอเพิ่มอีกหนึ่งการระเบิดเพื่อปัดเศษโครงการนี้ออกไป

สมาร์ทสแควร์

สำหรับการระเบิดครั้งสุดท้ายนี้ เรามาทำบางสิ่งโดยใช้สี่เหลี่ยมกัน เพิ่มวัตถุนี้ในโค้ดและตัวฟังเหตุการณ์ของคุณ:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

วัตถุนี้ไม่ได้เพิ่มอะไรใหม่ให้กับสิ่งที่เราได้ทำไปแล้วในปัจจุบัน แต่รวมไว้เพียงเพื่อแสดงให้เห็นว่ารูปแบบทางเรขาคณิตที่ซับซ้อนสามารถสร้างได้อย่างง่ายดายผ่านโค้ด

นี่ไม่ใช่ผลลัพธ์ที่ตั้งใจไว้ของวัตถุนี้เมื่อสร้างขึ้นในขั้นตอนการทดสอบของการเขียนบทช่วยสอนนี้ เมื่อโค้ดรันแล้ว ก็เห็นได้ชัดว่าฉันบังเอิญไปเจอสิ่งที่สวยงามกว่าที่ฉันตั้งใจไว้!

ด้วยวัตถุสุดท้ายที่เพิ่มเข้ามา เราทำเสร็จแล้ว มาดูการกระทำทั้งหมดกัน

Mo.js: เครื่องมืออันทรงพลังสำหรับแอนิเมชั่นเว็บ

การแนะนำ mo.js อย่างง่ายนี้ครอบคลุมเครื่องมือพื้นฐานที่จำเป็นในการสร้างแอนิเมชั่นที่สวยงาม วิธีการใช้เครื่องมือเหล่านี้สามารถสร้างได้เกือบทุกอย่าง และสำหรับงานหลายๆ เว็บไลบรารี่ก็เป็นทางเลือกง่ายๆ ในการใช้ Photoshop , After Effects หรือซอฟต์แวร์ราคาแพงอื่นๆ

ห้องสมุดนี้มีประโยชน์สำหรับผู้ที่ทำงานทั้งในการเขียนโปรแกรมและการพัฒนาเว็บ การจัดการเหตุการณ์ที่ใช้ในโครงการสามารถใช้เพื่อสร้างปุ่มและข้อความโต้ตอบบนเว็บไซต์หรือในแอพได้อย่างง่ายดาย ขอให้สนุกกับมัน: ไม่มีข้อผิดพลาดมีแต่ความสุขเท่านั้น!

แบ่งปัน แบ่งปัน ทวีต อีเมล การอัพเกรดเป็น Windows 11 คุ้มค่าหรือไม่?

Windows ได้รับการออกแบบใหม่ แต่นั่นเพียงพอที่จะโน้มน้าวให้คุณเปลี่ยนจาก Windows 10 เป็น Windows 11 หรือไม่

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• JavaScript

เกี่ยวกับผู้เขียน เอียน บัคลี่ย์(216 บทความที่ตีพิมพ์)

Ian Buckley เป็นนักข่าวอิสระ นักดนตรี นักแสดง และโปรดิวเซอร์วิดีโอที่อาศัยอยู่ในกรุงเบอร์ลิน ประเทศเยอรมนี เมื่อไม่ได้เขียนหนังสือหรืออยู่บนเวที เขากำลังซ่อมแซมอุปกรณ์อิเล็กทรอนิกส์หรือโค้ด DIY โดยหวังว่าจะเป็นนักวิทยาศาสตร์ที่คลั่งไคล้

เพิ่มเติมจาก Ian Buckley

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก