「zim.js」 자막 내려오기

자막이 내려오는 모션을 zim.js로 제작해보자.

 

 

 

｜배경생성

Squiggle( )을 생성한 뒤 tile의 오브젝트로 넣어준다.

 

new Tile(zag, 1, 10, 0, 20)

 

1행, 10열, 간격은 20 정도로 지그제그 선을 설정하고,

다시 Scroller( )의 오브젝트로 넣어주면 Squiggle의 모션이 생성된다.

 

[코드]

//생략...
        const zag = new Squiggle({
            color:black,
            thickness:4,
            points:13,
            controlType:'none',
            interactive:false
        }).sca(2.5).addTo(stage);
      
        const tile = new Tile(zag, 1, 10, 0, 20).center(stage);
       
        new Scroller(tile, .5, -1, false, -16);
        
 //생략...

 

 

 

 

 

｜자막 넣기

자막으로 사용할 Label을 생성한 뒤,

위와 같은 방식으로 Scroller의 오브젝트로 설정한다. 

 

[코드]

       const newTile = new Label({text:'웹돌이'}).center(stage)
         let scrollerText = new Scroller(newTile, 1, -1, false, -16);
       
       Ticker.add(()=>{           
            if(newTile.y > stageH-1){
                newTile.removeFrom();
                scrollerText.backing1.removeFrom();
                scrollerText.backing2.removeFrom();
            }
        })

 

Label의 y값이 stageH보다 커질 경우, removeFrom( )을 실행하여 삭제해준다.

Scroller는 backing1, backing2, ... 형식으로 내부 객체를 저장하며,

위와 같이 backing1.removeFrom( )을 실행하면 해당 객체가 삭제된다.

 

[구현]

 

 

 

위와 같은 방식으로 Scroller효과를 가로방향으로 설정해주면,

tv아래 송출되는 자막효과를 제작할 수도 있다.

 

[code]

//생략... 
        const one = frame2.asset('img%2Fbackground.png?alt=media&token=a038f114-d092-4303-8d23-642229104425').addTo(stage);
        const two = frame2.asset('img%2FforLoad.png?alt=media&token=a5c5e837-908d-42cc-9a38-019ade90f2ba').addTo(stage).mov(0,-100);

        two.blendMode = 'difference';

        new Scroller(one, 1, 1);
        new Scroller(two, 1, -1);
//생략...

 

[가로자막 예시]