摘要:代碼實現(xiàn)炫麗的粒子運(yùn)動效果云庫前端散開類型歸位隨機(jī)散開效果對歸位有效輸入漢字后回車代碼不多,只要是幾個操作元素。看起來運(yùn)行順暢的代碼也或多或少有一些瑕疵,日前這個效果還只支持中文。
沒有最好,只有更好,如題所示,這篇文章只要是分享一個用 Canvas 來實現(xiàn)的粒子運(yùn)動效果。感覺有點標(biāo)題黨了,但換個角度,勉勉強(qiáng)強(qiáng)算是炫麗吧,雖然色彩上與炫麗無關(guān),但運(yùn)動效果上還是算得上有點點炫的。不管怎么樣,我們還是開始這個所謂的炫麗效果吧!
直接上代碼 ,不懂可以看代碼注釋。估計就會看明白大概的思路了。
html 代碼
Canvas 實現(xiàn)炫麗的粒子運(yùn)動效果-云庫前端 散開類型:散開效果(對歸位有效):
HTML 代碼不多,只要是幾個操作元素。這里一看就明白。不費(fèi)過多口舌。我們來看看本文的主角 JavaScript 代碼,不過,在看代碼前,我們不妨先聽聽實現(xiàn)這個效果的思路:
首先,我們得先生成一堆群眾演員(粒子);
把每個粒子的相關(guān)參數(shù)掛到自身的一些屬性上,因為第個粒子都會有自己的運(yùn)動軌跡;
接著得讓它們各自運(yùn)動起來。運(yùn)動有兩種(自由運(yùn)動和生成文字的運(yùn)動);
JavaScript 代碼中使用了三個 Canvas 畫布,this.iCanvas(主場)、this.iCanvasCalculate(用來計算文字寬度)、this.iCanvasPixel(用于畫出文字,并從中得到文字對應(yīng)的像素點的位置坐標(biāo))。
this.iCanvasCalculate 和 this.iCanvasPixel 這兩個無需在頁面中顯示出來,只是輔助作用。
下面就獻(xiàn)上棒棒的 JS 實現(xiàn)代碼
function Circle() { var This = this; this.init(); this.generalRandomParam(); this.drawCircles(); this.ballAnimate(); this.getUserText(); // 窗口改變大小后,生計算并獲取畫面 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án)境 this.ctx = this.iCanvas.getContext("2d"); // 插入到 body 元素中 document.body.appendChild(this.iCanvas); this.iCanvasCalculate = document.createElement("canvas"); // 用于保存計算文字寬度的畫布 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; // 用于繪畫文字的畫布 // 隨機(jī)生成圓的數(shù)量 this.ballNumber = ramdomNumber(1000, 2000); // 保存所有小球的數(shù)組 this.balls = []; // 保存動畫中最后一個停止運(yùn)動的小球 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 = ""; // 動畫效果 this.isPlay = false; // 標(biāo)識(在生成文字過程中,不能再生成) } // 渲染出所有圓 Circle.prototype.drawCircles = function () { for(var i=0;ithis.iCanvasW-ball.size || ball.x this.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.y this.iCanvasH-ball.size){ ball.y = this.iCanvasH-ball.size; }else{ ball.y = ball.size; } ball.speedY = - ball.speedY; } } } // 開始動畫 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 看了代碼估計也只是心里炫了一下,也沒有讓你想把這個東西做出來的欲望,為此我知道必需得讓你眼睛心服口服才行。在線 DEMO: 動感的粒子示例。
人無完人,代碼也一樣。看起來運(yùn)行順暢的代碼也或多或少有一些瑕疵,日前這個效果還只支持中文。英文的話,我得再努力一把,不管怎么樣,英文后面肯定是會加入來的,只是時間問題了。還有代碼中用于標(biāo)記是否可再次執(zhí)行生成文字的 屬性:this.isPlay ,還是一點瑕疵,this.isPlay 的狀態(tài)更改沒有準(zhǔn)確的在粒子歸位的那一瞬間更改,而是提前更改了狀態(tài)。但這個狀態(tài)不會影響本例子效果的完整實現(xiàn)。
這個例子中用到了 dynamics.js 庫,主要是用到它里面的一些運(yùn)動函數(shù),讓粒子動起來更感人一些,僅此而已。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/107104.html
摘要:效果不帶連線效果帶連線的效果教程要實現(xiàn)這樣的效果其實很簡單,大概分為這么幾個步驟創(chuàng)建首先需要在需要展示粒子背景的父元素中創(chuàng)建一個標(biāo)簽指定和在我們生成隨機(jī)點坐標(biāo)的時候需要用和來做參照。調(diào)用函數(shù)開啟動畫如果不需要畫線,取消下面這行代碼即可。 效果 :) 不帶連線效果:showImg(https://segmentfault.com/img/bVbga5q?w=973&h=297); 帶連線...
摘要:爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時,使用的方式創(chuàng)建粒子,每個粒子存在自己的動畫開始方法,動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼,實現(xiàn)粒子爆炸效果組件組件開發(fā)...
摘要:爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時,使用的方式創(chuàng)建粒子,每個粒子存在自己的動畫開始方法,動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼,實現(xiàn)粒子爆炸效果組件組件開發(fā)...
摘要:爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時,使用的方式創(chuàng)建粒子,每個粒子存在自己的動畫開始方法,動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié),還是有很多不足之處,望各位大大多提寶貴意見,互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼,實現(xiàn)粒子爆炸效果組件組件開發(fā)...
閱讀 2901·2021-11-23 09:51
閱讀 1547·2021-11-15 11:36
閱讀 3006·2021-10-13 09:40
閱讀 1863·2021-09-28 09:35
閱讀 13040·2021-09-22 15:00
閱讀 1367·2019-08-29 13:56
閱讀 2924·2019-08-29 13:04
閱讀 2698·2019-08-28 18:06