Heim  >  Artikel  >  Web-Frontend  >  Die Implementierung von Shutter-Animationseffekten auf Basis von JavaScript ist nicht nur mit einfachen flas_javascript-Kenntnissen möglich

Die Implementierung von Shutter-Animationseffekten auf Basis von JavaScript ist nicht nur mit einfachen flas_javascript-Kenntnissen möglich

WBOY
WBOYOriginal
2016-05-16 15:13:001329Durchsuche

Als ich diese Art von Verschlussanimation sah, dachte ich, sie wäre alles in Flash implementiert. Kürzlich hatte ich plötzlich eine Idee und dachte darüber nach, sie mit js zu implementieren (obwohl ich kein Front-End-Mensch bin, bin ich ein .net-Person). Obwohl der Code implementiert wurde, ist er ziemlich chaotisch. Machen wir zuerst ein Foto:

Eine JS-Animation, ich dachte immer, dass nur Flash das erreichen könnte

Der Code besteht hauptsächlich aus einigen mathematischen Berechnungen und wird dann mit HTML und CSS kombiniert, um einen Flash-ähnlichen Effekt zu erzeugen.

Der Hauptteil des Codes ist unten aufgeführt:

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

Der obige Code ist ein mit Javascript implementierter Blindanimationseffekt. Ich hoffe, er ist für alle hilfreich!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn