JavaScript 기반의 셔터 애니메이션 효과 구현은 단순한 flas_javascript 기술만으로는 가능하지 않습니다.

이런 셔터 애니메이션을 보고 플래시로 다 구현한 줄 알았습니다. 최근에 갑자기 js를 사용해서 구현해볼까 하는 생각도 들었습니다. .net 사람). 코드가 구현되었지만 먼저 사진을 찍어 보겠습니다.

js 애니메이션은 플래시만이 가능하다고 생각했어요

코드는 주로 몇 가지 수학적 계산으로 구성되어 있으며 html 및 css와 결합하여 플래시와 같은 효과를 만듭니다.

코드의 주요 부분은 아래와 같습니다.

function all(books){
for(var i=;i<self.rows;i++) {
for (var j = ; j < self.columns; j++) {
if(!books[i][j])return false;
}
}
return true;
}
function resetBooks(books){
for(var i=;i<self.rows;i++) {
for (var j = ; j < self.columns; j++) {
books[i][j]=false;
}
}
return true;
}
var self=this,timer=null,_iindex= ;
var initdir=[[[,],[,]],[[-,],[,]],[[,-],[-,]],[[,-],[,]],[[,-],[,],[,],[-,]]],dir=initdir[];
var weight=[,,,,];
var initpos=[[{x:,y:-}],[{x:self.columns-,y:-}],[{x:self.columns-,y:self.rows}],[{x:,y:self.rows}],[{x:self.columns/,y:self.rows/}]];
timer=setInterval(function(){
var n=[];
for(var i=;i<self.preDivs.length;i++){
var _div=null,x= ,y=;
for(var j=;j<dir.length;j++){
x=self.preDivs[i].x+dir[j][];
y=self.preDivs[i].y+dir[j][];
if(x>=&&y>=&&x<self.columns&&y<self.rows&&!self.books[y][x]){
self.books[y][x]=true;
_div=self.zzDivStatck[y][x];
n.push({x:x,y:y});
_div.style.backgroundImage = "url(" + self.zzImages[_iindex] + ")";
_div.style.backgroundPositionX = (-x * self.zzDivW) + "px ";
_div.style.backgroundPositionY = (-y * self.zzDivH) + "px";
}
}
}
self.preDivs=n;
if(all(self.books)){
resetBooks(self.books);
var _r=util.randomWeight(weight);
self.preDivs = initpos[_r];
dir=initdir[_r];
_iindex++;
}
if(_iindex>=+self.zzImages.length){
_iindex=;
}
},);

위 코드는 자바스크립트를 이용하여 구현한 블라인드 애니메이션 효과입니다. 많은 분들께 도움이 되었으면 좋겠습니다!