[TIL] 동전 모션 구현

2024.05.06

const moveElement = (event) => {
  const element = event.target;
  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = element;
  const left = event.pageX - offsetLeft;
  const top = event.pageY - offsetTop;
  const centerX = left - offsetWidth / 2;
  const centerY = top - offsetHeight / 2;

  gsap.to(element, 0.01, {
    x: centerX,
    y: centerY,
    ease: Elastic.easeOut,
  });
  if (700 < centerX) {
    element.src = "./img/coins/gold01.svg";
  } else if (600 < centerX) {
    element.src = "./img/coins/gold07.svg";
  } else if (500 < centerX) {
    element.src = "./img/coins/gold06.svg";
  } else if (400 < centerX) {
    element.src = "./img/coins/gold05.svg";
  } else if (300 < centerX) {
    element.src = "./img/coins/gold04.svg";
  } else if (200 < centerX) {
    element.src = "./img/coins/gold03.svg";
  } else if (100 < centerX) {
    element.src = "./img/coins/gold02.svg";
  } else {
    element.src = "./img/coins/gold01.svg";
  }
};

const checkPos = (centerX, centerY) => {
  return centerX > 270 && centerX < 400 && centerY > 30 && centerY < 160;
};

const coinInsertPlay = () => {
  const coinElement = document.querySelector(".coin");
  coinElement.classList.add("hidden");
  coinElement.classList.add("blocked");
  const coin = document.querySelector(".animation-coin");
  coin.classList.remove("hidden");
  coin.style.top = "10px";
  coin.style.zIndex = "4";

  setTimeout(() => {
    coin.style.top = "-30px";
    setTimeout(() => {
      coin.style.zIndex = "2";
      setTimeout(() => {
        coin.style.top = "100px";
      }, 300);
    }, 1000);
  }, 600);
};

const moveStart = (event) => {
  const insertGuide = document.querySelector(".guide-line");
  insertGuide.classList.remove("hidden");
  const element = event.target;
  element.style.zIndex = 14;
  event.preventDefault();
  element.addEventListener("mousemove", moveElement);
};

const moveStop = (event) => {
  const insertGuide = document.querySelector(".guide-line");
  insertGuide.classList.add("hidden");
  const element = event.target;
  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = element;
  const left = event.pageX - offsetLeft;
  const top = event.pageY - offsetTop;
  const centerX = left - offsetWidth / 2;
  const centerY = top - offsetHeight / 2;
  element.style.zIndex = 12;

  element.src = "./img/coins/gold01.svg";
  element.removeEventListener("mousemove", moveElement);

  if (checkPos(centerX, centerY)) {
    checkCondition();
  }

  gsap.to(element, 0.5, {
    x: 0,
    y: 0,
    ease: Elastic.easeOut.config(1.5, 0.2),
  });
};

const magneticElement = (element) => {
  element.addEventListener("mousedown", moveStart);
  element.addEventListener("mouseup", moveStop);
  element.addEventListener("mouseout", moveStop);
};

const coinElement = document.querySelector(".coin");
magneticElement(coinElement);

const getCoin = () => {
  coinElement.classList.add("hidden");
  gsap.to(coinElement, {
    duration: 0.1,
    y: -174,
  });
  setTimeout(() => {
    coinElement.classList.remove("hidden");
    coinElement.classList.remove("blocked");
    gsap.to(coinElement, {
      duration: 0.8,
      ease: "bounce.out",
      y: 0,
    });
  }, 200);
}

const getCoinBtn = document.querySelector(".get-coin-btn");
getCoinBtn.addEventListener("click", (e) => {
  getCoinBtn.classList.add("working");
  getCoin();
  setTimeout(()=>{
    getCoinBtn.classList.remove("working");
  },1000)
});

js에서 event 발생 시 제공하는 offset 값들을 이용해서, 코인의 위치가 변할 때마다 이미지를 각도에 맞게 변경해서 코인의 형태가 변하도록 코드를 작성해보았다.

코인 움직일때마다 각도 바뀌는 거 개귀엽다.