创意之源
大家好，我是寒草 🌿，在很久很久以前，我就打算去制作一些有趣的视频发布到 b 站之类的平台，但是一鸽再鸽，直到现在我预想的那个视频也没有和大家见面。我的主页依旧空空如也，于是乎我正襟危坐，思考为我的视频创作做点什么。
思考了七天七夜，我终于想到现在要做什么了！
做个片尾！
可是我本身也没有什么艺术细胞，想不出什么花里胡哨🌺 的，就去看了几个 up 主的视频进行学习模仿！
嘿嘿，小姐姐真好看！嘿嘿，这个东西看着好好吃！嘿嘿，这个 up 好搞笑！嘿嘿，这个人没头发！
嘿嘿 ，不对，我跑题了吧！于是我再次正襟危坐思考我的片尾素材，我预想到片尾应该有这几个要素：
- 我的名字
没错，我的名字就是寒草哇 🌿，各位想不到吧。想不到才怪呢
- bgm
没错，需要一个和我风格一致的 bgm！
于是我再次正襟危坐，并为我的创意鼓掌～
这有个屁的创意啊喂！
下面，我就继续在 b 站寻觅可以参考的资源，之后在何同学的视频中找到了我想要的参考对象！就是这个：
那我就照着抄吧！不对，我怎么可能照着抄！完全一样怎么会是我的作风！
下面，寒草邀请大家继续阅读！
接着奏乐！接着舞！
首先和大家说一下我的想法：
我视频结尾的 bgm 肯定要一直换的，所以我希望我结尾的文字动效可以随着 bgm 变化而变化，那么我的主题就出来了：
让文字随着音乐旋律舞蹈
这样就可以开搞了，我先去写一个静态页面：
其中的 dom 结构大概就是这样的：
<div class="text-container"> <span class="text">寒</span> <span class="text">草</span> <span class="text">@</span> <span class="text">前</span> <span class="text">端</span> <span class="text">早</span> <span class="text">早</span> <span class="text">睡</span> </div> <div class="bottom">HANCAO DESIGN</div>
之后读取音乐信息：
document.onclick = () => { document.onclick = null; let audio = new Audio("dijia.mp3"); // 4096 let audioCtx = new (window.AudioContext || window.webkitAudioContext)(); let source = audioCtx.createMediaElementSource(audio) let analyser = audioCtx.createAnalyser(); source.connect(analyser); analyser.connect(audioCtx.destination) analyser.fftSize = 512; let bufferLength = analyser.frequencyBinCount; let dataArray = new Uint8Array(bufferLength); audio.play(); setInterval(() => { analyser.getByteTimeDomainData(dataArray); const result = new Array(8).fill(0); dataArray.forEach((item, index) => { result[parseInt(index/32)] += item; }); }, 200); };
这里，我把获取到的数据分成了八段，进行累加～
之后我就想，动效是什么样呢，很自然想到 textShadow 这个属性，但是只去加文字阴影效果显得就很单薄，我就想到了可以让文字阴影的位置随着节奏上下移动，就有了这样一段代码：
result.forEach((item, index) => { document.getElementsByClassName('text')[index].style.textShadow=`0 ${(item - 4096) / 50}px ${item / 300}px #3f7df7`; })
效果就是这样的：
有点卡哈，但是只是我的 gif 录的不太行，而背景音乐就是我童年很喜欢的《奇迹再现》～
跃动的未来狂想曲
那么本篇文章就结束了，我前几天看了《乔布斯传》，又看了很多遍苹果的广告《非同凡响》，在这里我把《非同反响》的广告词分享给大家～
未来一定努力做视频，寒草一定要破圈哦！我要把我的想法说给大家听，我要追逐那个自我创造的非同凡响的梦想！
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
向那些疯狂的家伙们致敬
他们特立独行
他们桀骜不驯
他们惹是生非
他们格格不入
他们用与众不同的眼光看待事物
他们不喜欢墨守成规
他们也不愿安于现状
你可以引用他们 反对他们
颂扬或是诋毁他们
但唯独不能做的就是 漠视他们
因为他们改变了事物
他们推动整个人类向前发展
或许他们是别人眼里的疯子
但却是我们眼中的天才
因为只有那些疯狂到
以为自己能够改变世界的人
才能真正地改变世界
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
