เล่นเสียงและไฟ Confetti บล็อกใน AppMaster

ใน AppMaster คุณสามารถเพิ่มองค์ประกอบแบบอินเทอร์แอกทีฟให้กับเว็บแอปพลิเคชัน เช่น เอฟเฟ็กต์ภาพ เสียง และอื่นๆ ในบทความนี้เราจะแสดงวิธีใช้บล็อก Fire Confetti และ Play Sound ร่วมกัน

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

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

ก่อนอื่น มาดูกระบวนการทางธุรกิจของ Play Sound and Fire Confetti กันก่อนดีกว่า

1. เล่นเสียง - บล็อกของกระบวนการทางธุรกิจที่เล่นเสียงจากไฟล์ที่ลิงก์ที่กำหนด
URL (mp3) [สตริง] - เส้นทางไปยังไฟล์ เป็นการดีที่จะระบุพาธไปยังไฟล์จากที่เก็บไฟล์ของแอปพลิเคชัน จากนั้น URL จะมีลักษณะดังนี้ /api/_file/<ID>/download/ โดยที่ ID คือ ID ไฟล์ในแบ็คเอนด์ของแอปพลิเคชัน

2. Fire Confetti - บล็อกกระบวนการทางธุรกิจที่ยิง Confetti ให้กับผู้ใช้ปัจจุบัน

• พรีเซ็ต [vmodel] - ให้คุณเลือกแอนิเมชั่นสำหรับถ่าย confetti

- ปืนใหญ่
- ดอกไม้ไฟ
- เหมือนจริง
- หิมะ
- ความภาคภูมิใจของโรงเรียน

• Duration (ms) [integer] - ระยะเวลาของภาพเคลื่อนไหวในหน่วย ms
  
• ตำแหน่งด้านบน (%) [จำนวนเต็ม] - การเบี่ยงเบนของจุดทริกเกอร์จากด้านบนของหน้าจอ
  
• ตำแหน่งซ้าย (%) [จำนวนเต็ม] - ส่วนเบี่ยงเบนของจุดทริกเกอร์จากด้านซ้ายของหน้าจอ
  
• จำนวนอนุภาค [จำนวนเต็ม] - จำนวนอนุภาคลูกปา
  
• มุม [จำนวนเต็ม] - มุม
  
• สี [อาร์เรย์สตริง] - สีอนุภาคลูกปา
  

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

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

การตั้งค่าบล็อก Fire Confetti ที่ใช้ที่นี่:

• ที่ตั้งไว้ล่วงหน้า = ปืนใหญ่;
  
• ระยะเวลา (มิลลิวินาที) = 1;
  
• จำนวนอนุภาค = 500;
  
• มุม = 30.

อินพุตของบล็อก Play Sound ได้รับเส้นทางไปยังไฟล์เพลงที่อัปโหลดไปยังแอปพลิเคชันเซิร์ฟเวอร์ก่อนหน้านี้

ดังนั้น ในบทความนี้ เราได้อธิบายความเป็นไปได้ของการใช้บล็อกแบบโต้ตอบ Play Sound และ Fire Confetti หลังจากเข้าใจวิธีการทำงานแล้ว คุณสามารถใช้มันเองในสถานการณ์ที่ซับซ้อนมากขึ้นได้