لقد ألهمتني شاشة اختيار شخصية Valorant لإنشاء تأثير الكشف هذا. انقر على صور الشخصيات أو استخدم مفاتيح الأسهم للتفاعل!

وانشاء

لتحقيق هذا التأثير، سنستخدم AnimeJS للصور المتحركة وGranim.js للانتقالات المتدرجة في الخلفية

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

ابدء

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

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowRight") {
    animationRight();
  }
});

داخل وظيفة AnimationRight () الخاصة بنا، سنستخدم AnimeJS لاستهداف حاوية مكدس الصور الثلاث الخاصة بوكيلنا ونقلها من من اليمين إلى اليسار :

anime({
        targets: ".agent-container",
        translateX: [
          "250px", // Initial state
          "0px" // Final state
        ],
        easing: "easeOutCubic",
        duration: 250
      });

بعد ذلك، نستهدف اللون الذي نريد أن نتخلف عنه ونحركه. ضع في اعتبارك أن جميع الصور لها الموضع: مطلق وتحويل: TranslateX(-50%) حتى يتم تكديسها وتوسيطها، لذا يجب أن تكون قيمة TranslatorX النهائية -50%، وليس 0. وبما أننا ننتقل من من اليمين إلى اليسار، وهذا يعني أن الصورة يجب أن تبدأ بقيمة أكبر من -50%.

يمكنك العبث بالتخفيف، لكني أجد أنه من الأفضل منع أداة التتبع الأولى من الارتداد؛ وإلا فإن الرسوم المتحركة تبدو فوضوية بعض الشيء. سنستخدم أداة التتبع الأخرى لبيع "الارتداد". في كلتا الحالتين، نحن نستخدم أداة تسهيل Spring() المذهلة من AnimeJS، مما يجعل من السهل تحقيق نتائج "ثقيلة".

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

لإكمالها، نفعل نفس الشيء مع الصورة الأخرى، لكننا نجعلها تسير "أسرع" من الصورة الرئيسية قبل الوصول إلى نفس الموضع، مما يمنحها شعورًا "بالارتداد":

  anime({
        targets: ".agent-fb-S",
        translateX: [
          "-46%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 10, 20)",
        duration: 150
      });

التدرجات!

باستخدام Granim.js، يمكنك إعداد خلفية متدرجة أنيقة، وسوف تتعامل مع التحولات المتدرجة أو أي رسوم متحركة تريد استخدامها لخلفيتك

var granimInstance = new Granim({
    element: '#canvas-interactive',
    direction: 'diagonal',
    states : {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
            ]
        },
        ...
    }
});

كل ما تحتاجه بشكل أساسي هو تحديد "حالات" مختلفة وعندما تريد تغيير الألوان (على سبيل المثال عند اختيار وكيل جديد) عليك فقط الاتصال بـ granimInstance.changeState('new-state'); وهذا كل شيء!