zim.js 드로잉 기능

 

｜경계 만들기

zim.js에서 Ticker는 'requestAnimationFrame( )'과 같은 기능이다.

즉, Ticker를 통해 아래와 같은 시간에 따른 모션을 제작할 수 있다. 

 

 

[기본 코드]

<div id="zimBaseRepeat"></div>

<script> 
const frameRepeat = new Frame( { 
   scaling:'zimBaseRepeat', 
   width:724,  
   height:430,  
   color:light 
  }); 

frameRepeat.on("ready", () => { 
	const stage = frameRepeat.stage; 
	let stageW = frameRepeat.width; 
	let stageH = frameRepeat.height;
  
  	const circle = new Circle().center(stage);
  	let dir = 1; //방향
  
  	Ticker.add(()=>{
	   circle.x += 10 * dir;
		if(circle.x > stageW - circle.radius){
		   dir = -1;
		}else if(circle.x - circle.radius < 0){
		   dir = 1;
		}
	},stage);
 
	stage.update();
    
});
</script>

 

zim.js는 경계를 설정할 수 있는 Boundary( )객체를 제공하지만

위와 같이 직접 경계영역을 설정할 수 있다.

위의 코드에서 중요한 부분은 Ticker를 활용한 반복 애니메이팅 구간이다.

 

 

 

 

 

 

｜ 마우스 좌표복사

'마우스 따라하기'는 과거 자바스크립트를 대표하는 이미지였다.

zim.js는 마우스 좌표를 따라다니던 각종 효과기능을 7줄 코드로 작성할 수 있다.

 

[구현]

 

 

 

[코드]

//...생략
  const circle = new Circle()
		.center(stage)
		.sca(.5)
		.alp(.7);
  
  const dampX = new Damp(null, .4);
  const dampY = new Damp(null, .4);
  let dir = 1;
  
  Ticker.add(()=>{
	circle.x = dampX.convert(frameCopy.mouseX);
	circle.y = dampY.convert(frameCopy.mouseY);
  },stage);
 
  stage.update();
});

 

Damp( )객체는 .convert( )메서드를 통해

특정 객체의(위에서는 원) 좌표값을 프레임 내의 마우스 좌표값으로 변환한다.

 

 

 

 

 

｜드로잉

위의 코드를 조금 응용하면, 드로잉 기능을 제작할 수 있다.

미리 제작된 circle을 마우스 좌표에 단순히 매칭하는 방식이 아닌

Ticker내부에 circle을 생성하는 방식을 적용해보자.

 

[구현]

 

 

 

[코드]

//생략...
  
  	const dampX = new Damp(null, .4);
	const dampY = new Damp(null, .4);
	let dir = 1;
  
	Ticker.add(()=>{
	  let circle = new Circle()
			  .center(stage)
			  .sca(.05)
			  .alp(.3)
			  .loc(
			     dampX.convert(frameDraw.mouseX), 
			     dampY.convert(frameDraw.mouseY),
			     stage
			  );
	},stage); //Ticker End
 
 //생략...

 

위와 같이, circle을 Ticker.add( )내부로 이동하는 것만으로 '드로잉'기능을 제작할 수 있다.

 

 

 

 

 

｜사라지는 효과

드로잉을 조금 더 응용한다면, 라인과 같은 객체가 사라지는 효과를 제작할 수 있다.

 

[구현]

 

 

 

[코드]

//생략...
	const dampX = new Damp(null, .4);
	const dampY = new Damp(null, .4);
	Ticker.add(()=>{
	   let circle = new Circle(50, [green, yellow, orange])
			.center(stage)
			.alp(.2)
			.animate({
				props:{
					alpha:0,
					scale:3,
					color:blue
				},
				wait:.5,
				time:1,
				call:(target)=>{
					target.removeFrom();
				}
			})
			.loc(
				dampX.convert(frameEffect.mouseX), 
				dampY.convert(frameEffect.mouseY)
			)
	},stage) //Ticker End
  
//생략...

 

circle에 애니메이팅을 적용한 뒤,

callback함수(call:부분)로 선택객체를 삭제해주면 위와 같은 효과를 낼 수 있다.