Animate CSS có miễn phí không?

hoạt hình

Chọn từ hàng ngàn nhân vật, hình nền và đạo cụ hoạt hình trước, miễn phí. Thị trường của chúng tôi là nơi có một số đồ họa thông tin, biểu tượng và bộ hoạt hình được thiết kế chuyên nghiệp và theo chủ đề để giúp bạn tạo cảnh trong nháy mắt. Nhập, đặt và chỉnh sửa nội dung đồ họa, ảnh, âm thanh và video của riêng bạn

Xem phần mềm

Biên đạo múa-js

Một thư viện đơn giản để xử lý các hoạt ảnh phức tạp. Bạn cũng có thể thêm các chức năng tùy chỉnh thực hiện hoạt ảnh không phải CSS. Cài đặt và lưu vào gói của bạn. json và đưa nó vào Javascript của bạn. Tạo ra một số hình ảnh động cuộn ngay lập tức. Hoạt ảnh dựa trên vị trí cuộn, hoạt ảnh dựa trên chuột X

Hôm nay chúng ta sẽ điểm qua 9 thư viện hoạt hình miễn phí, được mã hóa tốt, phù hợp nhất với công việc thiết kế giao diện người dùng — bao gồm các điểm mạnh và điểm yếu của chúng và khi nào nên chọn từng thư viện

Thiết kế web front-end đã trải qua một cuộc cách mạng trong thập kỷ qua. Vào cuối những năm 1990, hầu hết chúng ta vẫn đang thiết kế bố cục tạp chí tĩnh. Ngày nay, chúng ta đang xây dựng những “máy kỹ thuật số” với hàng ngàn bộ phận thay đổi kích thước, phối hợp, chuyển động

Nói một cách đơn giản, các nhà thiết kế giao diện người dùng tuyệt vời cũng cần phải là những nhà làm phim hoạt hình tuyệt vời - với sự hiểu biết vững chắc về các kỹ thuật và công nghệ hoạt hình web

Hãy nhớ rằng chúng tôi đang xem xét từng thư viện từ góc độ của một nhà thiết kế giao diện người dùng am hiểu về mã, chứ không phải với tư cách là nhà phát triển “chuyên gia về mã”. Một số thư viện này là CSS thuần túy. Những cái khác là JavaScript, nhưng không có cái nào yêu cầu bất cứ thứ gì ngoài hiểu biết cơ bản về HTML/CSS và/hoặc JavaScript để trở nên hữu ích

Danh sách 9 thư viện hoạt hình hàng đầu của chúng tôi

1. Tuyệt vời cho hoạt hình dựa trên vector ở mọi quy mô
2. Tốt nhất cho các thao tác giao diện người dùng nhỏ, được nhắm mục tiêu
3. Nền tảng hoạt hình khổng lồ nhưng đầy đủ tính năng có khả năng xử lý mọi thứ từ trò chơi đến nhà phát triển ứng dụng

Chúng ta hãy rõ ràng. là một loại thư viện hoạt hình rất khác với tám loại còn lại trong danh sách này. Tuy nhiên, chúng tôi không nghĩ rằng các nhà thiết kế UI/UX có thể bỏ qua nó

Tạo hoạt ảnh Lottie giống với tạo sản xuất video hơn. Bạn sẽ cần một công cụ hoạt hình của bên thứ ba có thể xuất tệp JSON 'sẵn sàng cho Lottie'. Trên thực tế, định dạng Lottie được thiết kế đặc biệt để làm cho hoạt ảnh Adobe After Effects hoạt động hiệu quả trên web và thiết bị di động. Điều này làm cho hoạt ảnh của Lottie nhanh, hiệu quả, dễ viết kịch bản và thường khá đẹp

Mặc dù Lottie được hình thành như một phần mở rộng cho Adobe After Effects, nhưng có rất nhiều lựa chọn thay thế (được cho là tốt hơn) 'Lottie-native' để tạo hoạt hình Lottie. Bao gồm các

• lưu lượng
• kỵ sĩ
• Keyshape (chỉ dành cho máy Mac nhưng không tốn kém)
• Adobe Animator (Hỗ trợ tính năng hạn chế)
• Phác thảo (phần bổ sung)
• Haiku (Mở nguồn gần đây – Miễn phí nhưng tương lai không chắc chắn – người mua hãy cẩn thận)

Lottie sử dụng 'trình phát hoạt hình' riêng biệt được tối ưu hóa cho Web, iOS và Android tương ứng. Cơ sở mã Lottie được phát triển và duy trì bởi và có một cộng đồng cực kỳ nhiệt tình, đam mê đang phát triển đằng sau nó

• Người sáng tạo.
• Thoát ra. 2015
• Phổ biến.
• Sự miêu tả. “Lottie là một thư viện iOS, Android và React Native hiển thị hoạt ảnh After Effects trong thời gian thực. ”
• GitHub. Lottie Web – Lottie iOS – Lottie Android
• Giấy phép.

sinh động. css

sinh động. css là một trong những thư viện hoạt hình CSS nhỏ nhất và dễ sử dụng nhất. Nó tinh tế, hiệu quả, được bảo trì tốt kể từ khi phát hành năm 2013

Áp dụng thư viện Animate cho dự án của bạn cũng đơn giản như liên kết CSS và thêm các lớp CSS cần thiết vào các phần tử HTML của bạn. Tất nhiên, bạn cũng có thể sử dụng jQuery hoặc vanilla JS để kích hoạt hoạt ảnh trong một sự kiện cụ thể nếu bạn thích

• Người sáng tạo. Daniel Eden
• Thoát ra. 2013
• Phiên bản hiện tại. v4. 1. 1
• Phổ biến.
• Sự miêu tả. “Một thư viện hoạt ảnh CSS trên nhiều trình duyệt. Dễ sử dụng như một điều dễ dàng. ”
• Kích thước thư viện. 70 kB (rút gọn)
• GitHub. https. //github. com/daneden/animate. css
• Giấy phép.

Tại thời điểm viết bài này, nó vẫn là một trong những thư viện hoạt hình CSS phổ biến và được sử dụng rộng rãi nhất và tệp được rút gọn của nó cũng đủ nhỏ để đưa vào các trang web dành cho thiết bị di động.

sinh động. css vẫn đang được phát triển tích cực. Coi chừng phiên bản 4, phiên bản này sẽ hỗ trợ các thuộc tính tùy chỉnh CSS (còn gọi là biến CSS). Đây là một trong những thư viện hoạt hình đơn giản và mạnh mẽ nhất và chúng tôi sẽ không ngần ngại sử dụng thư viện này trong bất kỳ dự án nào

GreenSock (GSAP)

GreenSock (hoặc GSAP – GreenSock Animation Platform) là con dao hoạt hình web của quân đội Thụy Sĩ. Đối với các hình ảnh động mượt mà và tinh vi chạy mượt mà, GSAP là lựa chọn lý tưởng. Bạn có thể tạo hoạt ảnh cho mọi thứ, từ các thành phần DOM đến SVG và hệ sinh thái của nó bao gồm một số plugin tuyệt vời cho phép bạn thực hiện tất cả các loại nội dung thú vị, chẳng hạn như. g. , biến hình SVG, vẽ các nét SVG, chức năng cuộn, xáo trộn văn bản, v.v. Nó nhanh, tương thích với nhiều trình duyệt và cú pháp của nó rất đơn giản và trực quan

• Phiên bản hiện tại. 3. 10. 4
• Phổ biến.
• Sự miêu tả. “Hoạt hình cấp độ chuyên nghiệp, hiệu suất cực cao dành cho web hiện đại. ”
• Kích thước thư viện. 313 kB (thư mục rút gọn chứa thư viện tải xuống nhẹ)
• GitHub. https. //github. com/greensock/GreenSock-JS/
• Giấy phép. giấy phép tiêu chuẩn miễn phí, kết hợp với mô hình trả phí cho các tính năng và plugin cụ thể. Xem trang cấp phép để biết thêm chi tiết

GSAP là mô-đun, do đó bạn có thể chọn và chọn phần nào của thư viện bạn cần cho dự án của mình, điều này rất tốt để kiểm soát kích thước tệp

Nếu bạn đang tìm kiếm thứ gì đó mạnh mẽ nhưng trực quan với tài liệu tuyệt vời và hỗ trợ cộng đồng, tôi chắc chắn khuyên bạn nên thử thư viện hoạt ảnh này trong dự án tiếp theo của mình. Bạn sẽ nhiệt tình

AnimeJS

AnimeJS là bổ sung mới nhất trong danh sách của chúng tôi, nhưng đã giành được rất nhiều chuyển đổi kể từ khi tạo ra nó. Nó cực kỳ linh hoạt và mạnh mẽ và sẽ không phù hợp với việc cung cấp năng lượng cho hoạt ảnh trò chơi HTML. Câu hỏi thực sự duy nhất là "nó có quá mức cần thiết cho các ứng dụng web đơn giản không?"

Có lẽ. Nhưng vì nó cũng nhanh, nhỏ và tương đối dễ học nên khó có thể tìm ra lỗi của nó

AnimeJS được mô tả là “thư viện hoạt hình JavaScript nhẹ với API đơn giản nhưng mạnh mẽ. Nó hoạt động với các thuộc tính CSS, SVG, thuộc tính DOM và Đối tượng JavaScript”. Khá tuyệt vời

Dự án này có sẵn trên GitHub

• Người sáng tạo. Julian Garnier
• Thoát ra. 2016
• Phiên bản hiện tại. v3. 2. 1
• Phổ biến.
• Sự miêu tả. “Anime. js là một thư viện hoạt hình JavaScript nhẹ với API đơn giản nhưng mạnh mẽ. ”
• Kích thước thư viện. 16. 8 kB (rút gọn)
• GitHub. https. //github. com/juliangarnier/phim hoạt hình
• Giấy phép

Ấn tượng nhất là Anime. JS có “tài liệu” tuyệt đẹp thể hiện mã HTML, JavaScript và các ví dụ hoạt động trong một môi trường ứng dụng tuyệt đẹp

Nói tóm lại, nếu bạn cảm thấy thoải mái với giải pháp hoạt hình JavaScript, thì thật khó để tìm ra lý do để bỏ qua AnimeJS

hoạt hình ma thuật

Magic Animations là một trong những thư viện hoạt hình ấn tượng nhất hiện có. Nó có nhiều hình ảnh động khác nhau, nhiều hình ảnh động khá độc đáo đối với thư viện này. Tương tự với Animate. css, bạn có thể triển khai Magic bằng cách nhập tệp CSS. Bạn cũng có thể triển khai hoạt ảnh bằng jQuery. Dự án này cung cấp một ứng dụng demo đặc biệt thú vị

• Phiên bản hiện tại. 1. 4. 1
• Phổ biến.
• Sự miêu tả. “Ảnh động CSS3 với các hiệu ứng đặc biệt”
• Kích thước thư viện. 54. 9 kB ​​(rút gọn)
• GitHub. https. //github. com/miniMAC/ma thuật
• Giấy phép.

Kích thước tệp của Magic Animation vừa phải so với Animate. css và nó được biết đến với các hoạt ảnh đặc trưng, ​​chẳng hạn như hiệu ứng ma thuật, hiệu ứng ngu ngốc và hiệu ứng bom

Nếu bạn đang tìm kiếm thứ gì đó hơi khác thường, hãy tìm nó. Bạn sẽ không phải thất vọng

Zdog

Zdog là một thư viện JavaScript để tạo các thiết kế và hoạt ảnh 3D của David DeSandro. Với sự trợ giúp của nó, bạn có thể vẽ các thiết kế của mình bằng cách sử dụng phần tử <canvas> hoặc SVG và làm cho chúng trở nên sống động trong các hình ảnh động mượt mà với hiệu ứng 3D đẹp mắt

• Phiên bản hiện tại. 1. 1. 0
• Phổ biến.
• Mô tả. “Công cụ giả 3D tròn, phẳng, thân thiện với nhà thiết kế
  cho canvas và SVG”
• Kích thước thư viện. 28 kB (rút gọn)
• GitHub. https. //github. com/metafizzy/zdog
• Giấy phép.

Nếu bạn quen thuộc với JavaScript, bạn sẽ học những kiến ​​thức cơ bản về Zdog khá nhanh. nó có API khai báo đơn giản, tài liệu tuyệt vời và nhiều tài nguyên học tập. Xem phần giới thiệu của tôi về Zdog trên SitePoint

cung cấp chính xác những gì ghi trên hộp — một thư viện CSS được thiết kế đặc biệt để làm rung chuyển các phần tử trong trang web của bạn. Như bạn có thể mong đợi, có một số biến thể có sẵn để làm rung chuyển các thành phần web của bạn

• Phiên bản hiện tại. 1. 5. 0
• Phổ biến.
• Kích thước thư viện. 21. 9 kB ​​(phiên bản rút gọn)
• GitHub. https. //github. com/elrumordelaluz/csshake
• Giấy phép

Apple đã phổ biến mô hình giao diện người dùng bằng cách lắc mạnh phần tử giao diện người dùng (hộp thoại, phương thức hoặc hộp văn bản) khi người dùng nhập phản hồi không chính xác - bắt chước một người đang lắc đầu. CSSShake cung cấp một loạt các hoạt ảnh “lắc” thú vị và không thiếu các biến thể trong thư viện này

Bay lượn. css

Bay lượn. css là thư viện hoạt hình CSS được thiết kế để sử dụng với các nút và các phần tử giao diện người dùng khác trong trang web của bạn. Nó có các hiệu ứng chuyển tiếp 2D thực sự đẹp mắt, cùng với một loạt các hoạt ảnh được làm thủ công tốt khác

• Phiên bản hiện tại. 2. 3. 2
• Phổ biến.
• Sự miêu tả. “Dễ dàng áp dụng cho các yếu tố của riêng bạn, sửa đổi hoặc chỉ sử dụng để lấy cảm hứng. ”
• Kích thước thư viện. 93. 0 kB (rút gọn)
• GitHub. https. //github. com/IanLunn/Di chuột
• Giấy phép. giấy phép cá nhân/nguồn mở miễn phí và giấy phép thương mại trả phí, tùy thuộc vào yêu cầu. Để biết chi tiết, hãy đọc

Bay lượn. css phù hợp nhất để tạo hoạt ảnh cho các thành phần trang rời rạc như nút, biểu trưng, ​​thành phần SVG hoặc hình ảnh nổi bật thay vì hoạt ảnh trang phức tạp, lớn hơn. Có thể cho rằng, các hiệu ứng hoạt hình đáng chú ý nhất của nó là các bong bóng đối thoại và các lọn tóc xoăn đặc biệt.

AniJS

Thư viện cuối cùng của chúng tôi rất thú vị vì cách tiếp cận độc đáo của nó. AniJS là một thư viện hoạt hình cho phép bạn thêm hoạt ảnh vào các phần tử theo cấu trúc 'giống như câu' đơn giản. Lấy định dạng sau

Nếu nhấp vào, Trên hình vuông, Làm rung chuyển hoạt hình Đến. hộp đựng

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Nếu bạn không quen thuộc lắm với JavaScript, đây có thể là một cách tuyệt vời để bước vào các động tác do JS dàn dựng

• Người sáng tạo. daiel noel
• Thoát ra. 2014
• Phiên bản hiện tại. 0. 9. 3
• Phổ biến.
• Sự miêu tả. “Một thư viện để nâng cao thiết kế web của bạn mà không cần viết mã. ”
• Kích thước thư viện. 10. 5 kB
• GitHub. https. //github. com/anijs/anijs
• Giấy phép

AniJS là một thư viện có kích thước bao thanh toán rất hợp lý trong chức năng của nó. Định dạng mà nó sử dụng để triển khai khá nguyên bản và khác biệt so với các thư viện hoạt hình khác (mà nhiều thư viện khác có thể thấy khác thường)

Tuy nhiên, thư viện này rất đáng để thử, ít nhất một lần cho các dự án của bạn

Bạn nên chọn thư viện nào?

Có rất nhiều thư viện hoạt hình đã sẵn sàng và đang chờ triển khai trong dự án của bạn. Những thứ được liệt kê ở trên là một số ít có sự kết hợp tốt nhất giữa sự tinh tế và ổn định

Nếu bạn đang tìm kiếm một giải pháp CSS dễ triển khai, đã được thử nghiệm kỹ càng, Animate. css có lẽ là tùy chọn “bang-for-buck” linh hoạt nhất hiện có

Nếu bạn đang tìm kiếm một cơ sở JavaScript mạnh mẽ, đầy đủ hơn để hỗ trợ các trò chơi trực tuyến, trình giả lập, mô hình và các ứng dụng tinh vi khác, thì GreenSock và AnimeJS rất khó để phân chia

Nếu phong cách nghệ thuật của bạn thiên về vector và bạn có một công cụ hoạt hình hỗ trợ Lottie, thì khó có thể bỏ qua chuyển động mượt mà và hiệu quả của Lottie

Mặc dù việc sử dụng thư viện hoạt hình trong ứng dụng web của bạn chắc chắn có thể cải thiện tính tương tác, nhưng lạm dụng nó sẽ không đạt được mục đích và thường gây nhầm lẫn cho người dùng. Hãy cẩn thận và sử dụng hình ảnh động một cách thận trọng

Bạn có sử dụng thư viện hoạt hình cho các dự án của mình không?

Chia sẻ bài viết này

Alex Walker

Alex đã làm những điều độc ác và bất thường với CSS từ năm 2001. Anh ấy là nhà phát triển và thiết kế giao diện người dùng hàng đầu cho SitePoint và là biên tập viên Thiết kế và UX của SitePoint với hơn 150 bản tin đã viết. Đồng tác giả của Nguyên tắc thiết kế web đẹp. Giờ đây, Alex tham gia vào việc lập kế hoạch, phát triển, sản xuất và tiếp thị một loạt các sản phẩm và tài liệu tham khảo in ấn và trực tuyến. Anh ấy đã thiết kế hơn 60+ bìa sách của SitePoint

quần tây

Tanay Pant là một tác giả, hacker, nhà phát triển và người đam mê công nghệ người Ấn Độ. Ông được biết đến với công trình Học phát triển ứng dụng hệ điều hành Firefox, được xuất bản bởi Packt. Ông cũng là đại diện chính thức của Mozilla và đã được liệt kê trong danh sách. tín dụng của trình duyệt web Firefox. Trang web cá nhân của anh ấy là tanaypant. com

Maria Antonietta Perna

Maria Antonietta Perna là một giáo viên và nhà văn kỹ thuật. Cô ấy thích mày mò với các tiêu chuẩn CSS thú vị và tò mò về việc dạy các phương pháp tiếp cận mã giao diện người dùng. Khi không viết mã hoặc viết web, cô ấy thích đọc sách triết học, đi bộ đường dài và đánh giá cao những món ăn ngon

Tôi có thể sử dụng CSS animate không?

Hoạt hình CSS có tốt hơn JS không?

Khung CSS nào là tốt nhất cho hoạt hình?

Hoạt hình CSS có hoạt động trong tất cả các trình duyệt không?