في هذا الدرس سنتعلم كيفية إنشاء انتقالات باستخدام الشادر.

أول تأثير سنقوم بإنشائه هو تأثير انتقال الشاشة:

لدينا سيطرة كاملة على تأثير الانتقال، حيث يمكننا تغيير المدة، وظيفة التخفيف، والشادر نفسه.

التأثير الثاني الذي سنقوم بإنشائه هو تأثير انتقال النموذج:

عند التلاشي للخارج، يتم إذابة النموذج وتتحول الألوان إلى اللون الأبيض، ويحدث العكس عند التلاشي للداخل.

الحزمة الابتدائية

إليك جميع النماذج ثلاثية الأبعاد التي سنستخدمها في هذا الدرس مقدمًا من قبل Ergoni ومرخصة تحت Creative Commons Attribution:

• متجر عصير الكرتون
• لفة الكعكة
• أرنب الشوكولاتة
• ❤️ فلان - قيسيلو ❤️

تستخدم الحزمة الابتدائية الحزم التالية:

• Tailwind CSS للتصميم
• Framer Motion للرسوم المتحركة
• Jotai library لإدارة الحالة المشتركة بين المكونات

الخطّين المستخدمين هما Kanit و Rubik Doodle Shadow، كلاهما من Google Fonts.

لا تتردد في تعديل أي مكونات حسب تفضيلاتك.

يمكنك تعديل الألوان من خلال اللعب بتوجيهات Leva في الزاوية العلوية اليمنى. بمجرد العثور على الألوان التي تعجبك، أضف خاصية hidden إلى مكون Leva في App.jsx:

Copy
// ...

function App() {
  // ...
  return (
    <>
      <Leva hidden />
      {/* ... */}
    </>
  );
}

// ...

انتقال الشاشة

لنبدأ بإنشاء تأثير انتقال الشاشة. سنقوم بإنشاء مكون يسمى ScreenTransition الذي سيتولى تأثير الانتقال.

لنقم بإنشاء ملف جديد يسمى ScreenTransition.jsx في مجلد components:

Copy
export const ScreenTransition = ({ transition, color }) => {
  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <meshBasicMaterial color={color} />
    </mesh>
  );
};

في هذا المكون، نحن ننشئ مستوى مسطحًا بلون يغطي الشاشة بأكملها. سنستخدم هذا المستوى للتحول بين الشاشات.

مكوننا يتلقى خاصيتين:

• transition: وهو نوع منطقي لمعرفة ما إذا كان المكون يجب أن يعرض تأثير الانتقال
• color: وهو اللون الرئيسي لتأثير الانتقال

لنقم بإضافة مكون ScreenTransition إلى App.jsx:

Copy
// ...
import { ScreenTransition } from "./components/ScreenTransition";

function App() {
  // ...
  return (
    <>
      {/* ... */}
      <Canvas camera={{ position: [0, 1.8, 5], fov: 42 }}>
        <color attach="background" args={[backgroundColor]} />
        <fog attach="fog" args={[backgroundColor, 5, 12]} />
        <ScreenTransition transition color="#a5b4fc" />
        <Suspense>
          <Experience />
        </Suspense>
      </Canvas>
    </>
  );
}

export default App;

حاليًا نقوم بإجبار تأثير الانتقال على العرض من خلال تمرير true إلى خاصية transition. سنضيف المنطق للتحكم في تأثير الانتقال لاحقًا.

عدل اللون حسب رغبتك. إذا قمت بتغييره، تأكد من تحديث اللون في ملف index.css لتجنب وميض اللون عند تحميل الموقع:

Copy
// ...

html {
  background-color: #a5b4fc;
}

المستوى في وسط المشهد.

طائرة بملء الشاشة

نريد أن تغطي الطائرة الخاصة بنا الشاشة بأكملها. يمكننا استخدام أبعاد viewport وجعلها تواجه الكاميرا، لكننا نريد أيضًا أن تكون في أعلى كل شيء.

لتحقيق ذلك، يقدم Drei مكون Hud الذي سيقوم بعرض عناصره الفرعية في أعلى كل شيء. يمكننا إضافة كاميرا ثابتة إلى مكون Hud لضمان أنها متوافقة تمامًا مع الطائرة الخاصة بنا:

Copy
import { Hud, OrthographicCamera } from "@react-three/drei";

export const ScreenTransition = ({ transition, color }) => {
  return (
    <Hud>
      <OrthographicCamera
        makeDefault
        top={1}
        right={1}
        bottom={-1}
        left={-1}
        near={0}
        far={1}
      />
      <mesh>
        <planeGeometry args={[2, 2]} />
        <meshBasicMaterial color={color} />
      </mesh>
    </Hud>
  );
};

نحن نستخدم OrthographicCamera لتغطية الشاشة بأكملها بسهولة بغض النظر عن المسافة بين الكاميرا والطائرة.

الطائرة الآن تغطي الشاشة بأكملها.

منطق الانتقال

شيء أخير قبل إنشاء الشادر المخصص، لنقم بتحديد حالة الانتقال في UI.jsx:

Copy
// ...
import { atom } from "jotai";

export const transitionAtom = atom(true);
// ...

نقوم بتعيين القيمة المبدئية إلى true لبدء تأثير التلاشي بعد تحميل الموقع.

سنستخدم هذه الحالة للتحكم في تأثير الانتقال.

لا زلنا في UI.jsx، سنقوم بتعريف ثوابت للتحكم في مدة وتأخير تأثير الانتقال:

Copy
// ...
export const TRANSITION_DELAY = 0.8;
export const TRANSITION_DURATION = 3.2;
// ...

الآن، نستبدل استدعاء الدالة setScreen بوظيفة جديدة ستتعامل مع تأثير الانتقال:

Copy
// ...
import { useAtom } from "jotai";
import { useRef } from "react";
// ...

export const UI = () => {
  // ...
  const [transition, setTransition] = useAtom(transitionAtom);
  const timeout = useRef();

  // ...
  const transitionToScreen = (newScreen) => {
    setTransition(true);
    clearTimeout(timeout.current);
    timeout.current = setTimeout(() => {
      setScreen(newScreen);
      setTransition(false);
    }, TRANSITION_DURATION * 1000 + TRANSITION_DELAY * 1000);
  };
  // ...
};

بدلاً من تعيين الشاشة الجديدة مباشرة، نقوم بتعيين حالة الانتقال إلى true ونستخدم setTimeout لتعيين الشاشة الجديدة بعد انتهاء تأثير الانتقال (مدة تأثير الانتقال بالإضافة إلى التأخير).

الآن أصبحت الدالة جاهزة، ابحث عن استدعاءات setScreen في مكون UI واستبدلها بـ transitionToScreen.

من home إلى menu:

Copy
<motion.button
  onClick={() => transitionToScreen("menu")}
  // ...
>

ومن menu إلى home:

Copy
<motion.button
onClick={() => transitionToScreen("home")}
// ...
>