Animotion - Ứng dụng tạo hoạt ảnh CSS trực quan

 (cssanimotion.pages.dev)
4 điểm bởi GN⁺ 2023-11-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Tiêu đề trên HN chỉ đến ứng dụng tạo hoạt ảnh CSS trực quan, nhưng nội dung trang có thể xác minh lại chủ yếu xoay quanh MathML Input và LaTeX Output
  • Theo metadata của trang, website này được giới thiệu là công cụ trực tuyến miễn phí để chuyển đổi MathML sang LaTeX
  • Trong phần nội dung, khó tìm thấy thông tin để đánh giá việc sử dụng như ví dụ chuyển đổi thực tế, kết quả đầu ra, độ chính xác hay phạm vi hỗ trợ
  • Một khu vực riêng cũng có kèm liên kết chạy game Drift Hunters Unblocked
  • Chỉ với thông tin hiện tại, rất khó xác minh rõ cả chức năng ứng dụng hoạt ảnh CSS lẫn cách hoạt động của bộ chuyển đổi MathML

Cấu trúc trang có thể xác minh

  • Phần nội dung phía trên có mục MathML Input và LaTeX Output
  • Mô tả meta cho biết đây là bộ chuyển đổi trực tuyến miễn phí dùng MathConvert để chuyển MathML sang LaTeX
  • Công cụ được giới thiệu là dành cho sinh viên, nhà giáo dục và nhà nghiên cứu để chuyển đổi công thức, nhưng không cung cấp trường nhập liệu thực tế, công thức ví dụ hay phạm vi MathML được hỗ trợ

Liên kết game được hiển thị cùng

  • Bên dưới Play Online Games có mục Drift Hunters Unblocked
  • Mục này giới thiệu rằng game cung cấp trải nghiệm drift chân thực và tùy chỉnh xe, đồng thời hoạt động ở trường học và nơi làm việc
  • Có thể chuyển đến trang game qua liên kết Play Now

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-11-26
Ý kiến trên Hacker News

  • CSS3 đã ra mắt từ năm 1999, vậy mà đến năm 2023 một ứng dụng như thế này vẫn đủ thú vị để lên HN, điều đó cho thấy animation dựa trên keyframe dễ dùng, dễ tiếp cận và có thể lập trình/kiểm tra được đã trì trệ đến mức nào
    Flash chết đi khoảng 10 năm trước và để lại một khoảng trống, thứ còn sót lại chỉ là cái vỏ Adobe Animate cùng hệ sinh thái framework/cộng đồng khá xoàng xung quanh nó
    Animation vững chắc dựa trên CSS/SVG phần lớn vẫn chỉ là lời hứa dang dở; có những ví dụ tốt, nhưng nó vẫn gần như chỉ là kỹ năng trong một ngách hẹp

    • After Effects có thể xuất animation CSS/SVG/canvas bằng plugin bodymovin/Lottie miễn phí
      Cá nhân tôi đây là cách tôi dùng nhiều nhất khi tạo web keyframe animation và các phần tử
      Không phải mọi tính năng của After Effects đều xuất được, nhưng trong workflow kiểu này thì đây là giải pháp tốt và ổn định nhất mà tôi từng tìm thấy. Có thể việc tôi đã từng dùng AE trước đó cũng ảnh hưởng phần nào
      Các tính năng hiện được hỗ trợ: http://airbnb.io/lottie/#/supported-features
    • Tôi nghĩ Adobe chịu trách nhiệm lớn cho sự trì trệ này. Tôi nhớ đã có rất nhiều người dự đoán chính xác chuyện này sẽ xảy ra khi Adobe mua Macromedia
      Adobe là công ty cố tình giết chết mọi thứ, và Steve Jobs cũng có một phần trách nhiệm
      Thật tuyệt khi giờ không còn phải đưa tiền cho họ nữa. Cảm ơn Serif
    • Năm 1999 chưa có Transitions và Transforms
      CSS animation đúng nghĩa dùng keyframe mãi đến năm 2009 mới lần đầu khả thi, mà khi đó hỗ trợ trình duyệt vẫn kém nên phải cần rất nhiều tiền tố như moz-, webkit- và cả polyfill
      Chẳng có lý do gì để cố dùng CSS3 animation nếu nó không chạy trên IE8, và về mặt cung cấp UI animation đa trình duyệt thì jQueryUI còn đi trước rất xa
    • Với web animation, có 5% trường hợp làm trang tốt hơn và 95% trường hợp làm trang tệ đi, nên tôi không thấy sự trì trệ này là vấn đề lớn
      Cả đời tôi không muốn nhìn thêm màn hình “Loading…” của Flash nữa, nhất là không muốn phải chờ kiểu đó chỉ để xem menu điều hướng
      Ngay cả trong môi trường băng thông rộng tải tức thì, menu điều hướng vẫn tốt hơn khi không có animation, và khu vực giới thiệu tính năng dưới masthead cũng vậy
    • Flash giống như công nghệ lấp đầy khoảng trống trước khi internet nhanh và rẻ hơn cùng streaming/hosting video trở nên phổ biến
      Bây giờ vẫn còn nhu cầu, nhưng đã thành quá ngách; mọi người chủ yếu tiêu thụ nội dung trên thiết bị di động và nội dung media phong phú cũng đã có thể được cung cấp đầy đủ dưới dạng video

  • Điều đầu tiên tôi muốn thử là di chuyển vị trí keyframe, nhưng có vẻ hiện chưa có tính năng đó

    • Có thể thay đổi vị trí keyframe bằng cắt/dán

  • Tôi thích việc đầu ra là CSS chứ không phải mã JavaScript bị buộc vào một thư viện nào đó

  • Có cách nào để cung cấp tooltip hoặc gợi ý tốt trên di động nhằm giải thích icon dùng để làm gì không?
    Tôi không hiểu ý nghĩa của vài icon; đúng là cứ bấm thử thì sẽ biết, nhưng như đã nói ở trên, không có undo nên hơi ngại

    • Undo/redo đã được thêm vào

  • Trình editor trông thật sự trực quan và rất ổn
    Ai cần timeline nâng cao hơn một chút cũng có thể xem Theatre.js. Thật vui khi thấy hệ sinh thái web có thêm nhiều công cụ liên quan đến chuyển động

  • Đây là một công cụ tuyệt vời, khiến tôi muốn nghịch thử CSS animation một lúc
    Sẽ hay hơn nếu thêm vài timing function vào các animation preset. Hiện tại chưa có nên trông hơi thiếu sinh động

  • Source ở đây: https://github.com/animotionjs/animotion

  • Ngay cả trên di động nó cũng trực quan đến bất ngờ

    • Tôi có thể chỉnh animation trực tiếp, thêm cảm giác mềm dẻo bằng cách kéo giãn phần tử tại keyframe theo chuyển động, và khá hài lòng với kết quả
      Chỉ là tôi không tìm thấy undo/redo. Có tính năng đó trên di động hoặc desktop không?

  • Tôi cũng nhận ra GPT-4 khá giỏi trong việc tạo CSS animation phức tạp