zim.js 모션패스 적용

｜모션패스 애니메이팅

zim.js에서는 간단하게 '모션Path 애니메이팅'을 반응형으로 구현할 수 있다.

모션 path의 핵심은 animate( )메서드의 props속성 내의 'path'부분이다.

 

animate의 path속성은 '라인Type 오브젝트'와 조합하는 방식으로

반응형 기능을 제작할 수 있다.

 

[코드]

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

frame.on("ready", () => { 
	const stage = frame.stage; 
	let stageW = frame.width; 
	let stageH = frame.height;
  
  //생략...
  //...
  
  //세번째 Tile
  	const third = new Container(stageW/2, stageH/2)
    			.pos(0, 0, LEFT, BOTTOM);
  
  	const path = new Squiggle({
    			   showControls: false,
      			   onTop:false,
      			   color:blue
    			}).center(third);
  
  	new Triangle(40, 40, 40, purple)
  		.addTo(third)
  		.rot(90)
  		.animate({
		   props:{path: path},
		   drag:true
		});
        
	new Label('Drag triangle, click path')
		.sca(.4)
		.alp(.5)
		.pos(30, 30, LEFT, BOTTOM, third);

	stage.update();
});
</script>

 

 

Tile이 순차적으로 나타나기 위해서,

아래와 같이 각 Container마다 애니메이팅을 적용할 수 있다.

 

[코드]

//생략...
  	ANIMATE = true;
  
  	//희미하게 나타나는 Tile애니메이팅
  	first.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.7
	});
  
  	second.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.5,
	   wait:0.4*2
	});
  	
  	third.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.6,
	   wait:0.5*3
	});
    
    //생략...

 

위의 코드를 실행했을 때,

순차적으로 구현되는 컨테이너를 볼 수 있다.

 

[구현]