Mo.js - Thư viện đồ họa chuyển động hoàn chỉnh cho web

Hoạt hình trên web là ở đây để ở lại như JavaScript chỉ ngày càng mạnh hơn và hỗ trợ trình duyệt đang phát triển với mỗi năm trôi qua.

Hầu hết các hình ảnh động mà chúng tôi quen thuộc tập trung vào giao diện: menu thả xuống, nút được gắn thẻ và trình chiếu là những ví dụ phổ biến.

Nhưng Mo.js thì khác. Đây là một Thư viện JavaScript được tạo cho đồ họa chuyển động tùy chỉnh để giúp các nhà thiết kế tạo ra các tính năng hoạt hình tuyệt vời vượt xa các thủ thuật UI / UX đơn giản.

Nếu bạn truy cập trang chủ Mo.js, bạn sẽ tìm thấy tài liệu đầy đủ cùng với một hướng dẫn tuyệt vời cho người mới bắt đầu.

Lưu ý điều này thư viện khá khó khăn để làm việc với. Bạn nên làm quen với mã hóa lối vào cơ bản trước khi tự mày mò với Mo.js. Tuy nhiên, có rất nhiều thứ bạn có thể nhận chỉ bằng cách nghiên cứu các bản demo trực tiếp và đào sâu vào một số mã nguồn.

Có một cái nhìn vào repo GitHub chính nếu bạn muốn thấy một số bản demo hoạt động.

Có toàn bộ danh sách các liên kết từ CodePen đều có các bản demo Mo.js trực tiếp. Bao gồm các trình tải hoạt hình toàn màn hình, các tương tác nhấp chuột để tạo hiệu ứng, và hàng tấn thao tác hình dạng.

Ví dụ, cây bút này tạo ra một sự tương tác khá điên rồ từ đầu vào của người dùng (chỉ cần nhấp vào bất cứ nơi nào bên trong cây bút để xem nó).

Một số trong những cây bút này có thể cảm thấy trên đầu nhưng chúng không chỉ là hoạt hình JS. Họ thực sự thích những tác phẩm nghệ thuật.

Những bản demo chứng minh chúng ta đã đi bao xa với hình ảnh động trên web. Việc bất cứ ai cũng có thể tạo ra các hiệu ứng này chỉ bằng mã frontend đơn giản là không thể tin được.

Nếu bạn muốn xem thêm từ Mo.js, hãy xem qua các bản demo trên GitHub. Bạn cũng có thể thích hướng dẫn này hướng dẫn cách làm việc với thư viện Mo.js từng bước.

Dù bằng cách nào, đây là một trong những thư viện hoạt hình yêu thích của tôi đến nay. Nó cung cấp rất nhiều kiểm soát mà bạn không thể tìm thấy ở bất cứ nơi nào khác. Và nó giúp mang các tương tác vi mô từ ứng dụng di động vào thiết kế web.