Heim > Artikel > Web-Frontend > Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 8, Bildverarbeitung + Partikeleffekte

Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 8, Bildverarbeitung + Partikeleffekte

黄舟Original: 2017-01-17 16:58:181349Durchsuche

Teil 8, Bildverarbeitung + Partikeleffekte

Verwenden einer ActionScript-ähnlichen Syntax zum Schreiben der HTML5-Serie. Jetzt sollten Sie in der Lage sein, zunächst die verschiedenen Aspekte zu erstellen Bild. Effekte
Um eine Vorschau verschiedener Effekte anzuzeigen, sehen Sie sich bitte das Bild unten an

Wenn Sie den Effekt und den Code nicht sehen können, laden Sie bitte einen Browser herunter das HTML5 unterstützt

http://fsanguo.comoj.com/html5/jstoas07/index.html

Lufylegend.js Engine-Download-Link

http://lufylegend. com/lufylegend

Denn nachdem die Engine gekapselt wurde, wurden einige Anpassungen am vorherigen Code vorgenommen und einige Attribute gelöscht. Hier ist der gleiche Partikeleffekt, den ich mit der neuen Version der Engine entwickelt habe

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>粒子效果</title>  
</head>  
<body>  
<div id="mylegend">loading......</div>  
<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>   
<script type="text/javascript">  
init(40,"mylegend",300,300,main);  
var imgData = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];  
var imglist;  
var mainBitmap,mainBitmapHeight;  
var windList = [];  
var backLayer;  
function main(){  
    LLoadManage.load(  
        imgData,  
        function(progress){},  
        loadover  
    );  
}  
function loadover(result){  
    imglist = result;  
    //加入一个LSprite对象  
    backLayer = new LSprite();  
    addChild(backLayer);  
    //加入一个LBitmap对象来显示一张大图片，将图片加载到backLayer对象上  
    mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));  
    backLayer.addChild(mainBitmap);  
    //将LBitmap对象初始的高度保存起来  
    mainBitmapHeight = mainBitmap.getHeight();  
    //给LSprite对象加载一个贞事件，即时间轴  
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
}  
function onframe(){  
    var bitmapdata;  
    var bitmap;  
    var addY,addX;  
  
    if(mainBitmap){  
        //通过LBitmapData对象的setProperties函数，来修改LBitmapData对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addY个单位  
        addY = 3;  
        mainBitmap.y += addY;  
        if(mainBitmap.y >= mainBitmapHeight){  
            addY += mainBitmapHeight - mainBitmap.y;  
            mainBitmap.y = mainBitmapHeight;  
            //当LBitmapData对象显示图片的范围变为0之后，将其从backLayer上移除  
            backLayer.removeChild(mainBitmap);  
        }else{  
            mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));  
        }  
        //下面是将图片一行一行的分解，每运行一次分解一行  
        var arr = [];  
        for(i=0;i<mainBitmap.getWidth();i += 3){  
            addX = 3;  
            if(i+addX > mainBitmap.getWidth()){  
                addX = mainBitmap.getWidth() - i;  
            }  
            //通过设定LBitmapData对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组  
            bitmapdata = new LBitmapData(imglist["img"],i,mainBitmap.y-addY,addX,addY);  
            bitmap = new LBitmap(bitmapdata);  
            bitmap.x = i;  
            bitmap.y = mainBitmap.y-addY;  
            backLayer.addChild(bitmap);  
            arr.push(bitmap);  
        }  
        if(mainBitmap.y >= mainBitmapHeight)mainBitmap=null;  
        //将分解后的一行小图片压入windList数组  
        windList.push(arr);  
    }  
    windrun();  
}  
function windrun(){  
    var i,j,flag,ml=1;  
    //循环windList数组中的每一张小图片，随机向左上右等方向进行移动  
    for(i=0;i<windList.length;i++){  
        if(windList[i].length == 0){  
            windList.splice(i,1);  
            i--;  
            continue;  
        }  
        for(j=0;j<windList[i].length;j++){  
            if(windList[i][j].i == null)windList[i][j].i=1;  
            flag = Math.random();  
            if(flag < 0.3){  
                windList[i][j].x += ml*windList[i][j].i;  
            }else if(flag < 0.6){  
                windList[i][j].x -= ml*windList[i][j].i;  
            }else{  
                windList[i][j].y -= ml*windList[i][j].i;  
            }  
            windList[i][j].alpha -= 0.05;  
            windList[i][j].i += 2;  
            if(windList[i][j].alpha <= 0 || windList[i][j].x > LGlobal.width || windList[i][j].y > LGlobal.height){  
                backLayer.removeChild(windList[i][j]);  
                windList[i].splice(j,1);  
                j--;  
            }  
        }  
    }  
}  
</script>   
</body>  
</html>

Testen der Verbindung

http://lufylegend.com/demo/astojs/8.html

Das Obige ist die Verwendung einer ActionScript-ähnlichen Syntax zum Schreiben von HTML5 - Teil 8, Bildverarbeitung + Partikeleffekte, weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!

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

Vorheriger Artikel：Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 – Teil 7, benutzerdefinierte Schaltflächen zu schreibenNächster Artikel：Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 – Teil 7, benutzerdefinierte Schaltflächen zu schreiben

In Verbindung stehende Artikel

Mehr sehen