วิธีสร้างเอฟเฟกต์ Liquid Glass ของ Apple ใน React

Apple เป็นผู้นำด้านการออกแบบส่วนต่อประสานกับผู้ใช้มาโดยตลอด และหนึ่งในเอฟเฟกต์ล่าสุดที่น่าดึงดูดใจที่สุดของพวกเขาคือรูปลักษณ์ "liquid glass" เอฟเฟกต์นี้มีลักษณะที่ไหลลื่นเหมือนวุ้น เพิ่มความลึกและการโต้ตอบให้กับองค์ประกอบ UI เป็นวิธีที่ละเอียดอ่อนแต่ทรงพลังในการทำให้แอปพลิเคชันของคุณรู้สึกมีชีวิตชีวาและน่าสนใจยิ่งขึ้น

ในบทความนี้ เราจะสำรวจวิธีสร้างเอฟเฟกต์ที่สวยงามนี้ขึ้นใหม่ในแอปพลิเคชัน React ของคุณโดยใช้ไลบรารี liquid-glass-react

ไลบรารีนี้มีคอมโพเนนต์ที่ปรับแต่งได้สูงและใช้งานง่าย ซึ่งห่อหุ้มความซับซ้อนของเอฟเฟกต์ ช่วยให้คุณสามารถเพิ่มสัมผัสแห่งความมหัศจรรย์ของการออกแบบของ Apple ให้กับโปรเจกต์ของคุณได้อย่างง่ายดาย

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้างเอกสารประกอบ API ที่สวยงามหรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วยประสิทธิภาพสูงสุดหรือไม่?

Apidog ตอบสนองความต้องการทั้งหมดของคุณ และแทนที่ Postman ในราคาที่เข้าถึงได้มากขึ้น!

button

การเริ่มต้น

ก่อนที่เราจะเจาะลึกรายละเอียดของเอฟเฟกต์ liquid glass มาตั้งค่าไลบรารี liquid-glass-react ในโปรเจกต์ของเรากันก่อน

การติดตั้ง

หากต้องการติดตั้งไลบรารี เพียงเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm install liquid-glass-react

หรือหากคุณใช้ Yarn:

yarn add liquid-glass-react

การใช้งานพื้นฐาน

เมื่อติดตั้งไลบรารีแล้ว คุณสามารถเริ่มใช้คอมโพเนนต์ LiquidGlass ในแอปพลิเคชัน React ของคุณได้ นี่คือตัวอย่างพื้นฐานวิธีการใช้งาน:

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;

นี่จะแสดงคอนเทนเนอร์ liquid glass พื้นฐานรอบข้อความ "Hello, Liquid Glass!" แม้ว่านี่จะเป็นจุดเริ่มต้นที่ดี แต่พลังที่แท้จริงของไลบรารีนี้อยู่ที่ตัวเลือกการปรับแต่งที่หลากหลาย

แนวคิดหลัก

เพื่อให้เข้าใจและใช้งานไลบรารี liquid-glass-react ได้อย่างเต็มที่และมีประสิทธิภาพ การทำความเข้าใจแนวคิดหลักที่ขับเคลื่อนเอฟเฟกต์นี้เป็นสิ่งสำคัญ เอฟเฟกต์ liquid glass ส่วนใหญ่ทำได้โดยการรวมกันของฟิลเตอร์ SVG, displacement maps และ chromatic aberration

ฟิลเตอร์ SVG

ฟิลเตอร์ SVG (Scalable Vector Graphics) เป็นคุณสมบัติที่ทรงพลังของ SVG ที่ช่วยให้คุณสามารถใช้เอฟเฟกต์ที่หลากหลายกับกราฟิกของคุณได้ ในกรณีของเอฟเฟกต์ liquid glass ฟิลเตอร์ SVG ถูกใช้เพื่อสร้างความบิดเบี้ยวและเบลอที่ทำให้คอมโพเนนต์มีลักษณะเฉพาะ

ไลบรารี liquid-glass-react ใช้ชุดของ primitive fe (filter effect) เพื่อให้ได้เอฟเฟกต์ที่ต้องการ ซึ่งรวมถึง:

feGaussianBlur: primitive นี้ใช้เพื่อสร้างพื้นหลังเบลอซึ่งเป็นองค์ประกอบหลักของเอฟเฟกต์แก้ว
feImage: primitive นี้ใช้เพื่อโหลด displacement map ซึ่งจำเป็นสำหรับการสร้างความบิดเบี้ยว
feDisplacementMap: นี่คือหัวใจหลัก มันใช้ค่าพิกเซลจาก displacement map เพื่อบิดเบี้ยวกราฟิกต้นฉบับ
feColorMatrix: primitive นี้ใช้เพื่อจัดการช่องสีของภาพ ซึ่งเป็นวิธีที่สร้างเอฟเฟกต์ chromatic aberration
feBlend: primitive นี้ใช้เพื่อรวมเลเยอร์ต่างๆ ของเอฟเฟกต์เข้าด้วยกัน เช่น ช่องสีแดง เขียว และน้ำเงินสำหรับ chromatic aberration
feComposite: primitive นี้ใช้เพื่อรวมเอฟเฟกต์สุดท้ายเข้ากับกราฟิกต้นฉบับ

Displacement Maps

Displacement map คือภาพสีเทาที่ใช้เพื่อบิดเบี้ยวภาพอื่น ฟิลเตอร์ feDisplacementMap ใช้ค่าสีของ displacement map เพื่อเลื่อนพิกเซลของกราฟิกต้นฉบับ บริเวณที่สว่างกว่าของ displacement map จะดันพิกเซลของกราฟิกต้นฉบับไปในทิศทางหนึ่ง ในขณะที่บริเวณที่มืดกว่าจะดันไปในทิศทางตรงกันข้าม

ไลบรารี liquid-glass-react มาพร้อมกับ displacement maps ที่มีให้ในตัวสามแบบ:

standard: displacement map มาตรฐานที่เรียบเนียน
polar: displacement map ที่มีการบิดเบี้ยวตามพิกัดเชิงขั้ว
prominent: displacement map ที่มีเอฟเฟกต์ "ฟองสบู่" ที่เด่นชัดกว่า

คุณยังสามารถใส่ displacement map ที่กำหนดเองได้ หรือแม้แต่สร้างขึ้นแบบไดนามิกโดยใช้ shader

Chromatic Aberration

Chromatic aberration เป็นปรากฏการณ์ทางแสงที่เกิดขึ้นเมื่อเลนส์ไม่สามารถโฟกัสสีทั้งหมดไปที่จุดเดียวกันได้ ทำให้เกิด "ขอบสี" รอบขอบของวัตถุ แม้ว่าโดยทั่วไปจะถือว่าเป็นปรากฏการณ์ที่ไม่พึงประสงค์ในการถ่ายภาพ แต่ก็สามารถนำมาใช้เพื่อสร้างรูปลักษณ์ที่ทันสมัยและล้ำยุคในกราฟิกดิจิทัลได้

ไลบรารี liquid-glass-react จำลอง chromatic aberration โดยการแยกภาพออกเป็นช่องสีแดง เขียว และน้ำเงิน จากนั้นเลื่อนแต่ละช่องออกไปเล็กน้อย ซึ่งสร้างเอฟเฟกต์ขอบสีที่ละเอียดอ่อนแต่มีประสิทธิภาพ ซึ่งช่วยเพิ่มความรู้สึก "เหมือนแก้ว" โดยรวมให้กับคอมโพเนนต์

คอมโพเนนต์ `LiquidGlass`

ตอนนี้เรามีความเข้าใจพื้นฐานเกี่ยวกับแนวคิดเบื้องหลังเอฟเฟกต์ liquid glass แล้ว มาดูคอมโพเนนต์ LiquidGlass และ props ของมันให้ละเอียดยิ่งขึ้นกัน

คอมโพเนนต์ LiquidGlass เป็นคอมโพเนนต์หลักของไลบรารี เป็นคอมโพเนนต์ที่ปรับแต่งได้สูง ซึ่งช่วยให้คุณควบคุมทุกแง่มุมของเอฟเฟกต์ liquid glass ได้

นี่คือ props หลักบางส่วนที่คุณสามารถใช้เพื่อปรับแต่งคอมโพเนนต์:

displacementScale: ควบคุมความเข้มของเอฟเฟกต์ความบิดเบี้ยว ค่าที่สูงขึ้นจะทำให้เกิดรูปลักษณ์ที่บิดเบี้ยวและ "สั่น" มากขึ้น
blurAmount: ควบคุมปริมาณการเบลอที่ใช้กับพื้นหลัง
saturation: ควบคุมความอิ่มตัวของสีพื้นหลัง
aberrationIntensity: ควบคุมความเข้มของเอฟเฟกต์ chromatic aberration
elasticity: ควบคุมว่าคอมโพเนนต์ "ยืด" ไปทางเคอร์เซอร์เมาส์มากน้อยเพียงใด ซึ่งสร้างเอฟเฟกต์ที่สนุกและโต้ตอบได้
cornerRadius: ควบคุมรัศมีมุมของคอมโพเนนต์
mode: ควบคุมว่าจะใช้ displacement map ใด คุณสามารถเลือกระหว่าง standard, polar, prominent, และ shader
overLight: ค่าบูลีนที่เมื่อเป็นจริง จะทำให้แก้วมืดลงเพื่อการมองเห็นที่ดีขึ้นบนพื้นหลังที่สว่าง

การปรับแต่ง

ความสนุกที่แท้จริงเริ่มต้นขึ้นเมื่อคุณเริ่มเล่นกับ props ของคอมโพเนนต์ LiquidGlass ด้วยการรวม props ต่างๆ เข้าด้วยกัน คุณสามารถสร้างเอฟเฟกต์ที่ไม่เหมือนใครและน่าสนใจได้หลากหลาย

นี่คือตัวอย่างของคอมโพเนนต์ LiquidGlass ที่ปรับแต่งเพิ่มเติม:

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;

ในตัวอย่างนี้ เราได้เพิ่ม displacementScale เพื่อสร้างความบิดเบี้ยวที่เด่นชัดขึ้น และตั้งค่า mode เป็น polar เพื่อใช้ polar displacement map นอกจากนี้เรายังเพิ่ม elasticity เล็กน้อยเพื่อให้คอมโพเนนต์ตอบสนองต่อเคอร์เซอร์เมาส์

บทสรุป

ไลบรารี liquid-glass-react เป็นเครื่องมือที่ทรงพลังและใช้งานง่ายสำหรับการสร้างเอฟเฟกต์ liquid glass ที่สวยงามในแอปพลิเคชัน React ของคุณ ไม่ว่าคุณจะเป็นนักออกแบบที่มีประสบการณ์หรือนักพัฒนาที่ต้องการเพิ่มความน่าสนใจให้กับโปรเจกต์ของคุณ ไลบรารีนี้ก็มีสิ่งที่นำเสนอ

ด้วยตัวเลือกการปรับแต่งที่หลากหลายและคุณสมบัติขั้นสูง ไลบรารี liquid-glass-react จึงเป็นเครื่องมือที่สมบูรณ์แบบสำหรับการสร้างส่วนต่อประสานกับผู้ใช้ยุคใหม่ คุณจะรออะไรอยู่? ลองใช้ดูสิ แล้วดูว่าคุณจะสร้างอะไรได้บ้าง!

💡