💡 Turn On Light : transform 정보 js에서 불러오기

 

요약

• 📙 프로젝트명 : Turn On Light
• ⚙️ 주요 기능 : 불을 켰다가 끔
• 🚩 목적 : 호기심, 힐링
• 📆 제작 기한 : 2023년 1월 21일 (1일간)
• 🛠️ 사용 툴 : HTML, CSS, JavaScript 
• 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/turn-on-light

 

기능설명

아래 노란색 원에 마우스를 올려 놓으면 돌아간다. 계속 돌아가다 빨간색 선이 연결이 되면 위쪽의 불이 켜지게 된다. 다시 노란색 원을 돌려 빨간 선이 어긋나면 불이 꺼지게 된다.

반응형

 

어려웠던 점 / 배웠던 점

돌아간 각도를 js에서 인식하기

function isConnected() {
    let style = window.getComputedStyle($rotator);
    let transformString =
        style["-webkit-transform"] || style["-moz-transform"] || style["transform"];

    if (!transformString || transformString == "none") {
        return true;
    }

    let startIndex = transformString.indexOf("(");
    let transformValue = +transformString.slice(startIndex + 1, -1).split(",")[1];

    return Math.abs(transformValue) < 0.15;
}

 애니매이션으로 요소가 돌아갔을 때, 돌아간 각도를 js에서 불러올 수 있을까 하는 호기심에서 시작하였다. 방법은 다음과 같았다. 우선  window.getComputedStyle()로 해당 요소의 style 정보를 불러올 수 있었다. 여기서 transform에 대한 값만 불러온다. 그럼 6개의 숫자가 주어지는데, 아마 변환 행렬이지 않나 싶다. 여기서 특정 값이 특정 범위일 때 연결되었다고 판단하였다. atan()함수를 이용하면 우리가 흔히 아는 라디안 각도 값으로 얻을 수 있나보다.

 

position 문제

.tile {
    position: relative;
    /* 이거 블로그에 쓰기 */
}

position : absolute는 부모 엘리먼트 중 position이 static이 아닌 요소를 기준으로 배치된다. 따라서 부모 요소에 position 값을 넣어줘 정상적으로 출력하게 해주었다.

 

추후에 추가하고픈 내용

리로딩 될 때 초기 각도를 랜덤하게 설정하고 싶다. 하지만 각 요소마다 애니멩션 keyframes를 다시 만들어주는 방식은 아니었으면 좋겠다. 또 돌아가는 타일이나 전선 타일을 더 추가해볼 수도 있겠다.