HarmonyOS煙花特效組件開發
作者：木棉花潘穎琳
之前看到“粒子消散”的特效組件，于是就產生想法(自己也弄個特效組件應該挺有意思的)。這個煙花特效可以添加到游戲勝利的界面中，可能還有其他應用場景哈哈~。
前言
之前看到“粒子消散”的特效組件，于是就產生想法(自己也弄個特效組件應該挺有意思的)。這個煙花特效可以添加到游戲勝利的界面中，可能還有其他應用場景哈哈~。這也算是我做的第一個組件原創demo啦。
概述
效果圖如下：
有三種模式可以選擇，一種是圖案只有五角星，一種是圖案只有三角形，還有一種是圖案既有五角星又有三角星。顏色有10種，還有背景音樂(自己DIY的煙花音效)!話不多說，開整!
正文
1.創建一個空白的工程
DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Empty Ability,然后點擊Next,給項目命名Framework，選擇設備類型Phone，選擇語言類型JS最后點擊Finish。
代碼刪除的部分
在entry>src>main>js>default>pages.index>index.hml 文件里把以下代碼刪掉
- <text class="title">
- {{ $t('strings.hello') }} {{ title }}
- </text>
在entry>src>main>js>default>pages.index>index.js 文件里把以下代碼刪掉
- title:" "
- onInit() {
- this.title = this.$t('strings.world');
- }
在entry>src>main>js>default>pages.index>index.css 文件里把container部分以下的代碼刪掉
2.布局設計
index.hml
該組件是畫布組件，畫布的大小是整個屏幕，而按鈕是顯示畫布上方的，所以要添加個棧組件，依次放入畫布組件和按鈕組件。代碼如下👇，注意這里畫布組件添加了觸摸事件touchstartfunc,下文會講解這步。
- <stack class="stack">
- <canvas class="canvas " ref="canvas " @touchstart='touchstartfunc' ></canvas>
- <input type="button" class="STAR" value="五角星" onclick="click_star"/>
- <input type="button" class="TRIANGLE" value="三角形" onclick="click_triangle"/>
- <input type="button" class="MIX" value="混合" onclick="click_mix"/>
- </stack>
index.css
給畫布組件和按鈕組件設置屬性，代碼如下👇
- .canvas{
- width:100%;
- height: 100%;
- background-color:black;
- }
- .STAR{
- width: 80px;
- height: 38px;
- font-size: 20px;
- background-color:blue;
- border-color: blue;
- text-color: aquamarine;
- top:660px;
- left: 40px;
- }
- .TRIANGLE{
- width: 80px;
- height: 38px;
- font-size: 20px;
- background-color:blue;
- border-color: blue;
- text-color: aquamarine;
- top:660px;
- left: 150px;
- }
- .MIX{
- width: 80px;
- height: 38px;
- font-size: 20px;
- background-color:blue;
- border-color: blue;
- text-color: aquamarine;
- top:660px;
- left: 260px;
- }
此時打開模擬器，你就能得到上面效果圖左1圖，接下來做功能實現部分。
3.繪制圖案
五角星
函數 draw_star 傳的參數分別是煙花釋放的圓心坐標，圖案的顏色，圖案移動的斜率，圖案是否填充顏色。定義的變量中，x和y是圖案中心的坐標，根據時間推移(會設定定時器，下文會講)move_times增加，圖案會沿著傳進來的斜率方向作直線移動，以達到煙花綻放的效果。變量a-h都是為了便于繪制五角星的圖案而設的公式參數值，全局變量r_star是五角星的邊長，最后根據公式去繪制單個五角星圖案
index.js
先在export default上方定義變量
- var ctx;
- var move_times=1;
- var r_star = 5;
- var r_triangle=14;
然后在export default下方添加代碼：
- onShow() {
- ctx = this.$refs.canvas.getContext('2d');
- },
- draw_Star(x_1,y_1,color,x_2,y_2,fill) {
- let x = x_1 + move_times * x_2;
- let y = y_1 + move_times * y_2;
- let a = r_star * Math.sin(Math.PI / 10);
- let b = r_star * Math.cos(Math.PI / 10);
- let c = (r_star + a) * Math.tan(Math.PI / 10);
- let d = (r_star + a) * Math.tan(Math.PI / 5) - c;
- let e = r_star * Math.sin(Math.PI / 5);
- let f = r_star * Math.cos(Math.PI / 5);
- let g = (r_star + 2 * a) * Math.cos(2 * Math.PI / 5);
- let h = (r_star + 2 * a) * Math.sin(2 * Math.PI / 5);
- ctx.lineWidth=1;
- ctx.beginPath();
- ctx.moveTo(x - r_star - a, y - c);
- ctx.lineTo(x - a, y - c);
- ctx.lineTo(x, y - b - c);
- ctx.lineTo(x + a, y - c);
- ctx.lineTo(x + a + r_star, y - c);
- ctx.lineTo(x + a + r_star - f, y + e - c);
- ctx.lineTo(x + a + g, y + h - c);
- ctx.lineTo(x, y + d);
- ctx.lineTo(x - a - g, y + h - c);
- ctx.lineTo(x - a - r_star + f, y + e - c);
- ctx.closePath();
- ctx.stroke();
- move_times=move_times+1;
- },
三角星
同樣， draw_triangle 是繪制單個三角形并沿設定斜率移動的函數，函數的參數類型及作用與五角星的一致。全局變量r_triangle為三角形的邊長，代碼如下👇
- draw_Triangle(x_1,y_1,color,x_2,y_2,fill){
- let x = x_1 + move_times * x_2;
- let y = y_1 + move_times * y_2;
- ctx.lineWidth=1;
- ctx.beginPath();
- ctx.moveTo(x-r_triangle/2, y + Math.sqrt(3)*r_triangle/6);
- ctx.lineTo(x, y - Math.sqrt(3)*r_triangle/3);
- ctx.lineTo(x+r_triangle/2, y + Math.sqrt(3)*r_triangle/6);
- ctx.closePath();
- ctx.stroke();
- move_times=move_times+1;
- },
圖案的美化
設置了10種顏色的顏色字典，通過繪制圖案函數draw中的參數 color 去控制顏色(黑色是作保護作用)，顏色可通過單獨設置數字1-10來選擇，也可以通過隨機數(1~10)去隨機變化顏色。顏色填充也是如此，1為不填充，2為填充，也可隨機產生1或2來隨機變化是否填充顏色。
- var drawcolors=[0,1,2,3,4,5,6,7,8,9,10];
- const COLORS={
- "0":'black',
- "1":"#FF2E10",
- "2":"#FB8D15",
- "3":"#F4ED1C",
- "4":"#C5F31D",
- "5":"#51F11F",
- "6":"#18F8F8",
- "7":"#1166FF",
- "8":"#9833DD",
- "9":"#FC14EB",
- "10":"#C64A6A"
- }
draw函數中，在ctx.lineWidth下方，在ctx.beginPath上方添加代碼：
- ctx.strokeStyle = COLORS[drawcolors[color].toString()];
在ctx.stroke下方添加代碼
- if(fill==2) {
- ctx.fillStyle = COLORS[drawcolors[color].toString()];
- ctx.fill();
- };
draw開頭的函數是繪制單個圖案，接下來的Draw函數是繪制8個或10個圖案圍成圓形向外同速率擴展的圖像，run開頭的函數是被循環的函數
4.繪制煙花
煙花的布局
綻放的煙花的形狀是一個圓形，火花為單個圖案。我設計了兩種煙花綻放數量，一種是一個圓中有8個圖案的，一種是一個圓中有10個圖案的，它們的斜率都通過數學公式定義好了(如下的全局變量所示)，單個圖案沿斜率方向每次移動的距離為全局變量R的數值。
- var R = 0.25;
- var s= R*Math.cos(Math.PI/5);
- var t= R*Math.sin(Math.PI/5);
- var v= R*Math.cos(Math.PI/2.5);
- var w= R*Math.sin(Math.PI/2.5);
- Draw_Star_8(click_x,click_y){
- this.draw_Star(click_x,click_y,1,-R,0,Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,2,-R/Math.sqrt(2),-R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,3,0,-R,Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,4,R/Math.sqrt(2),-R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,5,R,0,Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,6,R/Math.sqrt(2),R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,7,0,R,Math.floor(Math.random()*2 + 1));
- this.draw_Star(click_x,click_y,8,-R/Math.sqrt(2),R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
- },
- Draw_Star_10(click_x,click_y,fill){
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-R,0,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-s,-t,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-v,-w,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),v,-w,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),s,-t,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),R,0,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),s,t,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),v,w,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-v,w,fill);
- this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-s,t,fill);
- },
- Draw_Triangle_8(click_x,click_y,fill){
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R, 0, fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R/Math.sqrt(2),-R/Math.sqrt(2),fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), 0, -R, fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R/Math.sqrt(2),-R/Math.sqrt(2),fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R, 0, fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R/Math.sqrt(2),R/Math.sqrt(2), fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), 0, R, fill);
- this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R/Math.sqrt(2),R/Math.sqrt(2), fill);
- },
- Draw_Triangle_10(click_x,click_y){
- this.draw_Triangle(click_x,click_y,1,-R,0, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,2,-s,-t,Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,3,-v,-w,Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,4,v,-w, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,5,s,-t, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,6,R,0, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,7,s,t, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,8,v,w, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,9,-v,w, Math.floor(Math.random()*2 + 1));
- this.draw_Triangle(click_x,click_y,10,-s,t,Math.floor(Math.random()*2 + 1));
- },
火花的移動
上述提過一個movetimes,火花的移動無非就是坐標的變化，通過設置一個定時器，循環繪制圖案就能實現移動的效果，先構造一個被循環的函數run_star(舉五角星的實例，三角形同理;位置，美化等的參數隨意)，代碼如下
- run_star(){
- this.Draw_Star_10(200,300,1);
- this.Draw_Star_10(150,200,2);
- this.Draw_Star_8(300,218);
- this.Draw_Star_8(110,380);
- },
然后添加定時器
- var timer_star=null;
- var timer_triangle=null;
- var timer_mix=null;
點擊按鈕“五角星”時會釋放圖案為五角星的煙花
- click_star(){
- timer_star=setInterval(this.run_star,120);
- },
此時，打開模擬器，你會看到圖案移動了，但上一個圖案沒有清除
所以要給被循環的函數添加一個清空操作(為了保護清空函數，要先在清空前加點東西)，在this.Draw函數之前添加以下代碼：
- this.draw_Star(0,0,0,0,0,0);
- ctx.clearRect(0,0,400,800);
煙花的結束
按上述步驟下來，會發現煙花的圓形越來越大，最終出界。
為了實現煙花的結束，可以根據movetimes的增加次數來控制煙花綻放范圍的大小。通過透明度的遞減，最終透明度減為0，圖案消失
- var o = 1;
在draw函數里的開頭位置添加以下代碼：
- if ((move_times >= 230 && move_times <= 330)) {
- o = o - 0.01;
- ctx.globalAlpha = o;
- };
煙花的循環綻放
在draw函數里的開頭位置添加以下代碼：
- if(move_times==342){
- o=1;
- ctx.globalAlpha = o;
- move_times=1;
- };
同理可以設置“三角形”和“混合”的被循環函數
- run_triangle(){
- this.draw_Triangle(0,0,0,0,0,0);
- ctx.clearRect(0,0,400,800);
- this.Draw_Triangle_8(200,300,1);
- this.Draw_Triangle_8(150,200,2);
- this.Draw_Triangle_10(300,218);
- this.Draw_Triangle_10(110,380);
- },
- run_mix(){
- this.draw_Triangle(0,0,0,0,0,0);
- ctx.clearRect(0,0,400,800);
- this.Draw_Triangle_8(200,300,1);
- this.Draw_Star_10(150,200,2);
- this.Draw_Triangle_10(300,218);
- this.Draw_Star_8(110,380);
- },
5.點擊處綻放煙花
先獲取點擊處相對于畫布組件左上角的坐標，然后作為新煙花綻放的圓心坐標傳參，這里的click_b1,click_b2下文會講解
- var timer_click=null;
- run_touch(){
- if(click_b2==true) {
- this.draw_Star(x, y, 0, 0, 0);
- ctx.clearRect(0, 0, 400, 800);
- this.Draw_Star_10(x, y, 1);
- }
- },
- touchstartfunc(msg) {
- click_b1==true;
- x=msg.touches[0].globalX;
- y=msg.touches[0].globalY;
- if(click_b1==true){
- timer_click=setInterval(this.run_touch,120);
- click_b1=false;
- timer_click=null;
- }
- },
6.煙花圖案的切換
通過設定布爾型變量來控制點擊另一個按鈕時，清空上一個按鈕運行的定時器。
- var star_b=true;
- var mix_b=true;
- var triangle_b=true;
- var click_b1=true;
- var click_b2=true;
- click_star(){
- click_b2=false;
- clearInterval(timer_triangle);
- timer_triangle=null;
- clearInterval(timer_mix);
- timer_mix=null;
- ctx.clearRect(0,0,400,800);
- if(star_b==true){
- timer_star=setInterval(this.run_star,120);
- star_b=false;
- }
- triangle_b=true;
- mix_b=true;
- },
- click_triangle(){
- click_b2=false;
- clearInterval(timer_star);
- timer_star=null;
- clearInterval(timer_mix);
- timer_mix=null;
- ctx.clearRect(0,0,400,800);
- if(triangle_b==true){
- timer_triangle=setInterval(this.run_triangle,120);
- triangle_b=false;
- }
- star_b=true;
- mix_b=true;
- },
- click_mix(){
- click_b2=false;
- clearInterval(timer_star);
- timer_star=null;
- clearInterval(timer_triangle);
- timer_triangle=null;
- ctx.clearRect(0,0,400,800);
- if(mix_b==true){
- timer_mix=setInterval(this.run_mix,120);
- mix_b=false;
- }
- star_b=true;
- triangle_b=true;
- },
7.背景音樂的添加
js模板中添加音頻可以去看我之前的文章。
index.hml
- <video id='videoId'
- src='/common/flr_5_1.mp3'
- autoplay='true'
- controls="false"
- onfinish='finishCallback'></video>
index.js
- var video_b =true;
在src/common/下加入音頻文件。
- finishCallback:function(){
- if(video_b==true){
- this.$element('videoId').start();
- }
- },
別忘了生命周期的設置,在應用啟動時自動播放音頻，在應用隱藏的時候暫停播放音頻并清空所有定時器，在應用銷毀時清空所有定時器，停止播放音頻。
- onShow() {
- ctx = this.$refs.canvas.getContext('2d');
- this.$element('videoId').start();
- },
- onHide(){
- clearInterval(timer_star);
- timer_star=null;
- clearInterval(timer_triangle);
- timer_triangle=null;
- clearInterval(timer_mix);
- timer_mix=null;
- clearInterval(timer_click);
- timer_click=null;
- video_b=false;
- this.$element('videoId').pause();
- },
- onDestroy(){
- clearInterval(timer_star);
- timer_star=null;
- clearInterval(timer_triangle);
- timer_triangle=null;
- clearInterval(timer_mix);
- timer_mix=null;
- clearInterval(timer_click);
- timer_click=null;
- video_b=false;
- this.$element('videoId').pause();
- },
結語
以上就是我這次的小分享啦❀❀!自己的第一個demo開發，略微粗糙。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://harmonyos.51cto.com/resource/1376
【編輯推薦】
責任編輯：jianghua
來源：
鴻蒙社區
