كيفية إنشاء تأثير زجاج سائل آبل في رياكت

لطالما كانت Apple في طليعة تصميم واجهة المستخدم، ومن أروع التأثيرات الحديثة التي قدمتها هو مظهر "الزجاج السائل". هذا التأثير، الذي يتميز بمظهره السائل الشبيه بالهلام، يضيف طبقة من العمق والتفاعل إلى عناصر واجهة المستخدم. إنها طريقة دقيقة لكنها قوية لجعل تطبيقاتك تبدو أكثر ديناميكية وجاذبية.

في هذا المقال، سنستكشف كيفية إعادة إنشاء هذا التأثير المذهل في تطبيقات React الخاصة بك باستخدام مكتبة liquid-glass-react.

توفر هذه المكتبة مكونًا عالي التخصيص وسهل الاستخدام يغلف تعقيد التأثير، مما يتيح لك إضافة لمسة من سحر تصميم Apple إلى مشاريعك بأقل جهد.

البدء

قبل أن نتعمق في تعقيدات تأثير الزجاج السائل، دعنا نجهز مكتبة 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;

سيؤدي هذا إلى عرض حاوية زجاج سائل أساسية حول النص "Hello, Liquid Glass!". في حين أن هذه نقطة بداية جيدة، فإن القوة الحقيقية للمكتبة تكمن في خيارات التخصيص الشاملة.

المفاهيم الأساسية

لتقدير مكتبة liquid-glass-react واستخدامها بفعالية، من المفيد فهم المفاهيم الأساسية التي تشغل التأثير. يتم تحقيق تأثير الزجاج السائل بشكل أساسي من خلال مجموعة من فلاتر SVG وخرائط الإزاحة والانحراف اللوني.

فلاتر SVG

فلاتر SVG (Scalable Vector Graphics) هي ميزة قوية في SVG تتيح لك تطبيق مجموعة واسعة من التأثيرات على رسوماتك. في حالة تأثير الزجاج السائل، تُستخدم فلاتر SVG لإنشاء التشوه والضبابية التي تمنح المكون مظهره المميز.

تستخدم مكتبة liquid-glass-react سلسلة من بدائيات fe (تأثير الفلتر) لتحقيق التأثير المطلوب. وتشمل هذه:

• feGaussianBlur: تُستخدم هذه البدائية لإنشاء ضبابية الخلفية التي تعد مكونًا رئيسيًا لتأثير الزجاج.
• feImage: تُستخدم هذه البدائية لتحميل خريطة الإزاحة، وهي ضرورية لإنشاء التشوه.
• feDisplacementMap: هذا هو نجم العرض. يستخدم قيم البكسل من خريطة الإزاحة لتشويه الرسم المصدر.
• feColorMatrix: تُستخدم هذه البدائية لمعالجة قنوات ألوان الصورة، وهي الطريقة التي يتم بها إنشاء تأثير الانحراف اللوني.
• feBlend: تُستخدم هذه البدائية لدمج الطبقات المختلفة للتأثير، مثل القنوات الحمراء والخضراء والزرقاء للانحراف اللوني.
• feComposite: تُستخدم هذه البدائية لدمج التأثير النهائي مع الرسم المصدر الأصلي.

خرائط الإزاحة

خريطة الإزاحة هي صورة ذات تدرج رمادي تُستخدم لتشويه صورة أخرى. يستخدم فلتر feDisplacementMap قيم ألوان خريطة الإزاحة لتحويل بكسلات الرسم المصدر. المناطق الأفتح في خريطة الإزاحة ستدفع بكسلات الرسم المصدر في اتجاه واحد، بينما المناطق الأغمق ستدفعها في الاتجاه المعاكس.

تأتي مكتبة liquid-glass-react مع ثلاث خرائط إزاحة مدمجة:

• standard: خريطة إزاحة قياسية وناعمة.
• polar: خريطة إزاحة مع تشوه يعتمد على الإحداثيات القطبية.
• prominent: خريطة إزاحة ذات تأثير أكثر وضوحًا و"فقاعيًا".

يمكنك أيضًا توفير خريطة إزاحة مخصصة خاصة بك، أو حتى إنشاء واحدة ديناميكيًا باستخدام shader.

الانحراف اللوني

الانحراف اللوني هو تأثير بصري يحدث عندما تفشل العدسة في تركيز جميع الألوان في نفس النقطة. يؤدي هذا إلى "تلطيخ" الألوان حول حواف الكائنات. في حين أن هذا يعتبر عمومًا تأثيرًا غير مرغوب فيه في التصوير الفوتوغرافي، إلا أنه يمكن استخدامه لإنشاء مظهر أنيق ومستقبلي في الرسومات الرقمية.

تحاكي مكتبة liquid-glass-react الانحراف اللوني عن طريق تقسيم الصورة إلى قنواتها الحمراء والخضراء والزرقاء، ثم إزاحة كل قناة بمقدار مختلف قليلاً. يؤدي هذا إلى إنشاء تأثير تلطيخ لوني دقيق ولكنه فعال يضيف إلى الشعور العام "الزجاجي" للمكون.

مكون LiquidGlass

الآن بعد أن أصبح لدينا فهم أساسي للمفاهيم وراء تأثير الزجاج السائل، دعنا نلقي نظرة فاحصة على مكون LiquidGlass وخصائصه (props).

مكون LiquidGlass هو المكون الرئيسي للمكتبة. إنه مكون عالي التخصيص يتيح لك التحكم في كل جانب من جوانب تأثير الزجاج السائل.

فيما يلي بعض الخصائص الرئيسية التي يمكنك استخدامها لتخصيص المكون:

• displacementScale: يتحكم في شدة تأثير التشوه. قيمة أعلى ستؤدي إلى مظهر أكثر تشوهًا و"متذبذبًا".
• blurAmount: يتحكم في مقدار الضبابية المطبقة على الخلفية.
• saturation: يتحكم في تشبع الخلفية.
• aberrationIntensity: يتحكم في شدة تأثير الانحراف اللوني.
• elasticity: يتحكم في مدى "تمدد" المكون نحو مؤشر الفأرة. يؤدي هذا إلى إنشاء تأثير تفاعلي ممتع.
• cornerRadius: يتحكم في نصف قطر زاوية المكون.
• mode: يتحكم في خريطة الإزاحة المستخدمة. يمكنك الاختيار بين standard وpolar وprominent وshader.
• overLight: قيمة منطقية (boolean) تجعل الزجاج أغمق عند تعيينها على true، وذلك لتحسين الرؤية على الخلفيات الفاتحة.

التخصيص

يبدأ المرح الحقيقي عندما تبدأ في اللعب بخصائص مكون LiquidGlass. من خلال الجمع بين الخصائص المختلفة، يمكنك إنشاء مجموعة واسعة من التأثيرات الفريدة والمثيرة للاهتمام.

إليك مثال على مكون 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 لاستخدام خريطة الإزاحة القطبية. لقد أضفنا أيضًا بعض elasticity لجعل المكون يتفاعل مع مؤشر الفأرة.

الخلاصة

مكتبة liquid-glass-react هي أداة قوية وسهلة الاستخدام لإنشاء تأثيرات زجاج سائل مذهلة في تطبيقات React الخاصة بك. سواء كنت مصممًا متمرسًا أو مطورًا يتطلع إلى إضافة بعض اللمسات الجمالية إلى مشاريعك، فإن هذه المكتبة لديها ما تقدمه.

بفضل خيارات التخصيص الشاملة والميزات المتقدمة، تعد مكتبة liquid-glass-react الأداة المثالية لإنشاء الجيل القادم من واجهات المستخدم. فماذا تنتظر؟ جربها وشاهد ما يمكنك إنشاؤه!