最近想弄一個網頁，把自己學HTML5過程中做的部分DEMO放上去做集合，但是，如果就僅僅做個網頁把所有DEMO一個一個排列又覺得太難看了。就想，既然學了canvas，那就來折騰下瀏覽器，做個小小的開場動畫吧。

開場動畫的效果，想了一會，決定用粒子，因為覺得粒子比較好玩。還記得以前我寫的第一篇技術博文，就是講文字圖片粒子化的：文字圖片粒子化 ， 那時就僅僅做的是直線運動，順便加了一點3D效果。運動公式很簡單。所以就想這個開場動畫就做的更動感一些吧。

先上DEMO：http://2.axescanvas.sinaapp.com/demoHome/index.html

效果是不是比直線的運動更加動感呢？而且也確實很簡單，別忘了這篇博文的題目，小小滴公式，大大滴樂趣。要做出這樣的效果，用的就僅僅是我們初中。。或者高中時候的物理知識，加速運動，減速運動的公式啦。所以確實是小小滴公式。樓主很喜歡折騰一些酷炫的東西，雖然可能平時工作上用不上，但是，這樂趣確實很讓人著迷啊。而且，做下這些也可以加強一下編程的思維能力哈。

廢話不多說，進入主題啦。就簡單的解釋一下原理吧~~~

粒子運動的核心代碼就這么一點：
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表