Skip to main content

เคยเห็น Infographic เคลื่อนไหว เจ๋ง ๆ แบบนี้กันมั้ยครับ ผมเพิ่งรู้ว่ามันใช้ Drawio ทำได้ และที่ว้าวคือโครตง่าย !!!! มีวิธีทำยังไงมาดูกัน

Draw.io คืออะไร

แนะนำเครื่องมือตัวนี้ก่อนเล็กน้อยแล้วกันครับว่ามันคืออะไร แล้วปกติเอาไว้ทำอะไร? Draw.io (ปัจจุบันเปลี่ยนชื่อเป็น diagrams.net) เป็นเครื่องมือเอาไว้ทำ Diagram ที่ฮิตมากๆ ทำได้หมดทั้ง Flowchart, UML, Org Chart, Network Diagram ยัน Wireframe แถมยังใช้ฟรี ออนไลน์ได้ บน IDE ก็ทำได้ ล้ำสุด !!!

มาเริ่มทำ Animation กันเลยยยยย 🎉

1.อย่างแรกเข้าไปที่เว็บ  https://app.diagrams.net/

2.สร้าง Diagram ของเราขึ้นมา  (โดยผมขอเลือกเป็นจาก Template 😉)

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

4.เลือกเส้นที่เราต้องการจะทำ Animation 

5.แล้วสังเกตุด้านขวามือจะมีช่อง “Flow Animation” มาให้ ก็ลองจิ้มไปหนึ่งที

6.จะพบว่า “เห้ย เส้นมันไหลแล้ว” แล้วเราก็จะได้เส้นที่เป็น Animation แล้วนั่นเองงง

Tip: ถ้า Diagram ของเรามีเส้นเยอะ คลุมทั้งหมดแล้วกด Ctrl + Shift + E แล้วคลิก “Flow Animation” เส้นทั้งหมดก็จะไหลเหมือนกัน ✨

พบกับความล้ำกับไปแล้ว มาเจอกับความลำ (บาก) กันอีกนิดกับขั้นตอน

Export ไฟล์ให้เป็น GIF 💾

1.ไปที่ File > Export as > SVG

2.เอาไฟล์ SVG ไปใส่เว็บ https://html5animationtogif.com/svg-to-gif

3.ตั้งค่าความกว้าง สูง ระยะเวลาในการเล่นตามต้องการ

4.กด Convert

🎉 ได้ภาพ GIF ของ Diagram เอาไปใช้ต่อได้เลย!

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

Sirasit Boonklang

Author Sirasit Boonklang

More posts by Sirasit Boonklang

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า