Animotion - Ứng dụng 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

Tạo hoạt ảnh CSS không cần code

  • Animotion là công cụ cho phép tạo hoạt ảnh CSS một cách trực quan thông qua kéo thả, thay đổi kích thước, xoay, cắt xén và nhiều thao tác khác.
  • Cung cấp trình chỉnh sửa keyframe, bộ sưu tập hoạt ảnh sẵn sàng sử dụng và 29 easing tích hợp sẵn.
  • Ứng dụng này hoạt động tốt hơn trên màn hình lớn và các trình duyệt web hiện đại.

Ý kiến của GN⁺

  • Điểm quan trọng nhất của bài viết này là với công cụ Animotion, bạn có thể dễ dàng tạo hoạt ảnh CSS mà không cần viết mã.
  • Nội dung này có thể thú vị với những người quan tâm đến kỹ thuật phần mềm, đặc biệt hấp dẫn với các lập trình viên mới bắt đầu quan tâm đến phát triển frontend.

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-11-26
Ý kiến trên Hacker News
  • CSS3 được phát hành vào năm 1999, và việc đến năm 2023 vẫn có một ứng dụng như thế này được giới thiệu trên Hacker News như một điều thú vị cho thấy khả năng tiếp cận và tính lập trình của hoạt ảnh dựa trên keyframe vẫn chưa được cải thiện nhiều. Flash đã biến mất khoảng 10 năm trước, và những gì còn lại là Adobe Animate cùng một số framework và cộng đồng khá tầm thường. Hoạt ảnh vững chắc dựa trên CSS/SVG phần lớn vẫn chỉ là những lời hứa hẹn nghèo nàn.
  • Việc di chuyển keyframe là điều đầu tiên tôi muốn làm, nhưng tính năng đó vẫn chưa có.
  • Tôi thích việc đầu ra của ứng dụng là CSS, và rất cảm kích vì nó không phải là mã JavaScript bị ràng buộc vào một thư viện nào đó.
  • Tôi thích tính trực quan của trình biên tập, và những ai cần một timeline nâng cao hơn có thể xem thử Theatre.js. Thật vui khi thấy nhiều chuyển động hơn trên nền tảng web.
  • Tôi tự hỏi liệu có cách nào tốt để cung cấp tooltip hoặc gợi ý giải thích ý nghĩa của các biểu tượng trên di động hay không. Tôi không hiểu chức năng của một vài biểu tượng, và dù có thể thử chạy chúng, như đã đề cập trước đó, lại không có chức năng hoàn tác.
  • Tôi rất thích ứng dụng này.
  • Có thể xem mã nguồn của ứng dụng trên GitHub: animotionjs/animotion
  • Ngay cả trên di động, nó cũng mang lại trải nghiệm sử dụng trực quan đến ngạc nhiên.
  • Thật là một công việc tuyệt vời, cảm ơn vì đã chia sẻ một công cụ rất hay.
  • Nó cũng hoạt động rất tốt trên di động và đáng để đánh dấu.