La mise en œuvre d'effets d'animation d'obturateur basés sur JavaScript n'est pas seulement possible avec de simples compétences en flas_javascript

Quand j'ai vu ce genre d'animation d'obturateur, j'ai pensé que tout était implémenté en flash. Récemment, j'ai soudainement eu une idée et j'ai pensé à utiliser js pour l'implémenter (même si je ne suis pas une personne front-end, je suis un développeur). personne .net). Bien que le code ait été implémenté, il est assez compliqué. Prenons d'abord une photo :

Une animation js, je pensais que seul le flash pouvait y parvenir

Le code est principalement constitué de calculs mathématiques, puis combiné avec du HTML et du CSS pour créer un effet de type flash.

La partie principale du code est publiée ci-dessous :

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

Le code ci-dessus est un effet d'animation aveugle implémenté en utilisant javascript. J'espère qu'il sera utile à tout le monde !