Thư viện hoạt hình nền CSS

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

Hình nền CSS có thể được làm động không?

Thư viện nào được sử dụng cho hoạt hình?

Làm cách nào để đặt nền gif trong CSS?

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