190827 베네치아 프로젝트 후기 2

함수 정의와 동시 실행

함수의 선언과 할당은 보통

var saySomething = function(){console.log(‘bla bla’)};
function saySomething(){console.log(‘bla bla’)} ;

이러한 방식으로 진행된다.

그러나 프로젝트를 진행하면서 헷갈리는 라인이 있었다.

var gameLoop = setInterval(function () {작업},1000)

위와 같은 형태는 선언,할당과 동시에 우변이 실행이 되는 것이었다.

따라서 해당 형태를 간소화 해보면

var gameLoop = doSomething(); 위와 같이 볼 수 있다.

gameLoop은 doSomething();의 실행까지의 동작을 할당받게 된다.

위에 실행이 되지 않던 두 라인과의 차이점은

우변의 마지막요소가 (), 즉 parameter 부분이다.

이 방식을 처음에 실행은 포함되지 않던 함수정의에 적용해 보면,

var saySomething= function(){console.log(‘bla bla’)}();

이렇게 적용이 가능하다.

웹애니메이션 api

이번 프로젝트를 하면서 블록이 땅에 떨어지면, 체력이 깎이고, 해당 element를 삭제하는 기능을 구현해야 했다.

OOP연습을 하느라 Block객체를 이용해 블록 객체를 생성하면 해당 동작이 개별 블록마다 진행되도록 의도했다.

function Block(word,fallSec) {
this.element = document.createElement(‘div’);
let ele = this.element;
ele.className = ‘blocks’;
ele.innerText = word;
ele.id = word;
ele.style.left = 210+Math.floor((Math.random()*1300))+’px’;
ele.style.display = ‘inline-block’;
ele.style.position = ‘absolute’;
ele.style.WebkitAnimation = “linear mymove “+fallSec+’s’; // Code for Chrome, Safari and Opera
ele.animation = “linear mymove “+fallSec+’s’; // Standard syntax
ele.addEventListener(“webkitAnimationEnd”, myEndFunction); // 바닥에 닿으면 사라진다.
main.appendChild(this.element);
}

이 경우에는 element의 style(.css)에 animation속성을

‘linear mymove 애니메이션진행시간(duration)’ 으로 설정했다.

mymove는 @keyframes 객체이다.

keyframes는 animation의 중간 변화 과정들을 보다 세밀하게 지명할 수 있다.

@keyframes mymove {      //css에서 정의 할 경우
from {top: 120px;}
to {top: 760px;}
-----------------------------------------------------
}
var mymove = [         //js에서 정의한 keyframes
        keyframes
        { transform: 'translateY(120px)' },
        { transform: 'translateY(760px)' }
        ];

keyframes는 css와 js에서 이렇게 선언 할 수 있다.

!주의

@-webkit-keyframes mymove {}

이런식으로 -webkit-(크로스브라우징 접두어)을 앞에 붙여주면 사파리,크롬에서 지원하게 된다.

없으면..?

var ani = ele.animate(
 mymove,5000
 );

위와 같이 키프레임을 5000ms동안 한 번 실행하게 된다.

ani.onfinish = nextFuntion;

이런식으로 애니메이션에 대해 수행 완료 시 호출할 callback함수를 지정할 수 있다.

혹은

ele.addEventListener(“webkitAnimationEnd”, myEndFunction)
ele.addEventListener(“animationend”, myEndFunction)

엘레먼트에 걸려있는 애니메이션이 종료 되면

2번째 파라미터로 전달되는 함수를 실행하게 할 수 있다.

! 이 때에도 크로스브라우징 접두어를 붙여줘야 한다.