摘要：代碼實(shí)現(xiàn)炫麗的粒子運(yùn)動(dòng)效果云庫(kù)前端散開(kāi)類型歸位隨機(jī)散開(kāi)效果對(duì)歸位有效輸入漢字后回車代碼不多，只要是幾個(gè)操作元素?？雌饋?lái)運(yùn)行順暢的代碼也或多或少有一些瑕疵，日前這個(gè)效果還只支持中文。

沒(méi)有最好，只有更好，如題所示，這篇文章只要是分享一個(gè)用 Canvas 來(lái)實(shí)現(xiàn)的粒子運(yùn)動(dòng)效果。感覺(jué)有點(diǎn)標(biāo)題黨了，但換個(gè)角度，勉勉強(qiáng)強(qiáng)算是炫麗吧，雖然色彩上與炫麗無(wú)關(guān)，但運(yùn)動(dòng)效果上還是算得上有點(diǎn)點(diǎn)炫的。不管怎么樣，我們還是開(kāi)始這個(gè)所謂的炫麗效果吧！

直接上代碼 ，不懂可以看代碼注釋。估計(jì)就會(huì)看明白大概的思路了。

html 代碼

    
散開(kāi)類型：
        
            歸位
            隨機(jī)
        
    
    
散開(kāi)效果（對(duì)歸位有效）：
       
           dynamics.spring
           dynamics.bounce
           dynamics.forceWithGravity
           dynamics.gravity
           dynamics.easeInOut
           dynamics.easeIn
           dynamics.easeOut
           dynamics.linear
       
    
    

HTML 代碼不多，只要是幾個(gè)操作元素。這里一看就明白。不費(fèi)過(guò)多口舌。我們來(lái)看看本文的主角 JavaScript 代碼，不過(guò)，在看代碼前，我們不妨先聽(tīng)聽(tīng)實(shí)現(xiàn)這個(gè)效果的思路：

首先，我們得先生成一堆群眾演員（粒子）；

把每個(gè)粒子的相關(guān)參數(shù)掛到自身的一些屬性上，因?yàn)榈趥€(gè)粒子都會(huì)有自己的運(yùn)動(dòng)軌跡；

接著得讓它們各自運(yùn)動(dòng)起來(lái)。運(yùn)動(dòng)有兩種（自由運(yùn)動(dòng)和生成文字的運(yùn)動(dòng)）；

JavaScript 代碼中使用了三個(gè) Canvas 畫(huà)布，this.iCanvas（主場(chǎng)）、this.iCanvasCalculate（用來(lái)計(jì)算文字寬度）、this.iCanvasPixel（用于畫(huà)出文字，并從中得到文字對(duì)應(yīng)的像素點(diǎn)的位置坐標(biāo)）。
this.iCanvasCalculate 和 this.iCanvasPixel 這兩個(gè)無(wú)需在頁(yè)面中顯示出來(lái)，只是輔助作用。
下面就獻(xiàn)上棒棒的 JS 實(shí)現(xiàn)代碼

function Circle() {
    var This = this;
    this.init();
    this.generalRandomParam();
    this.drawCircles();
    this.ballAnimate();
    this.getUserText();
    // 窗口改變大小后，生計(jì)算并獲取畫(huà)面
    window.onresize = function(){
        This.stateW = document.body.offsetWidth;
        This.stateH = document.body.offsetHeight;
        This.iCanvasW = This.iCanvas.width = This.stateW;
        This.iCanvasH = This.iCanvas.height = This.stateH;
        This.ctx = This.iCanvas.getContext("2d");
    }
}
// 初始化
Circle.prototype.init = function(){
    //父元素寬高
    this.stateW = document.body.offsetWidth;
    this.stateH = document.body.offsetHeight;
    this.iCanvas = document.createElement("canvas");
    // 設(shè)置Canvas 與父元素同寬高
    this.iCanvasW = this.iCanvas.width = this.stateW;
    this.iCanvasH = this.iCanvas.height = this.stateH;
    // 獲取 2d 繪畫(huà)環(huán)境
    this.ctx = this.iCanvas.getContext("2d");
    // 插入到 body 元素中
    document.body.appendChild(this.iCanvas);
    this.iCanvasCalculate = document.createElement("canvas");
    // 用于保存計(jì)算文字寬度的畫(huà)布
    this.mCtx =  this.iCanvasCalculate.getContext("2d");
    this.mCtx.font = "128px 微軟雅黑";
    this.iCanvasPixel = document.createElement("canvas");
    this.iCanvasPixel.setAttribute("style","position:absolute;top:0;left:0;");
    this.pCtx = null; // 用于繪畫(huà)文字的畫(huà)布
    // 隨機(jī)生成圓的數(shù)量
    this.ballNumber = ramdomNumber(1000, 2000);
    // 保存所有小球的數(shù)組
    this.balls = [];
    // 保存動(dòng)畫(huà)中最后一個(gè)停止運(yùn)動(dòng)的小球
    this.animte = null;
    this.imageData = null;
    this.textWidth = 0; // 保存生成文字的寬度
    this.textHeight = 150; // 保存生成文字的高度
    this.inputText = ""; // 保存用戶輸入的內(nèi)容
    this.actionCount = 0;
    this.ballActor = []; // 保存生成文字的粒子
    this.actorNumber = 0; // 保存生成文字的粒子數(shù)量
    this.backType = "back"; // 歸位
    this.backDynamics = ""; // 動(dòng)畫(huà)效果
    this.isPlay = false; // 標(biāo)識(shí)（在生成文字過(guò)程中，不能再生成）
}
// 渲染出所有圓
Circle.prototype.drawCircles = function () {
    for(var i=0;ithis.iCanvasW-ball.size || ball.xthis.iCanvasW-ball.size){
                ball.x = this.iCanvasW-ball.size;
            }else{
                ball.x = ball.size;
            }
            ball.speedX = - ball.speedX;
       }
       if(ball.y>this.iCanvasH-ball.size || ball.ythis.iCanvasH-ball.size){
                ball.y = this.iCanvasH-ball.size;
            }else{
                ball.y = ball.size;
            }
            ball.speedY = - ball.speedY;
       }
    }
}
// 開(kāi)始動(dòng)畫(huà)
Circle.prototype.ballAnimate = function(){
    var This = this;
    var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    (function move(){
        animte = animateFrame(move);
        This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH);
        This.changeposition();
        for(var i=0;i
看了代碼估計(jì)也只是心里炫了一下，也沒(méi)有讓你想把這個(gè)東西做出來(lái)的欲望，為此我知道必需得讓你眼睛心服口服才行。在線 DEMO： 動(dòng)感的粒子示例。
人無(wú)完人，代碼也一樣。看起來(lái)運(yùn)行順暢的代碼也或多或少有一些瑕疵，日前這個(gè)效果還只支持中文。英文的話，我得再努力一把，不管怎么樣，英文后面肯定是會(huì)加入來(lái)的，只是時(shí)間問(wèn)題了。還有代碼中用于標(biāo)記是否可再次執(zhí)行生成文字的 屬性：this.isPlay ，還是一點(diǎn)瑕疵，this.isPlay 的狀態(tài)更改沒(méi)有準(zhǔn)確的在粒子歸位的那一瞬間更改，而是提前更改了狀態(tài)。但這個(gè)狀態(tài)不會(huì)影響本例子效果的完整實(shí)現(xiàn)。
這個(gè)例子中用到了 dynamics.js 庫(kù)，主要是用到它里面的一些運(yùn)動(dòng)函數(shù)，讓粒子動(dòng)起來(lái)更感人一些，僅此而已。