zim.js 함수

zim.js는 콜벡함수를 통해 다양한 CSS애니메이팅을 구사할 수 있다.

zim.js의 애니메이팅이 얼마나 간단한지 알아보기 위해 라벨을 생성해보자.

 

 

 

라벨을 움직일 수 있는 가장 간단한 방법은 콜벡을 이용하는 방법이다.

 

 

 

프로미스 구문이 대세가 되면서부터 찬밥이 되어버린 콜벡이지만

zim.js에서는 요긴하게 사용할 수 있다.

 

<div id="zimBase2"></div>
<script>
  const zimBase2 = document.getElementById('zimBase2');
  const frame2 = new Frame( {
  	scaling:'zimBase2',
  	width:724, 
  	height:430, 
  	color:light
  });

frame2.on("ready", () => {
    const stage2 = frame2.stage;
    let stageW = frame2.width;
    let stageH = frame2.height;
  
	let label2 = new Label({
		props:{x:400},
  		text:'애니메이팅'
	}).center(stage2);
  
  	label2.animate({
		props:{x:100,y:300},
		call:()=>{
			label2.removeFrom = true;
			label2.text = '변함';
		}                    
	})
});
</script>

 

animate()내부의 코드가 너무 길어진다면,

call부분에 함수명을 넣는 아래와 같은 방식도 가능하다.

 

 

label2.animate({
	props:{x:100,y:300},
	call:done       
})


function done(){
	label2.removeFrom = true;
	label2.text = '변함';
}