【画龙迎春】HarmonyOS 鸿蒙Next + 神墓青乐 + 一起来跳个舞吧

【画龙迎春】HarmonyOS 鸿蒙Next + 神墓青乐 + 一起来跳个舞吧 【画龙迎春】+ 神墓青乐 + 一起来跳个舞吧

在中国传统文化中，龙是吉祥与尊贵的象征，寓意着力量和繁荣昌盛，当画龙的艺术邂逅盎然春意，我们便拥有了“画龙迎春”的美好图景——一笔一划间，苍龙蜿蜒而起，腾跃于早春的新绿之间，似乎在唤醒沉睡大地的生命力，昭示着新的一年充满无尽的可能性和蓬勃生机。故此，我将跳出以“画龙迎春”的传统艺术形式，结合“码”上获取“鸿”福的现代方式，欢庆新春的到来，共享这份跨越时空的文化交融与祝福传递，共谱新一年的美好华章。

活动介绍

将Demo源码上传至指定gitee仓：

https://gitee.com/luyuwen1/20240809

提交文件名请以：“【画龙迎春】+论坛昵称+作品名称”来命名。

在【论坛-综合板块】版块以图文/gif等演示形式投稿，全面展示作品 发帖标题前带【画龙迎春】。

尽情享受节日的欢乐

项目流程

项目创建

1. 下载安装 DevEco Studio（不限版本） >> 我使用的3.1.1版本

   https://developer.huawei.com/consumer/cn/deveco-studio/

2. 选择 api-9 arkTS 版本

3. 打开IDE 创建空的工作空间

4. 创建属于自己的 copyright 模版

项目框架结构

项目演示

1. 点击“开始迎新春”按钮

2. 页面内容会转化成有 一只龙在跳舞 （并伴随着音乐，需在模拟机或者物理机中可听到）

3. 在屏幕上点击会有烟花 (粗糙的画布图像) 出现

项目核心代码

/*
 * 项目:  Loong
 * 模块:  entry
 * 文件:  Index.ets
 * Last ModifyDate:  2024/2/22 上午11:38
 * ModifyDate:  2024年 02月 22日 -- 11 : 39 : 47
 * UserName:  smql
 * Author:  神墓青乐
 * 版权:  Copyright © 2024 本次开发只用于开源学习交流
 */
import FireworkComponent from '../components/FireworkComponent'
import Firework from '../elements/Firework'
import MusicPlayer from '../utils/MusicPlayer'

@Entry
@Component
struct Index {
    @State status: boolean = false
    @State fireworks: Firework[] = []
    private player: MusicPlayer = null

    onPageShow() {
        if(this.player === null) {
            this.player = new MusicPlayer()
        } else {
            this.player.pause()
        }
    }

    onPageHide() {
        this.player.pause()
    }

    build() {
        Stack() {
            if(this.status) {
                this.body()
                this.fireworksBuild()
            } else {
                Button("开始迎新春")
                    .fontSize(30)
                    .backgroundColor(Color.Red)
                    .fontColor(Color.White)
                    .fontWeight(FontWeight.Bold)
                    .padding(20)
                    .onClick(() => {
                        this.status = true
                        this.player.playByRawSrc("loong_bgm.m4a")
                    })
            }
        }.size({width: "100%", height: "100%"})
        .backgroundImage($rawfile("bg.png"))
        .backgroundImagePosition(Alignment.Center)
    }

    @Builder body() {
        Column() {

            Text("2024").fontSize(50)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.Red)

            Stack() {
                Image($rawfile("btn_bg.png"))
                    .width("100%")
                    .objectFit(ImageFit.Contain)
                Column() {
                    Text("辞旧迎新").fontSize(30)
                        .fontColor(Color.Red)
                    Text("喜迎龙年").fontSize(30)
                        .fontColor(Color.Red)
                }.margin({top: 50})
            }.size({width: "100%"})
            .margin({top: 10})

            Image($rawfile("loong.gif"))
                .width("100%")
                .objectFit(ImageFit.Contain)
                .margin({top: 100})
        }.onClick((val) => {
            let firework = new Firework()
            firework.x = Math.floor(val.x)
            firework.y = Math.floor(val.y)
            this.fireworks.push(firework)
        })
    }

    @Builder fireworksBuild() {
        ForEach(this.fireworks, (f, index) => {
            FireworkComponent({firework: this.fireworks[index]})
        })
    }
}

见源码：https://gitee.com/luyuwen1/20240809/pulls/5