Tôi thích thử nghiệm với nhiều hiệu ứng hoạt hình khác nhau, đặc biệt là những hiệu ứng đơn giản và có thể triển khai bằng CSS. Tuy nhiên, nếu chúng ta nhìn vào bức tranh rộng hơn - hoạt ảnh CSS sẽ chỉ đưa bạn đến mức đó. Và, nếu bạn muốn tạo trải nghiệm người dùng phức tạp và có tính tương tác, thì sớm muộn gì bạn cũng phải chuyển sang JavaScript
Ưu điểm chính của việc sử dụng JavaScript cho các hiệu ứng hoạt ảnh là bạn có thể kiểm soát nhiều logic hoạt ảnh hơn. Điều này bao gồm tính trôi chảy của quá trình chuyển đổi, kiểm soát trạng thái và phản hồi của DOM cũng như sử dụng đồ họa 2D và 3D nhờ WebGL
Các loại thư viện hoạt hình JavaScript
Vì vậy, bởi vì các thư viện hoạt hình JS có nhiều hình dạng và hình thức, nó thực sự giúp thu hẹp phạm vi trọng tâm cụ thể. Nhiều công cụ và khung không chỉ được sử dụng cho công cụ giao diện người dùng mà còn được sử dụng để xây dựng trò chơi và tạo nội dung tương tác khác
Đối với phần tổng hợp cụ thể này, tôi tập trung vào các thư viện được sử dụng phổ biến nhất trong quá trình phát triển giao diện người dùng, riêng của chúng hoặc cùng với bất kỳ khung hiện tại nào
Trong thời gian thích hợp, tôi sẽ xem xét thêm nhiều thư viện hơn vào danh sách này với quy mô nhỏ hơn nhưng vẫn cung cấp những cách có ý nghĩa để thêm hoạt ảnh tương tác vào dự án của bạn
Mỗi thư viện có liên kết đến trang web và trang GitHub của nó. Tôi cũng đã thêm một ví dụ về CodePen mà bạn có thể chạy từ trang này và các tài nguyên bổ sung - đó là các hướng dẫn hoặc hướng dẫn bằng video
#1 - Ba. js
Trang mạng
GitHub
Số ba. js là thư viện truy cập để tạo hiệu ứng hoạt hình 3D mà bạn sử dụng trong quá trình phát triển trang web sáng tạo. Số ba. js loại bỏ yêu cầu các nhà phát triển tìm hiểu về WebGL và thay vào đó có thể tập trung vào việc xây dựng các hiệu ứng 3D tương tác mà không phức tạp
Ở cấp cao, Three. js được sử dụng để tạo trải nghiệm ảo tương tác như Mozilla Hubs. Thư viện cũng thường được sử dụng để tạo trải nghiệm trang đích hấp dẫn. Các nhà xuất bản và bài xã luận đẳng cấp thế giới đã sử dụng Three. js trong nhiều năm để xây dựng các trang dựa trên dữ liệu với các bản cập nhật động
Nếu bạn truy cập trang chủ, nhiều dự án nổi bật sẽ được liệt kê, điều này sẽ mang lại cho bạn nhiều cảm hứng/sự rõ ràng về cách thư viện này được sử dụng trong môi trường hàng ngày
Số ba. js Ví dụ Hoạt hình
Xem Hình nền Pen Mesh Line Waves - BA. js bởi CP Designer (@cpandya) trên CodePen
Số ba. js Tài nguyên bổ sung
- Cách chúng tôi xây dựng thế giới GitHub
- Hiệu ứng méo pixel với ba. js
#2 - Anime. js
Trang mạng
Tài liệu
GitHub
phim hoạt hình. js từ Julian Garnier có lẽ là thư viện nổi tiếng thứ 2 để tích hợp hoạt ảnh vào các dự án dựa trên web. Tính phổ biến của nó bắt nguồn từ việc có công cụ tích hợp để giúp đẩy nhanh quá trình tạo hoạt ảnh cho các phần tử CSS, SVG và DOM
Ví dụ: bạn có thể nhắm mục tiêu các bộ chọn CSS cụ thể và sau đó áp dụng logic hoạt hình được tinh chỉnh thông qua JavaScript, thay vì tự viết @keyframes
anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });Chỉ với đoạn mã trên, bạn có thể tạo hiệu ứng trông như thế này
Nếu bạn làm điều này với CSS - bạn sẽ cần chọn từng khối lưới riêng lẻ và viết logic riêng cho nó. Điều đó không chỉ không thực tế mà còn tốn rất nhiều công sức. trên phim hoạt hình. js, bạn sẽ tìm thấy nhiều ví dụ tương tự. Và, bản demo bên dưới tiến thêm một bước để giới thiệu cách thư viện này có thể được sử dụng trong phát triển giao diện người dùng hiện đại
phim hoạt hình. js Ví dụ Hoạt hình
xem phim hoạt hình cây bút. js logo animation của Julian Garnier (@juliangarnier) trên CodePen
phim hoạt hình. js Tài nguyên bổ sung
- phim hoạt hình. js Hướng dẫn - JavaScript Animation Engine trong 10 phút
- Hoạt ảnh giao diện người dùng với Anime. js
#3 - Popmotion
Trang mạng
GitHub
Popmotion là một thư viện hoạt hình cấp thấp được viết bằng TypeScript. Thư viện cũng hỗ trợ thư viện Framer Motion phổ biến (chúng tôi đã liệt kê trong bài viết này) được sử dụng trong các dự án React. Không có ý kiến, bạn có thể sử dụng Popmotion để tích hợp các hiệu ứng tùy chỉnh bằng cách viết các chức năng bổ sung mà bạn muốn sử dụng
Đúng như tên gọi, Popmotion đặc biệt tốt cho việc tạo hoạt ảnh cho các thành phần giao diện người dùng thông qua việc sử dụng các hoạt ảnh dựa trên chuyển động khác nhau. Điều này bao gồm các hiệu ứng như nới lỏng, lò xo, khung hình chính và các hiệu ứng chuyển tiếp phức tạp hơn. Ví dụ bên dưới thể hiện rất tốt ứng dụng thực tế của các hiệu ứng hoạt hình cho các phần tử thành phần
Popmotion ví dụ hoạt hình
Xem bản demo Pen Popmotion của Arden (@aderaaij) trên CodePen
Tài nguyên bổ sung của Popmotion
- Trực quan hóa thuật toán Pancakes với React và Popmotion. io
- Thêm hoạt ảnh mùa xuân vào ứng dụng góc cạnh của bạn với popmotion
#4 - mo. js
Trang mạng
Tài liệu
GitHub
mo. js tập trung vào đồ họa chuyển động và vượt trội trong việc cung cấp cấu trúc mã đơn giản mà bạn có thể triển khai trong các dự án độc lập và với các khuôn khổ như React
Và, bởi vì Mô. js có API khai báo riêng - bạn có thể kiểm soát từng bước của hoạt ảnh. Điều này bao gồm việc xác định logic cho những gì bạn muốn đạt được và cách bạn sẽ đạt được điều đó. Thư viện bao gồm các thành phần và ví dụ được tạo sẵn được điều chỉnh để mang lại trải nghiệm người dùng phong phú về mặt hình ảnh
Đây là một đoạn mẫu
const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });Như bạn có thể thấy, rất nhiều logic được xác định trước. Vì vậy, thay vì đưa ra ý tưởng của riêng mình, bạn có thể ghi chú các thuộc tính được cung cấp và xây dựng theo cách của mình. Phần hướng dẫn trong tài liệu có khá nhiều ví dụ về các ứng dụng thực tế, đặc biệt là các hiệu ứng thêm hoạt ảnh nhỏ nhưng có ý nghĩa vào các thành phần trang web hàng ngày
mo. js Ví dụ Hoạt ảnh
Xem Hiệu ứng di chuột liên kết bút w/ mo. js của Mike Quinn (@mprquinn) trên CodePen
mo. js Tài nguyên bổ sung
- Cách sử dụng MoJS với React
- Làm quen với MoJS
#5 - p5. js
Trang mạng
Tài liệu
GitHub
p5. js là triển khai JavaScript của Xử lý - một "ngôn ngữ" riêng biệt dành cho các nghệ sĩ thị giác sử dụng. Không giống như một số ví dụ chúng ta đã thấy cho đến nay, p5. js là một thư viện hoạt hình phổ quát, cung cấp giải pháp cho các ứng dụng thực tế và các dự án mạnh mẽ và phức tạp hơn. Điều này bao gồm hỗ trợ đầy đủ cho các hiệu ứng 2D & 2D
Theo như sử dụng p5. js trong các dự án trang web, thư viện mở ra một con đường cho sự sáng tạo chuyên sâu. Ví dụ: bạn có thể nhanh chóng khởi động các hiệu ứng như màn khói, cây hoạt hình và trang đích dựa trên dữ liệu mà người dùng có thể tương tác
Bạn phải tự thực hiện tất cả các bản vẽ, nhưng với số lượng tài nguyên có sẵn cho p5. js - Tôi nghĩ bạn sẽ thấy rằng không quá khó để bắt đầu. Và, không cần phải nói, cộng đồng đằng sau cả hai dự án này đều tham gia rất tích cực
p5. js Ví dụ Hoạt ảnh
Xem Bút P5. JS Xoay và Xoay. bởi Sdsmnc (@supastrocat) trên CodePen
p5. js Tài nguyên bổ sung
- Xử lý và p5. js
- Hoàng hôn và sao băng p5. js
#6 - Chuyển động
Trang mạng
Tài liệu
GitHub
React phổ biến đến mức nó sẽ có thư viện hoạt hình của riêng mình. Framer Motion đi kèm với API dựng sẵn cho phép các nhà phát triển React đơn giản hóa quy trình xây dựng các thành phần hoạt hình. Nó cũng giảm bớt một số trở ngại khi cần học CSS và các thuộc tính hoạt hình độc lập của nó. Và nó khá dễ dàng để làm việc với
Một đoạn ví dụ
import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )Ảnh động trong Framer được xác định bởi thuộc tính motion & animate. Điều này cho phép bạn chọn toàn bộ thành phần và các thành phần bên trong của chúng, sau đó bạn có thể làm phong phú thêm bằng logic hoạt ảnh tùy chỉnh của mình. Bài viết Smashing từ Nefe Emadamerho-Atori trong phần tài nguyên là điểm khởi đầu tuyệt vời để xem Framer Motion hoạt động như thế nào
Ví dụ chuyển động Animation
Xem Nút Bút Laser Sight của codebro (@codebro) trên CodePen
Tài nguyên bổ sung chuyển động
- Giới thiệu Framer Motion
- Hoạt hình đáp ứng với Framer Motion
#7 - GAP
Trang mạng
Tài liệu
GitHub
Gần đây tôi đã thấy tác phẩm nghệ thuật GSAP được chia sẻ trên Twitter khá nhiều. Nhưng nó không đến như một bất ngờ. Nhiều hình ảnh động và hiệu ứng động mà chúng ta thấy trong các dự án sáng tạo đã được thực hiện nhờ vào công cụ GSAP mạnh mẽ
Thư viện không chỉ được tối ưu hóa cho hiệu suất mà còn tương thích cao với các công nghệ yêu thích của bạn. Điều đó bao gồm các khung như React & Vue và các thư viện như jQuery, với sự hỗ trợ bổ sung cho các trình duyệt web di động và cũ
Vì GSAP có thể truy vấn và tạo hoạt ảnh trên thực tế cho bất kỳ phần tử web nào (từ CSS đến Canvas đến các đối tượng DOM), bạn có thể sử dụng nó cho mục đích đơn giản như hiệu ứng spinner hoặc nỗ lực hết mình và xây dựng trải nghiệm trang web thực sự năng động
Phần Giới thiệu có hàng trăm dự án ví dụ mà các nhà phát triển đã làm việc trên. Hãy xem nó để lấy cảm hứng và để xem những gì có thể với thư viện này
Hoạt hình ví dụ GSAP
Xem phần giới thiệu Pen Hulu Originals của Hyperplexed (@Hyperplexed) trên CodePen
Tài nguyên bổ sung GSAP
- Kỹ thuật hoạt hình tuyệt vời với GSAP
- Tạo trình tự hoạt hình trang web phức tạp - Hướng dẫn GSAP 3
#8 - Giấy. js
Trang mạng
Tài liệu
GitHub
Giấy. js là một thư viện hoạt hình tập trung nghiêm ngặt vào đồ họa vector hoạt hình. Cách tiếp cận này cho phép bạn thực hiện không chỉ các hiệu ứng tĩnh mà cả các trải nghiệm động tương tác. Đặc biệt, Giấy. js phổ biến trong các dự án hoạt hình nơi người dùng có thể kéo các đối tượng, sắp xếp lại chúng và cung cấp đầu vào tùy chỉnh
Các đối tượng có thể được phân loại thông qua các lớp, mỗi lớp có đặc tả hoạt ảnh tùy chỉnh. Điều này rất hữu ích khi bạn làm việc trên các cấu trúc phức tạp, cho phép bạn xóa/tắt một số lớp nhất định trừ khi người dùng yêu cầu
Giấy. js Ví dụ Hoạt hình
Xem Bút Đổ Kính - Giấy. js của Fiorald Ismaili (@Fiorald) trên CodePen
Giấy. js Tài nguyên bổ sung
- Giấy. Xóa Vector js
- sóng trong giấy. js
#9 - Ảnh động trên web
Trang mạng
Tài liệu
GitHub
Thư viện này là cổng JavaScript trực tiếp của Web Animation API. Thư viện tích hợp trực tiếp với thông số kỹ thuật của Element.animate(), cho phép bạn sử dụng các tính năng hoạt hình thường được viết bằng logic CSS. Các tác giả giải thích nó bằng cách nói
"Triển khai JavaScript của Web Animations API cung cấp các tính năng Web Animation trong các trình duyệt không hỗ trợ nó nguyên bản. Polyfill quay trở lại triển khai gốc khi có sẵn. "
Ảnh động trên web Ví dụ về hoạt ảnh
Xem Hoạt hình bắt buộc bút của Sam Thorogood (@samthor) trên CodePen
Ảnh động trên web Tài nguyên bổ sung
- Web Animation API - Web API. MDN
- Ảnh động trên web cấp 2. W3C
#10 - Prôtôn
Trang mạng
Tài liệu
GitHub
Hiệu ứng hạt chắc chắn có trong xu hướng thiết kế web hiện đại. Các nhà thiết kế không chỉ sử dụng chúng cho các hiệu ứng nền mà còn cho các hiệu ứng chuyển tiếp thú vị và thậm chí là các bài thuyết trình cho các dự án sáng tạo. Thư viện Proton được thiết kế riêng cho nhu cầu nhân rộng nhanh chóng các hiệu ứng hạt sáng tạo
Bạn có thể làm những việc như tạo hiệu ứng tia lửa và tương tác dựa trên va chạm, đồng thời chuyển đổi văn bản thành trải nghiệm hoạt hình mới và thú vị
Proton ví dụ hoạt hình
Xem Pen my-emitter của matsu7089 (@matsu7089) trên CodePen
Tài nguyên bổ sung proton
- Ví dụ về động cơ proton
- Thành phần phản ứng cho nền hạt
Tóm lược
Điều thú vị về nhiều thư viện trong số này là chúng đã tồn tại được một thời gian. Do đó, tương đối dễ dàng tìm thấy các ví dụ và hướng dẫn chuyên sâu về cách sử dụng một thư viện cụ thể trong ngữ cảnh cụ thể
Trên hết, nó giúp biết bạn đang cố gắng đạt được loại mục tiêu nào, đặc biệt nếu bạn đang làm việc trên các hoạt ảnh triển khai dữ liệu thời gian thực hoặc đầu vào dựa trên người dùng
Nói cách khác, không có thứ gọi là tốt nhất. Mỗi thư viện đều có điểm mạnh và điểm yếu riêng. Có lẽ tôi sẽ sử dụng GSAP vì nó được tối ưu hóa độc đáo để sử dụng trong hầu hết mọi dự án giao diện người dùng có thể tưởng tượng được