용감한 캐릭터 선택 캐릭터 공개 효과

이 공개 효과를 만들기 위해 Valorant의 캐릭터 선택 화면에서 영감을 얻었습니다. 캐릭터 초상화를 클릭하거나 화살표 키를 사용하여 상호작용하세요!

설정

이 효과를 얻기 위해 이미지 애니메이션에는 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%)가 있으므로 최종 TranslateX 값은 0이 아닌 -50%여야 합니다. 오른쪽에서 왼쪽으로 이는 이미지가 -50%보다 큰 값에서 시작해야 함을 의미합니다.

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

      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');를 호출하기만 하면 됩니다. 그게 다야!

위 내용은 용감한 캐릭터 선택 캐릭터 공개 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!