발로란트의 캐릭터 선택 화면에서 영감을 받아 이 공개 효과를 만들었습니다. 캐릭터 초상화를 클릭하거나 화살표 키를 사용하여 상호작용하세요!

설정

이 효과를 얻기 위해 이미지 애니메이션에는 AnimeJS를 사용하고 배경 그라데이션 전환에는 Granim.js를 사용할 예정입니다.

주인공 PNG 컷아웃과 두 가지 컬러 오버레이 버전 등 총 3개의 이미지를 사용하고 있습니다. 이러한 색상 컷아웃 중 하나는 기본 이미지보다 뒤처지고 다른 하나는 약간 앞쪽으로 촬영되어 탄력 있는 효과를 제공합니다. 배경은 Granim.js가 대상으로 삼을 캔버스 요소일 뿐입니다.

시작하기

먼저 오른쪽 화살표 키를 누를 때 에이전트의 이미지를 이동하는 이벤트 리스너를 생성하겠습니다.

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

animationRight() 함수 내에서 AnimeJS를 사용하여 에이전트의 3개 이미지 스택 컨테이너를 대상으로 삼고 이를 오른쪽에서 왼쪽으로:
이동합니다.

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

그런 다음 뒤처지고 싶은 색상을 목표로 삼아 애니메이션을 적용합니다. 모든 이미지에는 쌓아서 중앙에 배치하기 위해 position:absolute 및transform:translateX(-50%)가 있으므로 최종 변환X 값은 0이 아니라 -50%여야 합니다. [에서 이동하므로 &&&]오른쪽에서 왼쪽으로, 이는 이미지가 -50%보다 큰 값에서 시작해야 함을 의미합니다.

이징을 조작할 수는 있지만 첫 번째 추적 프로그램이 튀는 것을 방지하는 것이 가장 좋습니다. 그렇지 않으면 애니메이션이 약간 지저분해 보입니다. 우리는 '반동'을 판매하기 위해 다른 추적자를 사용할 것입니다. 두 경우 모두, 우리는 AnimeJS의 놀라운 spring() 완화 기능을 사용하고 있어 '가중감 있는' 결과를 쉽게 얻을 수 있습니다.

일본 만화 영화({ 대상: ".agent-fb-B", 번역X: [ "-32%", // 초기 상태 "-50%" // 최종 상태 ], 완화: "봄(1, 100, 40, 0)", 지속시간: 100 });

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

마무리하기 위해 다른 이미지에도 동일한 작업을 수행하지만 동일한 위치에 오기 전에 기본 이미지보다 '빠르게' 이동하여 '반동적인' 느낌을 줍니다.

일본 만화 영화({ 대상: ".agent-fb-S", 번역X: [ "-46%", // 초기 상태 "-50%" // 최종 상태 ], 완화: "봄(1, 100, 10, 20)", 지속시간: 150 });

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

그라데이션!

Granim.js를 사용하면 깔끔한 그라데이션 배경을 설정할 수 있으며 배경에 사용하려는 그라데이션 전환이나 애니메이션을 처리합니다.

var granimInstance = 새로운 Granim({ 요소: '#canvas-interactive', 방향: '대각선', 상태 : { "기본 상태": { 그라데이션: [ ['#B3FFAB', '#12FFF7'], ] }, ... } });

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

기본적으로 필요한 것은 다양한 '상태'를 정의하는 것이며 색상을 변경하려는 경우(예: 새 에이전트를 선택할 때) granimInstance.changeState('new-state');를 호출하기만 하면 됩니다. 그리고 그게 다야!