블라인드 애니메이션 사고방식

모두가 블라인드 애니메이션 효과를 본 적이 있다고 믿습니다. 그러면 저는 간단하게 이 블라인드의 애니메이션 효과가 어떻게 실현되었는지 소개해 드리겠습니다. 우선 큰div를 만들어서 저희가 그림을 자른 후의 작은 div를 불러야 합니다. 저는 블라인드의 난점은 몇 장보다 큰 작은 그림을 자르기 전에 몇 장을 자르는지 확인해야 한다고 생각합니다.

    var col = 10;//       
    var rows = 4;//       

그 다음에 순환 DIV를 만드는 것은 먼저 문서 파편을 만들어서 만든 DIV가 용기에 추가된 회류의 횟수를 줄이고 성능 소모를 줄이는 것이 가장 좋다. (회류 재그림에 관해서는 내 블로그에서 주제를 찾을 수 있다. 여기는 자세히 말하지 않겠다)

var a=[];
    var frg=document.createDocumentFragment();
    for(var i=0;i<col*rows;i++){
        var oDiv=document.createElement("div");
        var w=box.offsetWidth;
        var h=box.offsetHeight;
        with(oDiv.style){
            width=w/col+"px";//    DIV   
            height=h/rows+"px";//    div   
            var l=i%col*(w/col);//     
            left=-900+"px";//  div
            oDiv.l=l;
            var h=Math.floor(i/col)*(h/rows);
            top=200+"px";
            oDiv.h=h;
            backgroundPosition="-"+l+"px -"+h+"px"
        }
        frg.appendChild(oDiv)
        a.push(oDiv)
    }
    box.appendChild(frg);

이 작은div를 만들면 움직일 수 있어요. 제가 예전에 쓴 tween 애니메이션 라이브러리로 블라인드 효과를 볼 수 있어요. 간단한 코드는 다음과 같아요.

var oDivs=box.getElementsByTagName("div");
    for(var i=0;i< a.length;i++){
        ;(function(i){
            window.setTimeout(function(){
                animate(oDivs[i],{left:oDivs[i].l,top:oDivs[i].h},200,['Back','easeInOut'])
            },400*(i%col))
        })(i)
    }

이렇게 하면 간단한 블라인드 애니메이션이 완성된다. 어떻게 순환해서 재생하는지, 한 명의 관중이 스스로 모색할 수 있기 때문에 나는 코드를 쓰지 않을 것이다.