用一场烟花秀给大家拜年了

1,086 阅读6分钟

PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛

预览

newnewking.github.io/2022chunjie…

如果加载比较慢 可以在github下载打包好的文件,打开index.html就能预览

整个动画大概1分30秒左右。

预览图 预览图 预览图

项目地址

程序员的小浪漫

这个项目是我几年前,给我女朋友做的(当然现在是我的老婆了)。这次主要是修改了一些细节以及文案。

master分支是以前的内容,全是些土味情话。

chunjie分支是就是新年相关的内容。

目的

我希望通过这个项目给大家送上新年祝福,同时也提供了这个项目的github的地址

大家完全可以修改文案,打包的文件,部署在自己的服务器,或者github.io上

给自己的家人、亲朋好友或者自己在意的送上自己的新年祝福。

在这个文章剩余的部分,我会给大家讲解如何修改配置的文件。

这篇文章基本不会涉及到代码原理,不过我会在文末贴上教程

ps: 有需要的话可以参照一下我之前做的,修改一下文案,做成一个表白用途的项目。

pps: 表白是吹响胜利的号角,而不是发起进攻的冲锋号

如何修改

首先就是要安装依赖

运行npm install当然 使用pnpm、yarn来安装也是可以的

本地预览

安装好依赖之后 可以使用 npm run dev来进行本地的预览

修改内容

图片与音频: 可以直接通过替换文件来进行修改

文案: 在/src/config/global.js里, 进行文案的修改。

整个动画过程 我分成了4个阶段

  1. 开场有一段对话
  2. 天黑
  3. 放烟花 烟花包括有文字的烟花与普通的烟花
  4. 粒子飘落组成一些文字

有人可能会觉得前戏。。。呃。。 前奏太长了,可以通过修改step属性来操作直接从哪一步开始

// 从阶段几开始 1、对话 2、天黑 3、烟花 4、展示文字
step: 1,

也可以修改对话的文案、文字颜色、语速、两句话的间隔时间

配置里的所有时间单位都是毫秒

阶段一

// 阶段一
dialogueOpt:{ 
  interval: 1500,  //两句话的间隔时间
  speed: 100,   //语速
  color1: '#ff00ff',
  font1: '14px Arial',
  color2: '#f97afb',
  color3: 'red',
  color4: '#f8e71c',
  color5: '#00ff00',
  color6: '#00ffff',
  color7: '#fff',
},
// type对应上面的color与font  若没有对应的 则默认为color1或font1
// type: 7 就是使用 color7与font7 因为没有font7 所以则会使用font1
// 最后的样式就是color7与font1
dialogue:[
  {type:7, name:'小孩A', txt:'程二狗,快出来放炮了'},
  {type:7, name:'小孩A', txt:'我今天买了很多擦炮'},
  {type:6, name:'小孩B', txt:'走走走,我也买了很多'},
  {type:6, name:'小孩B', txt:'我偷了我的压岁钱,买了很多窜天猴'},
  {type:6, name:'小孩B', txt:'我们去炸隔壁何小花'},
  {type:6, name:'小孩B', txt:'她老是揍我!'},
  {type:7, name:'小孩A', txt:'还是别了,我可打不过她'},
  {type:7, name:'小孩A', txt:'你快出来呀'},
  {type:7, name:'小孩A', txt:'听说王兴欣在掘金搞了一场烟花秀'},
  {type:7, name:'小孩A', txt:'再不快点就没好位置了'},
  {type:7, name:'小孩A', txt:'咦,你看'}
],

阶段二

阶段二就只有一个天黑的时间

// 阶段二
sunset: 6000,   // 天黑时间

阶段三

放烟花可是一个重头戏,烟花有两种类型 1种是普通的烟花、1种是文字的烟花

普通的烟花可操作内容如下 如果希望更好看一点 可以将count范围增大,但是count多了可能会造成卡顿哟

fireworkInterval:[1000, 4000],// 烟花产生间隔 每隔1-4s就会随机产生一个烟花
//烟花的属性
fireworks:{ 
  // x、y是出生时坐标 不用改动
  x: undefined, 
  y: height,
  // end是爆炸地点的坐标 不用改动
  xEnd: undefined,
  yEnd: undefined,
  // size是烟花升空时看到的小点点的大小 不用改动
  size: 2,
  // 烟花升空的速度
  velocity: 3,
  // 烟花的透明度
  opacity: 0.8,
  // 烟花半径大小的范围  最终的结果需要 半径
  radius: [1, 2],
  // 炸裂后粒子数范围 粒子数越多烟花越好看 但是可能会造成卡顿 
  count: [150,250], .
  //消失后 => 炸裂  等待时间
  wait: undefined, 
  //烟花颜色 未指定颜色则是随机的颜色
  color: undefined,  
},

文字的烟花 一般来说 修改firewords就可以了。

// '|' 为分隔符 
fireWords:'祝大家|新的一年|生意兴隆|财源滚滚|万事如意|步步高升|福寿安康|笑口常开|最重要的是|没有BUG', 
fireOpt: {
  //每段话出现的间隔时间
  wordInterval: 2000, 
},
//烟花字的参数
word:{  
  // 粒子的间隔数 gap越大 粒子数越少
  gap: 3,   
  // 文字的大小
  size: 70,
  // 展示的位置 0表示最顶部
  y: height / 4
}, 

阶段四

这个阶段 会有小爱心的图标组成文字 一般修改titleWords即可,不指定颜色的话 每一个小爱心的颜色都是不同的。

titleWords: '天天开心|最为重要|祝大家|虎年大吉', // '|' 为分隔符
titleOpt:{
  // 第一排的字距离顶部的距离
  y: 20,
  // 粒子的间隔数 gap越大 粒子数越少
  gap: 3,
  // 字的大小
  size: 60,
  // 小爱心的大小
  pSize: 6,
  // 小爱心的颜色 不指定的话就都是随机的
  //color: 'rgb(180,4,4)',// 可以缺省
  // 每段文字出现的间隔时间
  delay: 3000,
  // 每段文字的间距
  distance: 100, //行间距
  // 小爱心出现 => 指定位置的时间 
  // 数字越小形成文字越快
  e: 2000
},

发布

进行发布的话 首先要进行打包

运行npm run build就能进行打包,打包后的文件在/dits文件夹内,可以双击/dits/index.html直接进行预览

github上,你可以创建一个 用户名.github.io的仓库,这样你就可以访问用户名.github.io这个域名。

假设你有个demo项目,你创建一个gh-pages的分支,那么你访问用户名.github.io/demo就能看到你demo项目里gh-pages分支里的内容。

所以你可以将打包后的文件放在你某一个仓库的gh-pages分支下,即可在你的用户名.github.io/xxx下进行访问

关于github.io这里写的比较简单,有兴趣的小伙伴可以自行搜索一下。

效果教程

# 程序员的小浪漫----烟火

# 程序员的小浪漫----文字粒子效果

效果参考内容

烟花效果主要参考这个项目 ---- fireworks seen in the countryside

使用粒子来展示文字主要是学习这个 ---- shape-shifter

codepen.io 上的一个作品 ---- Love In Hearts