Melaksanakan kesan animasi pengatup berdasarkan JavaScript bukan sahaja boleh dilakukan dengan kemahiran flas_javascript yang mudah

Apabila saya melihat animasi pengatup seperti ini, saya fikir semuanya telah dilaksanakan dalam kilat Baru-baru ini, saya tiba-tiba mendapat idea dan terfikir untuk menggunakan js untuk melaksanakannya (walaupun saya bukan orang yang paling hadapan, saya seorang. .orang bersih). Walaupun kod itu telah dilaksanakan, ia agak tidak kemas Mari kita ambil gambar dahulu:

Animasi js, saya pernah berfikir bahawa hanya flash boleh mencapainya

Kod ini terutamanya beberapa pengiraan matematik, dan kemudian digabungkan dengan html dan css untuk mencipta kesan seperti denyar.

Bahagian utama kod disiarkan di bawah:

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=;
}
},);

Kod di atas adalah kesan animasi buta yang dilaksanakan menggunakan javascript. Saya harap ia akan membantu semua orang!