블라인드 애니메이션 사고방식
3349 단어 애니메이션
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)
}
이렇게 하면 간단한 블라인드 애니메이션이 완성된다. 어떻게 순환해서 재생하는지, 한 명의 관중이 스스로 모색할 수 있기 때문에 나는 코드를 쓰지 않을 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SwiftUI에서 Lottie를 사용하여 풍부한 애니메이션을 쉽게 실현해보세요이하의 기사를 이전 썼지만, 최근 SwiftUI를 사용해 Lottie를 이용했으므로 그 방법에 대해서 써 간다. Lottie에 관한 설명은 여러가지 기사에서도 되고 있으므로 여기서는 언급하지 말고, SwiftUI상에...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.