공 움직이기

우선 자바스크립트로 css를 추가하는 법을 알아보자

ball클래스를 가진 공하나만 있다

(function () {
    const ballElem = document.querySelector('.ball');

    function clickHandler() {
        ballElem.style.transform = 'translate(50vw,50vh)';
        ballElem.style.transition = '2s';
    }

    ballElem.addEventListener('click', clickHandler)
})();

공을 클릭하면

transform : translate(50vw, 50vh);
transition : 2s;

를 ball엘리먼트의 css에 추가하는 코드이다

클릭하면 css가 적용되어서 공이 중앙으로 움직인다

이때까지 배운 걸 조금 응용해서 클릭한 곳으로 공을 움직이게 하고 싶으면 어떻게 할까?

clickHandler의 event객체를 이용하면 된다

클릭 이벤트가 발생했을 때 event객체를 출력해보자

우리가 클릭한 좌표값이 clientX,clientY로 나타난다

이를 이용해서 이벤트는 전역 객체인 window에 부여하고 안의 코드를 수정해보자

(function () {
    const ballElem = document.querySelector('.ball');

    function clickHandler(e) {
        console.log(e.clientX,e.clientY);
        ballElem.style.transform = 'translate('+e.clientX+'px,'+e.clientY+'px)';
    }

    window.addEventListener('click', clickHandler)
})();

편의를 위해 ballElem.style.transition = '2s'; 는 css의 .ball{}안으로 옮겼다

누른 곳으로 공이 잘 움직이는 것을 볼 수 있는데

자세히보면 무언가 이상하다

마우스 커서 중앙에 공이 오지 않고 약간 초점이 어긋나 있는데 두가지 이유가 있다

1. ball의 margin값 때문이다

아주 간단하다 ball의 css값에서 margin값을 0으로 만들어 주면된다

그렇게 설정해도 초점이 살짝 어긋나 있는데

볼의 좌측 상단을 기준으로 마우스커서의 위치로 움직여서 그렇다

이또한 간단하게 ball의 반지름만큼 좌우값을 빼서 기준점을 공의 중앙으로 맞춰주면된다

ballElem.style.transform = 'translate('+(e.clientX-15)+'px,'+(e.clientY-15)+'px)';

이렇게 하면 이제 우리가 원하는대로 깔끔하게 공이 움직인다

이제 이벤트 움직이는 이벤트를 조작해 보자

transition event

소개할 이벤트는

transitionstart와 transitionend 이벤트이다

이벤트들의 이름은 항상 직관적이듯 transition이 시작할 때 발생하는 이벤트와 transition이 끝날 때 발생한다

위의 예제를 이어받아서 마우스의 클릭 지점으로 공의 이동이 끝났을 때 공의 색을 변화시켜 보자

    .end{
        background-color: black;
    }

css의 코드

    function transitionHandler(e) {
        ballElem.classList.add('end');
    }
    ballElem.addEventListener('transitionend', transitionHandler)

 

보는 것 처럼 transition이 끝나면 이벤트 핸들러가 실행된다

start도 마찬가지라서 넘어가도록 하고

transition의 이벤트 객체에 대해서 조금 알아보자

이벤트 객체의 propertyName은 수행한 동작의 이름 elapsedTime은 걸린 시간을 나타낸다

예시를 보자

    function transitionHandler(e) {
        ballElem.classList.add('end');
        console.log(e.elapsedTime);
        console.log(e.propertyName);
    }
    ballElem.addEventListener('transitionend', transitionHandler)

마찬가지로 위의 예제를 이어받아 이벤트 핸들러가 실행된 뒤 elapsedTime와 propertyName를 출력해 봤다

마우스 커서로까지 이동하는 transition을 수행하는데 2초

그후 background-color: black을 수행하는데 2초가 걸렸다는 내용의 로그다

animation event

애니메이션의 animationstart와 animationend 이벤트는 트랜지션과 동일하다

앞서 end를 봤으니 애니메이션에선 start를 테스트 해보자

    @keyframes move {
        to {
            transform: translate3d(50vw,50vh,0);
        }
    }
    .ani{
        animation: move 1s linear infinite alternate;
    }
    .start {
        background-color: black;
    }
    .iterator{
        background-color: aqua;
    }

애니메이션 예제에 쓰일 css코드

    const ballElem = document.querySelector('.ball');

    function clickHandler() {
        ballElem.classList.add('ani');
    }

    window.addEventListener('click', clickHandler);

화면 아무곳이나 클릭하면 애니메이션이 실행되게하는 자바스크립트 코드이다

여기에 animationstart 이벤트를 넣어보자

    function animationHandler() {
        ballElem.classList.add('start');
    }

    ballElem.addEventListener('animationstart', animationHandler)

애니메이션스타트동영상

animation 이벤트 중 하나를 더 알아보자

animationiteration이벤트인데 말그대로 반복 동작에서 조작을 할 수 있는 이벤트다

    function animationHandler(e) {
        console.log(e);
    }

    ballElem.addEventListener('animationiteration', animationHandler);

사용하기전에 이벤트 객체를 한번 출력해 보자

어.. 다른 건 잘 모르겠고 내가 당장 써먹을 수 있는 숫자가 하나 보인다

elapsedTime의 숫자가 반복 횟수만큼 올라가고 있는 것을 보아 저걸 유용하게 써 먹을 수 있을 것 같다

    function animationHandler(e) {
        if(e.elapsedTime >3){
            ballElem.classList.add('iterator');
        }
    }

    ballElem.addEventListener('animationiteration', animationHandler);

반복 횟수가 3이 넘어가면 ball클래스에 iterator을 추가시켜서 색을 변화시키게 만들어봤다