「zim.js」Emitter & Blob 애니메이팅

zim.js는 캔버스 애니메이팅을 손쉽게 구현할 수 있다.

특히, Emitter와 같은 효과 구현에 있어, 최적의 라이브러리가 아닐까한다.

 

 

｜Emitter

Emitter구현에 앞서 원을 생성하고,

Emitter( )의 center피봇에 원을 갖다붙인다.

//생략...
      let monsterEye = new Circle(100, purple).center(stage).drag();
      new Emitter(monsterEye).center(monsterEye);
     
//생략...

 

위의 2줄 코드만으로 아래와 같은 에미터 효과를 낼 수 있다.

 

 

 

그리고

Emitter( )를 따라다니는 움직이는 원을 생성하면

간단하게 괴물 눈알 효과를 낼 수 있다.

 

 frame.makeCircles(70, true)
           .center(monsterEye)
           .alp(.9)
           .mov(0, -70)
           .animate({
              props:{scale:-.3},
              loop:true,
              rewind:true,
              sequence:.3
           })

 

[구현]

 

 

 

 

 

 

 

 

｜Blob 애니메이팅

간단한 Blob애니메이팅을 구현해보자.

Blob의 경우, 자동으로 핸들바가 생성된다.

 

따라서 사용자 반응과 관계없는 순수한 움직임을 제작하려면,

아래와 같이 'interactive:false'로 설정한다.

 

 

[코드]

//생략...
      const blob = new Blob({
          color:black,
          points:10,
          interactive:false,
          controlLength:500
      }).center(stage);

//생략...

 

 

zim.js는 지그재그 움직임을 생성할 수 있는 wiggle()메서드를 제공한다.

 

zim.js :: wiggle

 

Blob변수에 wiggle( )을 적용해보자.

 

//생략...

      loop(blob.pointControls, point=>{
          point.wiggle('x', point.x, 100, 400, 2.5, 5.5);
          point.wiggle('y', point.y, 50, 200, 2.5, 5.5);
          point.wiggle('rotation', 0, 100, 300, 5.5, 15);
      });
           
      Ticker.add(()=>{
          blob.update();
      })

 //생략...

 

BloB의 10개 포인트가 제각각 움직이는 시뮬레이션을 확인할 수 있다.

 

 

[구현]