您現在的位置是:電腦技術吧?>? 組裝維修 ??>??粒子能量公式,粒子動能公式??>??正文詳情

粒子能量公式,粒子動能公式

渠博超2019-11-25 14:41:31 人圍觀
簡介α粒子是什么最近,我想得到一個網頁,并把一些我在學習HTML5過程中做的演示放在上面做一個集合。然而,如果我只是做一個網頁,并安排所有的演示一個接一個,我認為這太難看了。

最近想弄一個網頁,把自己學HTML5過程中做的部分DEMO放上去做集合,但是,如果就僅僅做個網頁把所有DEMO一個一個排列又覺得太難看了。

就想,既然學了canvas,那就來折騰下瀏覽器,做個小小的開場動畫吧。

  開場動畫的效果,想了一會,決定用粒子,因為覺得粒子比較好玩。

還記得以前我寫的第一篇技術博文,就是講文字圖片粒子化的:文字圖片粒子化 , 那時就僅僅做的是直線運動,順便加了一點3D效果。

運動公式很簡單。

所以就想這個開場動畫就做的更動感一些吧。

  先上DEMO:http://2.axescanvas.sinaapp.com/demoHome/index.html  效果是不是比直線的運動更加動感呢?而且也確實很簡單,別忘了這篇博文的題目,小小滴公式,大大滴樂趣。

要做出這樣的效果,用的就僅僅是我們初中。

或者高中時候的物理知識,加速運動,減速運動的公式啦。

所以確實是小小滴公式。

樓主很喜歡折騰一些酷炫的東西,雖然可能平時工作上用不上,但是,這樂趣確實很讓人著迷啊。

而且,做下這些也可以加強一下編程的思維能力哈。

  廢話不多說,進入主題啦。

就簡單的解釋一下原理吧~~~  粒子運動的核心代碼就這么一點:  XML/HTML Code復制內容到剪貼板  update:function(time){  this.x = this.vx*time;  this.y = this.vy*time;  if(!this.globleDownthis.y0){  var yc = this.toy - this.y;  var xc = this.tox - this.x;  this.jl = Math.sqrt(xc*xc yc*yc);  var za = 20;  var ax = za*(xc/this.jl),  ay = za*(yc/this.jl),  vx = (this.vx ax*time)*0.97,  vy = (this.vy ay*time)*0.97;  this.vx = vx;  this.vy = vy;  }else {  var gravity = 9.8;  var vy = this.vy gravity*time;  if(this.ycanvas.height){  vy = -vy*0.7;  }  this.vy = vy;  }  },  粒子總共有兩種狀態,一種是自由落體,一種就是受到吸力。

自由落體就不說了。

說吸力之前先貼出粒子的屬性:  JavaScript Code復制內容到剪貼板  var Dot = function(x,y,vx,vy,tox,toy,color){  this.x=x;  this.y=y;  this.vx=vx;  this.vy=vy;  this.nextox = tox;  this.nextoy = toy;  this.color = color;  this.visible = true;  this.globleDown = false;  this.setEnd(tox , toy);  }  setEnd:function(tox , toy){  this.tox = tox;  this.toy = toy;  var yc = this.toy - this.y;  var xc = this.tox - this.x;  },  x,y就是粒子的位置,vx是粒子水平速度,vy是粒子的垂直速度,nexttox之類知不知道都無所謂,只是暫時保存變量的。

tox,和toy就是粒子的目的地位置。

  首先,先給予所有粒子一個目的地,這個目的地下面再會說。

也就是要粒子到達的地方,然后再定義一個變量za作為加速度,具體數值的話,就自己多測試下就會有大概參數的了,我設成20,感覺就差不多了。

za是粒子和目的地之間連線的加速度,所以,我們通過粒子的位置和目的地的位置,通過簡單的三角函數,就可以把粒子的水平加速度和垂直加速度求出來了,就這段  JavaScript Code復制內容到剪貼板  var ax = za*(xc/this.jl),  ay = za*(yc/this.jl),  有了水平加速度和垂直加速度后,接下來就更簡單了,直接計算水平速度和垂直速度的增量,從而改變水平速度和垂直速度的值  XML/HTML Code復制內容到剪貼板  vx = (this.vx ax*time)*0.97,  vy = (this.vy ay*time)*0.97;  之所以要乘于0.97是為了模擬能量損耗,粒子才會減速。

time是每一幀的時間差  計算出速度后就更新粒子位置就行了。

  XML/HTML Code復制內容到剪貼板  this.x = this.vx*time;  this.y = this.vy*time;  因為粒子在飛行過程中,與目的地之間的連線方向是不停改變的,所以每一幀都要重新計算粒子的水平加速度和垂直加速度。

  運動原理就是如此,是否很簡單呢。

  運動原理說完了,再扯一下上面那個動畫的具體實現吧:動畫初始化,在一個離屏canvas上把想要的字或者圖片畫出來,然后再通過getImageData這個方法獲取離屏canvas的像素。

然后用一個循環,把離屏canvas中有繪制的區域找出來,因為imageData里的data值就是一個rgba數組,所以我們判斷最后一個的值也就是透明度大于128就是有繪制過的區域。

然后獲取該區域的xy值,為了防止粒子對象過多導致頁面卡頓,所以我們就限制一下粒子的數量,取像素的時候x值和y值每次遞增2,從而減少粒子數量。

  XML/HTML Code復制內容到剪貼板  this.osCanvas = document.createElement(canvas);  var osCtx = this.osCanvas.getContext(2d);  this.osCanvas.width = 1000;  this.osCanvas.height = 150;  osCtx.textAlign = center;  osCtx.textBaseline = middle;  osCtx.font=70px 微軟雅黑,黑體 bold;  osCtx.fillStyle = #1D181F  osCtx.fillText(WelCome , this.osCanvas.width/2 , this.osCanvas.height/2-40);  osCtx.fillText(To wAxes' HOME , this.osCanvas.width/2 , this.osCanvas.height/2 40);  var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);  dots = [];  for(var x=0;x  for(var y=0;y  var i = (y*bigImageData.width x)*4;  if(bigImageData.data[i 3]128){  var dot = new Dot(  Math.random()0.5?Math.random()*20 10:Math.random()*20 canvas.width-40,  -Math.random()*canvas.height*2,  0,  0,  x (canvas.width/2-this.osCanvas.width/2),  y (canvas.height/2-this.osCanvas.height/2),  rgba( bigImageData.data[i] , bigImageData.data[i 1] , bigImageData.data[i 2] ,1)  );  dot.setEnd(canvas.width/2,canvas.height/2)  dots.push(dot);  }  }  }  通過循環獲取到粒子的位置xy值后,把位置賦給粒子,成為粒子的目的地。

然后動畫開始,就可以做出文字圖片粒子化的效果了。

版權聲明:本文由 渠博超 整理編輯。

原標題:α粒子,粒子數怎么算

轉載注明出處:http://www.dn9ww09s.icu/assemble/14340.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 無線網絡連接屬性空白,xp無法配置無線網絡

    無線網絡連接屬性空白,xp無法配置無線網絡 相關圖片筆記本刷不出自家wifi無線網絡讓我們擺脫了網線對設備的束縛。幾乎所有人在連接網絡的過程中都會先選擇無線連接,但有些用戶會提醒windows在配置無線連接時無法配置無線連接。在這...

  • AI CS6,AI–CS6怎么樣

    AI CS6,AI–CS6怎么樣 相關圖片AI許多Adobe產品需要付費,比如AI。今天的超人編輯想和大家分享一下AICS6官方版的無序列號完美激活破解教程。如果你感興趣,請過來看看CS6...

  • content屬性什么用,content屬性

    content屬性什么用,content屬性 相關圖片contentCSS中有四個主要的偽元素:before/after/first-letter/first-line。在prefore/after偽元素選擇器中,有一個contcontent怎么用...

  • 如何把ppt轉換成word,如何把ppt轉換成圖片

    如何把ppt轉換成word,如何把ppt轉換成圖片 相關圖片ppt文本轉換成表格PPT是一個很好的表達工具,但在表的表達上還不夠完善。在日常辦公中,如果遇到表格文件,通常會使用Excel表格進行編輯,然后將其復制到PPT中。這種方法很麻煩。...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3新界面:flash不再是一個簡單的web動畫工具,所有的意圖都表明它試圖開發成自己的平臺。顯然,flash接口已經從以前的版本中得到了巨大的發展。一眼就能感覺到cs3是什么...

  • html表格如何轉換excel,html表格導出到excel

    html表格如何轉換excel,html表格導出到excel 相關圖片excel轉化htmlExcel是處理表格文件的常用工具,但有時需要轉換成PPT、word等格式。此前,超人小版為您介紹了相關教程。今天,超人小版教你大多數人可能忽略的格式轉換:Exhtml5導出exc...

  • 發現精彩打不開怎么辦,發現精彩打不開

    發現精彩打不開怎么辦,發現精彩打不開 相關圖片發現精彩無法啟動輸入法探索精彩應用是廣發銀行推出的移動金融軟件。用戶可以通過尋找精彩的應用程序來管理自己的廣發銀行信用卡,并進行各種方便快捷的操作。但最近,一位朋...

  • u17,u17什么意思

    u17,u17什么意思 相關圖片網王u17之懶人Python適合Windows平臺使用win32gui、win32API和win32con包simu read.py。代碼如下:#-*-Coding=UTF-8網球王子u17漫畫...

  • 安卓手機正負符號怎么打出來,蘋果手機正負符號上下

    安卓手機正負符號怎么打出來,蘋果手機正負符號上下 相關圖片正負符號怎么打字符號是常用的數學符號之一。如果要單獨輸入符號,可以用 和-符號表示。但如果你想輸入一個組合的標志,很多人不知道如何操作。與超人軟件站編輯了解如何玩下一...

  • 繪制表格斜線,word怎么畫斜線

    繪制表格斜線,word怎么畫斜線 相關圖片怎么在excel中畫斜線首先看效果圖:首先是材質圖,用鋼筆勾選,然后將其轉換為選擇框,并使用字符作為材質。如果勾選不好,可以將背景的主要部分羽化到邊緣旁邊。在畫布上輸入字...

熱評文章

  • 清除dns緩存有什么用,怎么清除dns緩存

    清除dns緩存有什么用,怎么清除dns緩存 相關圖片dns怎么設置無論計算機的配置有多好,使用了很長一段時間,計算機上都會有一些DNS緩存。但這些緩存不像普通的垃圾。DNS緩存將導致我們無法解析域名。我們現在怎么能把它們徹底清...

  • 硬殼,啄破硬殼

    硬殼,啄破硬殼 相關圖片中華硬殼本文介紹了用煙火畫硬殼厚皮燙金書的工藝。首先看效果圖。先做一塊桌布,用焰火長方形工具畫一個填充色為?dfcfc0的長方形,并添加雜項點;2。制作書皮,用長方形工硬殼...

  • 探探突然收不到消息了怎么辦,探探收不到消息

    探探突然收不到消息了怎么辦,探探收不到消息 相關圖片探探別人收不到我的消息偵探是一個非常有趣的社交軟件。只有當雙方相愛時,才能相見。他們中的一些人發現在使用Android版本時無法接收信息。怎么了?如果你不知道,就探探收不到...

  • 創建輪廓,創建輪廓怎么取消

    創建輪廓,創建輪廓怎么取消 相關圖片ai創建輪廓在哪里這是一系列的flash CS3模擬藝術設計教程。我們將學習在flash CS3中繪制輪廓的應用。如果你不是很精通線和手的繪制操作,這個技巧可能更適合你渲染4:改創建輪廓快捷...

  • 樂視應用,樂視手機怎么備份

    樂視應用,樂視手機怎么備份 相關圖片樂視1s手機怎么導出聯系人近日,樂視云硬盤宣布關閉個人云服務,眾多小伙伴正忙著在樂視云硬盤上傳輸數據,而百度云安卓版也成為不少人的選擇。那么,樂視云硬盤的數據如何才能...

  • 導入,eclipse怎么導入文件

    導入,eclipse怎么導入文件 相關圖片amr文件用什么打開Template, shadow DOM custom element undertaker電腦文件怎么導入手機...

  • 17世紀對班級授課制,19世紀對班級組織的發展產生

    17世紀對班級授課制,19世紀對班級組織的發展產生 相關圖片小學每個班級有多少人世紀衛報是一款移動應用,學校和家長共同努力,更好地照顧孩子的成長。用戶可以通過世紀衛士加入您的課堂,查看學校和班級的最新情況,及時完成老師布置...

  • 飛豬上退票手續費多少,飛豬退票手續費合理嗎

    飛豬上退票手續費多少,飛豬退票手續費合理嗎 相關圖片飛豬國際機票退票手續費作為阿里巴巴的旅行軟件,很多人在旅行時會選擇使用飛豬頂票和火車票,但有時因為去不了,需要退票。那么飛豬的退票費是多少?接下來,超人軟件編輯將...

  • 3動畫,補間動畫

    3動畫,補間動畫 相關圖片c4d動畫我翻譯了一篇煙花的基本文章(以下簡稱FW)。效果如下:由于瀏覽器的問題,您看到的圖片可能是靜態的,但是將圖片保存為本地的,我們可以看到圖片是動態的。這是一個簡單...

  • 目前國內bim收費標準一覽,2019北京道路停車收費標準一覽

    目前國內bim收費標準一覽,2019北京道路停車收費標準一覽 相關圖片佛山車船稅收費標準最近,小編要被一輛共享單車的出現蒙蔽雙眼。他只是一輛金色的小自行車和一輛很酷的自行車。到處都閃閃發光。就像純金一樣。酷騎小金車還可以給手機充電。...

關注微信

变脸官网查询