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个阶段
- 开场有一段对话
- 天黑
- 放烟花 烟花包括有文字的烟花与普通的烟花
- 粒子飘落组成一些文字
有人可能会觉得前戏。。。呃。。 前奏太长了,可以通过修改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