"JavaScript" Explode animations

This is a JS implementation of particle aggregation text or picture animation effects

Some programs are as follows

N.container = N.container[0] | | N.container;/*there is only one container*/        varwidth =N.params.width; varHeight =N.params.height; varWwidth =Document.body.clientWidth; varWheight =Document.body.clientHeight; N.container.width=width; N.container.height=height; varCTX = N.container.getcontext (' 2d '); varc = document.createelement (' Canvas '); varct = C.getcontext (' 2d ');/*used to draw a picture or text*/        varItems = []; varPicture =NULL; varRequestID =NULL; varTotal = 0; varGetrandom =function(max, min) {min= Arguments[1] | | 0; returnMath.floor (Math.random () * (Max-min + 1) + min);/*take the random number between min and Max*/        }; functionCutslice () {/*Cutslice () method to animate particles and move them to the final position*/Ctx.clearrect (0, 0, N.container.width, n.container.height);  for(vari = 0; I < c.width * C.height; i++) {                varitem =Items[i]; varTargetx =Item.targetx; varTargety =item.targety; varCurrentX =Item.currentx; varCurrentY =Item.currenty; varAx =false; varay =false; if(!item.islock) {if(Math.Abs (Targetx-currentx) <=. 5) {Item.currentx=Targetx; Ax=true; } Else{Item.currentx+ = (targetx-currentx) *item.ax;                    }; if(Math.Abs (Targety-currenty) <=. 5) {Item.currenty=targety; Ay=true; } Else{Item.currenty+ = (targety-currenty) *Item.ay;                    }; if(Ax && ay) {/*Total will be reduced by 1 only if Ax and Ay reach the end point at the same time*/ Total--; Item.islock=true;                }                }; varIX =Item.currentx; variy =Item.currenty; Ctx.putimagedata (Item.data, IX, iy); /*The Putimagedata () method puts the image data (from the specified ImageData object) back onto the canvas. */            }; if(Total > 0) {RequestID= Requestanimationframe (Cutslice);/*Do not set the interval, call repeatedly*/            } Else{cancelanimationframe (RequestID);        }; }        functionItem (data, Targetx, Targety, CurrentX, CurrentY) {/*Create an item constructor that is used to place each particle*/             This. data =data;  This. Targetx = Targetx;/*final position of aggregation*/             This. targety =targety;  This. CurrentX = CurrentX;/*Current Position*/             This. CurrentY =CurrentY;  This. Ax =. 13-math.random () *. 06;/*ax and ay indicate movement speed, respectively*/             This. ay =. 16-math.random () *. 08; }        functionDrawcanvas () {if(N.params.type = = 2) {/*for pictures*/ Picture=NewImage (); Picture.crossorigin= ""; Picture.onload=function() {                    varPW =Picture.width; varph =Picture.height; C.width= PW;/*set the width of the canvas*/C.height=ph; Ct.drawimage (picture,0, 0, PW, ph, 0, 0, PW, ph);/*draws an area of the image into context, the source image (start and width height), the starting point and the width height in the context*/Draw (PW, ph);                }; PICTURE.SRC=n.params.img; } Else{/*for Text*/                varWord =N.params.text; Ct.font= ' 60px Arial ';/*This specifies the width of the text to be measured*/                varW = ct.measuretext (word). width;/*measured text width*/                varH = 100; C.width=W; C.height=h; Ct.fillstyle= ' Deepskyblue '; Ct.font= ' 60px Arial ';/*This specifies the text to be drawn and should be consistent with the previous settings*///ct.textalign = ' center ';Ct.textbaseline = ' Middle '; Ct.filltext (Word,0, 50);/*draw text, why isn't it directly drawn up here? And to call draw??? */Draw (W, h); }            functionDraw (PW, ph) {/*The draw method is used to decompose particles into cols columns and rows, each particle height is 1, and then Getimagedata () to get the ImageData object, then create a new item instance and add it to the items array. */                varW = 1; varH = 1; varcols = Math.floor (pw/w);/*width height of picture or text*/                varrows = Math.floor (ph/h);  for(vari = 0; I < c.width * C.height; i++) {                    varx = Math.floor (i% cols);/*all elements of each row (0,0) (1,0) are found by xy ... (0,1) (a) (2,1)*/                    vary = Math.floor (I/cols); vardata = Ct.getimagedata (x * w, Y * H, W, h);/*text can also be obtained?? Copy! To get the original image data, the XY coordinates of the image area to get the data, and the pixel width and height of the area, each time 1*1 pixels are taken*/                    varVX = Getrandom (300,-300); varVY = Getrandom (500,-500);/*Expand the range so that there are particles around the picture*/                    varitem =NewItem (data, x, y, x + vx, Y +VY);                Items.push (item);                }; Total=items.length;            Cutslice (); }        }

"JavaScript" Explode animations