Animotion - แอปสร้างแอนิเมชัน CSS แบบภาพ

 (cssanimotion.pages.dev)
4 คะแนน โดย GN⁺ 2023-11-26 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • แม้หัวข้อบน HN จะชี้ไปที่ แอปสร้างแอนิเมชัน CSS แบบภาพ แต่เนื้อหาหน้าเว็บที่ตรวจสอบได้เน้นไปที่ MathML Input และ LaTeX Output
  • จากเมตาดาต้าของหน้า เว็บไซต์นี้ถูกแนะนำว่าเป็นเครื่องมือออนไลน์ฟรีสำหรับ แปลง MathML เป็น LaTeX
  • ในเนื้อหาหลักยืนยันข้อมูลที่ใช้ประกอบการตัดสินใจได้ยาก เช่น ตัวอย่างการแปลงจริง ผลลัพธ์ ความแม่นยำ และขอบเขตที่รองรับ
  • ในพื้นที่แยกต่างหากยังมีลิงก์สำหรับเล่นเกม Drift Hunters Unblocked รวมอยู่ด้วย
  • จากข้อมูลที่มีอยู่ในขณะนี้ ยังยากที่จะตรวจสอบได้อย่างชัดเจนทั้งฟังก์ชันของแอปแอนิเมชัน CSS และวิธีการทำงานของตัวแปลง MathML

โครงสร้างหน้าที่ตรวจสอบได้

  • เนื้อหาส่วนบนมีเซกชัน MathML Input และ LaTeX Output
  • คำอธิบายเมตาระบุว่าเป็นตัวแปลงออนไลน์ฟรีที่ใช้ MathConvert เพื่อแปลง MathML เป็น LaTeX
  • แม้จะถูกแนะนำว่าเป็นเครื่องมือแปลงสมการสำหรับนักเรียน นักการศึกษา และนักวิจัย แต่ไม่มีช่องป้อนข้อมูลจริง ตัวอย่างสมการ หรือขอบเขตของ MathML ที่รองรับให้ดู

ลิงก์เกมที่แสดงร่วมกัน

  • ใต้ Play Online Games มีรายการ Drift Hunters Unblocked
  • รายการดังกล่าวระบุว่ามอบประสบการณ์ดริฟต์ที่สมจริงและการปรับแต่งรถยนต์ และทำงานได้ในโรงเรียนและที่ทำงาน
  • สามารถไปยังหน้าเกมได้ผ่านลิงก์ Play Now

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-11-26
ความคิดเห็นจาก Hacker News

  • ทั้งที่ CSS3 ออกมาตั้งแต่ปี 1999 แต่การที่แอปแบบนี้ยังน่าสนใจพอจะขึ้น HN ในปี 2023 แสดงให้เห็นว่า แอนิเมชันแบบอิงคีย์เฟรม ที่ใช้ง่าย เข้าถึงได้ และสามารถเขียนโปรแกรม/ตรวจสอบได้ นั้นหยุดนิ่งมานานแค่ไหน
    Flash ตายไปเมื่อราว 10 ปีก่อนและทิ้งช่องว่างไว้ สิ่งที่เหลืออยู่ก็มีแค่เปลือกอย่าง Adobe Animate กับเฟรมเวิร์กและคอมมูนิตี้รอบ ๆ ที่ค่อนข้างธรรมดา
    แอนิเมชันที่แข็งแรงบน CSS/SVG ส่วนใหญ่ยังคงเป็นคำสัญญาลอย ๆ และแม้จะมีตัวอย่างดี ๆ อยู่บ้าง แต่ก็ยังใกล้เคียงกับเทคนิคเฉพาะทางในวงแคบ

    • After Effects สามารถส่งออกแอนิเมชัน CSS/SVG/canvas ได้ด้วย ปลั๊กอิน bodymovin/Lottie ฟรี
      โดยส่วนตัวนี่เป็นวิธีหลักที่ผมใช้เวลาสร้างแอนิเมชันคีย์เฟรมและองค์ประกอบบนเว็บ
      ไม่ได้ส่งออกฟีเจอร์ทั้งหมดของ After Effects ได้ แต่สำหรับเวิร์กโฟลว์แบบนี้ มันเป็นทางออกที่ดีที่สุดและเสถียรที่สุดเท่าที่ผมเจอมา ประสบการณ์ที่เคยใช้ AE มาก่อนอาจมีผลด้วย
      ฟีเจอร์ที่รองรับในปัจจุบัน: http://airbnb.io/lottie/#/supported-features
    • ผมคิดว่าการหยุดนิ่งนี้ Adobe ต้องรับผิดชอบ เป็นส่วนใหญ่ จำได้ว่าตอน Adobe ซื้อ Macromedia มีหลายคนคาดการณ์ไว้เลยว่าจะเกิดเรื่องแบบนี้
      Adobe เป็นบริษัทที่จงใจฆ่าบางสิ่ง และ Steve Jobs ก็มีส่วนรับผิดชอบอยู่บ้าง
      ตอนนี้ดีมากที่ไม่ต้องจ่ายเงินให้พวกเขาแล้ว ขอบคุณ Serif
    • ในปี 1999 ยังไม่มี Transitions และ Transforms
      แอนิเมชัน CSS ที่ใช้คีย์เฟรมได้จริง ๆ เพิ่งเริ่มเป็นไปได้ในปี 2009 และตอนนั้นการรองรับของเบราว์เซอร์ก็ยังไม่ดี ต้องใช้ prefix อย่าง moz-, webkit- และ polyfill จำนวนมาก
      ไม่มีเหตุผลอะไรให้ฝืนใช้แอนิเมชัน CSS3 ที่ไม่ทำงานบน IE8 และในแง่การทำแอนิเมชัน UI ข้ามเบราว์เซอร์ jQueryUI นำหน้าไปไกลกว่ามาก
    • แอนิเมชันบนเว็บทำให้หน้าเว็บดีขึ้นแค่ 5% และทำให้แย่ลง 95% ดังนั้นผมเลยไม่รู้สึกว่าการหยุดนิ่งแบบนี้เป็นปัญหาใหญ่
      ทั้งชีวิตนี้ไม่อยากเห็นหน้าจอ “Loading…” ของ Flash อีกแล้ว โดยเฉพาะไม่ควรต้องรออะไรแบบนั้นเพียงเพื่อดูเมนูนำทาง
      แม้ในสภาพแวดล้อมบรอดแบนด์ที่โหลดได้ทันที เมนูนำทางก็ยังดีกว่าเมื่อไม่มีแอนิเมชัน และส่วนแนะนำฟีเจอร์ใต้ masthead ก็เช่นกัน
    • Flash ให้ความรู้สึกเหมือนเป็นเทคโนโลยีที่มาอุดช่องว่างก่อนที่อินเทอร์เน็ตที่เร็วและถูกกว่า รวมถึง การสตรีม/โฮสต์วิดีโอ จะเป็นที่แพร่หลาย
      ทุกวันนี้ก็ยังมีความต้องการอยู่ แต่กลายเป็นตลาดเฉพาะทางมากเกินไปแล้ว และผู้คนบริโภคคอนเทนต์ผ่านอุปกรณ์มือถือเป็นหลัก อีกทั้งคอนเทนต์สื่อสมบูรณ์ก็ส่งมอบในรูปแบบวิดีโอได้เพียงพอแล้ว

  • สิ่งแรกที่อยากลองทำคือ ย้ายตำแหน่งคีย์เฟรม แต่ดูเหมือนยังไม่มีเป็นฟีเจอร์

    • สามารถเปลี่ยน ตำแหน่งคีย์เฟรม ได้ด้วยการตัด/วาง

  • ชอบตรงที่ผลลัพธ์เป็น CSS ไม่ใช่โค้ด JavaScript ที่ถูกผูกกับไลบรารี

  • บนมือถือมีวิธีดี ๆ ในการให้ tooltip หรือ hint เพื่อบอกว่าไอคอนแต่ละอันทำอะไรไหม?
    ไอคอนบางอันดูไม่ออกว่าหมายถึงอะไร และถึงจะกดลองได้ แต่ตามที่พูดไว้ข้างบน มันไม่มี undo เลยทำให้รู้สึกเสี่ยง

    • เพิ่ม undo/redo แล้ว

  • เอดิเตอร์ดูใช้งานได้เป็นธรรมชาติและดีมาก
    คนที่ต้องการไทม์ไลน์ขั้นสูงขึ้นอีกหน่อยก็น่าลองดู Theatre.js ด้วย เป็นเรื่องน่ายินดีที่มีเครื่องมือเกี่ยวกับการเคลื่อนไหวบนเว็บแพลตฟอร์มเพิ่มขึ้น

  • เป็นเครื่องมือที่ยอดเยี่ยมจนทำให้อยากลองเล่นกับ แอนิเมชัน CSS สักพัก
    ถ้าเพิ่ม timing functions เข้าไปในพรีเซ็ตแอนิเมชันได้ก็น่าจะดี ตอนนี้พอไม่มีมันเลยดูจืดไปนิด

  • ซอร์สอยู่ที่นี่: https://github.com/animotionjs/animotion

    • อันนี้เป็น Animotion อีกตัวหนึ่ง เป็น Revealjs wrapper ที่ “Joy of Code” บน YouTube ทำด้วย Svelte
      ดูจาก URL แล้วเหมือนโปรเจกต์ Svelte จะมาก่อนโปรเจกต์นี้
      https://cssanimotion.pages.dev/
      https://animotion.pages.dev/

  • บนมือถือก็ ใช้งานเป็นธรรมชาติ อย่างน่าประหลาดใจ

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

  • พบว่า GPT-4 ก็ทำได้ค่อนข้างดีในการสร้าง แอนิเมชัน CSS ที่ซับซ้อน