小編給大家分享一下JavaScript中實(shí)現(xiàn)煙花綻放動(dòng)畫效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、蘆淞網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為蘆淞等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

      先編寫一個(gè)煙花綻放的動(dòng)畫效果。

      放煙花時(shí)，一個(gè)煙花可分為兩個(gè)階段：（1）煙花上升到空中；（2）煙花炸開成碎片，炸開的碎片慢慢消散。

      為此抽象出兩個(gè)對象類：Firework和Particle。其中，F(xiàn)irework用于表示一個(gè)煙花對象，Particle用于表示一個(gè)煙花炸開后的各碎片。

      Firework對象類定義6個(gè)屬性：表示煙花上升軌跡中各點(diǎn)的坐標(biāo)（x,y）、煙花弧狀軌跡的偏轉(zhuǎn)角度angle、上升階段水平和垂直方向的位移改變量xSpeed和ySpeed、煙花的色彩色相hue。

      坐標(biāo)屬性值y的初始值取畫布的高度，表示煙花從地面上升到空中，其余各屬性的初始值采用隨機(jī)數(shù)確定。具體定義如下：

  function Firework()

  {

   this.x = canvas.width/4*(1+3*Math.random());

   this.y = canvas.height - 15;

   this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;

   this.xSpeed = Math.sin(this.angle) *(6+Math.random()*7);

   this.ySpeed = -Math.cos(this.angle) *(6+Math.random()*7);

   this.hue = Math.floor(Math.random() * 360);

  }

網(wǎng)頁標(biāo)題：JavaScript中實(shí)現(xiàn)煙花綻放動(dòng)畫效果的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.chinadenli.net/article8/doccop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)