zim.js 애니메이팅

Zim.js에서 Ticker는 requestAnimationFrame객체와 같은 역할을 한다. 

requestAnimationFrame()의 경우, 3D씬이나 게임에서 루프구문으로 주로 사용한다.

zim.js에서는 Ticker객체와 .add( )메서드를 결합함으로써

requestAnimationFrame()구문을 간편하게 구현할 수 있다.

 

 

『Ticker.add(실행함수, stage)』

 

 

animate( )

canvas를 사용했을 때 애니메이팅은 꽤 성가신 주제다.

 zim.js를 사용한다면, 애니메이팅을 간단하게 구사할 수 있다.

 

https://zimjs.com/animation/

ZIM Animation

 

.animate( )메서드는 내부의 props속성에 따라 움직임을 만들어 낼 수 있다.

중앙에서 생성된 이미지를 x축 500위치로 움직이는 코드는 아래와 같다.

 

const takbong = frame2.asset('https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/img%2Fdrugchild.jpg?alt=media&token=4ae9375c-9c91-4b83-b880-cc41ceea6dd7')
		.centerReg(stage2)
		.animate({
			props:{x:500},
			loop:true,
			rewind:true
		});

 

rewind, loop값을 'true'로 설정했을 경우

조건문을 사용하지 않더라도 애니메이팅을 반복할 수 있다.

 

 

 

애니메이팅 효과

zim.js DOC에 자세하게 소개되어 있지만

아래 효과는 알아두면 효과적으로 사용할 수 있다.

 

｜희미하게 나타나기

const takbong = frame.asset('이미지 url')
	.centerReg()
	.alp(0)
	.animate({ alpha:1 });

 

 

｜크기변경 & 나타나기

const takbong = frame.asset('이미지url')
	.centerReg()
	.animate({
		props:{ x:stageW-150, scale:0.3, alpha:0 },   //시작상태
		time:2,     								  //지속시간
		from:true  
	})

 

 

｜움직이며 나타나기

const takbong = frame.asset('이미지url')
	.centerReg()
	.loc(-500)
	.animate({
		props:{x:stageW/2},
		time:'2',
		from:true
	});

 

 

｜효과주기

const takbong = frame.asset('이미지url')
	.centerReg()
	.animate({
		props:{x:stageW-150, scale:0.3, alpha:0},  //시작상태
		time:2,     							   //지속시간
		from:true,
		ease:'bounceOut'  //날아오기, 'backOut'은 한번만 실행  
	})

 

 

｜애니메이팅 금지

ANIMATE = false; // frame내에서 애니메이팅 금지