Cách tạo hiệu ứng Liquid Glass của Apple bằng React

Apple luôn đi đầu trong thiết kế giao diện người dùng, và một trong những hiệu ứng hấp dẫn gần đây nhất của họ là giao diện "kính lỏng" (liquid glass). Hiệu ứng này, đặc trưng bởi vẻ ngoài linh hoạt, giống như thạch, thêm một lớp chiều sâu và tính tương tác cho các yếu tố giao diện người dùng. Đó là một cách tinh tế nhưng mạnh mẽ để làm cho ứng dụng của bạn cảm thấy năng động và hấp dẫn hơn.

Trong bài viết này, chúng ta sẽ khám phá cách tái tạo hiệu ứng tuyệt đẹp này trong các ứng dụng React của bạn bằng cách sử dụng thư viện liquid-glass-react.

Thư viện này cung cấp một thành phần dễ sử dụng và có khả năng tùy chỉnh cao, gói gọn sự phức tạp của hiệu ứng, cho phép bạn thêm một chút "phép màu" thiết kế của Apple vào dự án của mình với nỗ lực tối thiểu.

💡

Bạn muốn một công cụ kiểm thử API tuyệt vời có thể tạo tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Đội ngũ Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn, và thay thế Postman với mức giá hợp lý hơn nhiều!

button

Bắt đầu

Trước khi đi sâu vào những chi tiết phức tạp của hiệu ứng kính lỏng, hãy thiết lập thư viện liquid-glass-react trong dự án của chúng ta.

Cài đặt

Để cài đặt thư viện, chỉ cần chạy lệnh sau trong terminal của bạn:

npm install liquid-glass-react

Hoặc nếu bạn đang sử dụng Yarn:

yarn add liquid-glass-react

Cách sử dụng cơ bản

Sau khi thư viện được cài đặt, bạn có thể bắt đầu sử dụng thành phần LiquidGlass trong ứng dụng React của mình. Đây là một ví dụ cơ bản về cách sử dụng nó:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass>
        <div style={{ padding: '20px' }}>
          Hello, Liquid Glass!
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Điều này sẽ hiển thị một vùng chứa kính lỏng cơ bản xung quanh văn bản "Hello, Liquid Glass!". Mặc dù đây là điểm khởi đầu tốt, sức mạnh thực sự của thư viện nằm ở các tùy chọn tùy chỉnh mở rộng của nó.

Các Khái niệm Cốt lõi

Để hiểu đầy đủ và sử dụng hiệu quả thư viện liquid-glass-react, việc hiểu các khái niệm cốt lõi làm nền tảng cho hiệu ứng là rất hữu ích. Hiệu ứng kính lỏng chủ yếu đạt được thông qua sự kết hợp của các bộ lọc SVG, bản đồ dịch chuyển (displacement maps) và quang sai màu (chromatic aberration).

Bộ lọc SVG

Bộ lọc SVG (Đồ họa Vector có thể mở rộng) là một tính năng mạnh mẽ của SVG cho phép bạn áp dụng nhiều hiệu ứng khác nhau cho đồ họa của mình. Trong trường hợp hiệu ứng kính lỏng, bộ lọc SVG được sử dụng để tạo ra sự biến dạng và làm mờ, mang lại vẻ ngoài đặc trưng cho thành phần.

Thư viện liquid-glass-react sử dụng một loạt các primitive fe (hiệu ứng bộ lọc) để đạt được hiệu ứng mong muốn. Chúng bao gồm:

feGaussianBlur: Primitive này được sử dụng để tạo hiệu ứng làm mờ nền, một thành phần chính của hiệu ứng kính.
feImage: Primitive này được sử dụng để tải bản đồ dịch chuyển, rất cần thiết để tạo ra sự biến dạng.
feDisplacementMap: Đây là phần chính. Nó sử dụng các giá trị pixel từ bản đồ dịch chuyển để làm biến dạng đồ họa nguồn.
feColorMatrix: Primitive này được sử dụng để thao tác các kênh màu của hình ảnh, đây là cách hiệu ứng quang sai màu được tạo ra.
feBlend: Primitive này được sử dụng để kết hợp các lớp hiệu ứng khác nhau, chẳng hạn như các kênh màu đỏ, xanh lá cây và xanh lam cho quang sai màu.
feComposite: Primitive này được sử dụng để kết hợp hiệu ứng cuối cùng với đồ họa nguồn ban đầu.

Bản đồ dịch chuyển (Displacement Maps)

Bản đồ dịch chuyển là một hình ảnh thang độ xám được sử dụng để làm biến dạng một hình ảnh khác. Bộ lọc feDisplacementMap sử dụng các giá trị màu của bản đồ dịch chuyển để dịch chuyển các pixel của đồ họa nguồn. Các vùng sáng hơn của bản đồ dịch chuyển sẽ đẩy các pixel của đồ họa nguồn theo một hướng, trong khi các vùng tối hơn sẽ đẩy chúng theo hướng ngược lại.

Thư viện liquid-glass-react đi kèm với ba bản đồ dịch chuyển tích hợp sẵn:

standard: Một bản đồ dịch chuyển tiêu chuẩn, mượt mà.
polar: Một bản đồ dịch chuyển với sự biến dạng dựa trên tọa độ cực.
prominent: Một bản đồ dịch chuyển với hiệu ứng "nổi bật", "sủi bọt" rõ rệt hơn.

Bạn cũng có thể cung cấp bản đồ dịch chuyển tùy chỉnh của riêng mình, hoặc thậm chí tạo động bằng cách sử dụng shader.

Quang sai màu (Chromatic Aberration)

Quang sai màu là một hiệu ứng quang học xảy ra khi một thấu kính không thể tập trung tất cả các màu vào cùng một điểm. Điều này dẫn đến hiện tượng "viền màu" xung quanh các cạnh của vật thể. Mặc dù điều này thường được coi là hiệu ứng không mong muốn trong nhiếp ảnh, nhưng nó có thể được sử dụng để tạo ra vẻ ngoài phong cách và tương lai trong đồ họa kỹ thuật số.

Thư viện liquid-glass-react mô phỏng quang sai màu bằng cách tách hình ảnh thành các kênh màu đỏ, xanh lá cây và xanh lam, sau đó dịch chuyển mỗi kênh một lượng hơi khác nhau. Điều này tạo ra hiệu ứng viền màu tinh tế nhưng hiệu quả, góp phần tạo nên cảm giác "thủy tinh" tổng thể của thành phần.

Thành phần `LiquidGlass`

Bây giờ chúng ta đã hiểu cơ bản về các khái niệm đằng sau hiệu ứng kính lỏng, hãy xem xét kỹ hơn thành phần LiquidGlass và các props của nó.

Thành phần LiquidGlass là thành phần chính của thư viện. Đây là một thành phần có khả năng tùy chỉnh cao, cho phép bạn kiểm soát mọi khía cạnh của hiệu ứng kính lỏng.

Dưới đây là một số props chính mà bạn có thể sử dụng để tùy chỉnh thành phần:

displacementScale: Kiểm soát cường độ của hiệu ứng biến dạng. Giá trị càng cao sẽ tạo ra vẻ ngoài biến dạng, "lắc lư" hơn.
blurAmount: Kiểm soát lượng làm mờ áp dụng cho nền.
saturation: Kiểm soát độ bão hòa của nền.
aberrationIntensity: Kiểm soát cường độ của hiệu ứng quang sai màu.
elasticity: Kiểm soát mức độ thành phần "co giãn" theo con trỏ chuột. Điều này tạo ra một hiệu ứng tương tác thú vị.
cornerRadius: Kiểm soát bán kính góc của thành phần.
mode: Kiểm soát bản đồ dịch chuyển nào được sử dụng. Bạn có thể chọn giữa standard, polar, prominent và shader.
overLight: Một giá trị boolean mà khi là true, sẽ làm cho kính tối hơn để dễ nhìn hơn trên nền sáng.

Tùy chỉnh

Niềm vui thực sự bắt đầu khi bạn bắt đầu thử nghiệm với các props của thành phần LiquidGlass. Bằng cách kết hợp các props khác nhau, bạn có thể tạo ra nhiều hiệu ứng độc đáo và thú vị.

Dưới đây là một ví dụ về thành phần LiquidGlass được tùy chỉnh nhiều hơn:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass
        displacementScale={100}
        blurAmount={0.5}
        saturation={140}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={32}
        mode="polar"
        overLight={false}
      >
        <div style={{ padding: '20px' }}>
          Customized Liquid Glass
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Trong ví dụ này, chúng ta đã tăng displacementScale để tạo ra sự biến dạng rõ rệt hơn, và chúng ta đã đặt mode thành polar để sử dụng bản đồ dịch chuyển cực. Chúng ta cũng đã thêm một chút elasticity để làm cho thành phần phản ứng với con trỏ chuột.

Kết luận

Thư viện liquid-glass-react là một công cụ mạnh mẽ và dễ sử dụng để tạo ra hiệu ứng kính lỏng tuyệt đẹp trong các ứng dụng React của bạn. Dù bạn là một nhà thiết kế dày dạn kinh nghiệm hay một nhà phát triển muốn thêm chút phong cách vào dự án của mình, thư viện này đều có thứ để cung cấp.

Với các tùy chọn tùy chỉnh mở rộng và các tính năng nâng cao, thư viện liquid-glass-react là công cụ hoàn hảo để tạo ra thế hệ giao diện người dùng tiếp theo. Vậy bạn còn chờ gì nữa? Hãy thử nó và xem bạn có thể tạo ra những gì!

💡