马老师粒子变异，《小阿枫 - 爱江山更爱美人 (3D环绕版)》 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2023-12-13 23:26

马老师粒子变异，《小阿枫 - 爱江山更爱美人 (3D环绕版)》

本帖最后由亚伦影音工作室于 2024-11-18 08:40 编辑 <br /><br /><style>

#papa { margin: 0 0 0 calc(50% - 640px); width: 1164px; height: 620px; background: #000000; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; z-index: 1; --state: paused; }

#dh{ width: 100%; height: 100%; position: absolute;

z-index: 1;background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;

top:0px; left:0px;

animation: rod 2s linear infinite;}

@keyframes rod{0% {opacity: 1;filter:hue-rotate(60deg)}

50% {opacity: 0.3;}100% {opacity: 1;}

}
#player { width: 120px; height: 120px; cursor: pointer; background: url('https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png') no-repeat center/cover;animation: rotating 12s linear infinite var(--state); position: relative;z-index: 81;}
li-zi { position: absolute; width: 100px; height: 1px; border-radius: 100% 20%;background: tan;animation: imov 2s infinite;z-index: 2;}
@keyframes moving {
to{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
from{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
#lrc {

   --state: paused;

   --motion: cover2;

   --tt: 2s;

   --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);

   position: absolute;z-index: 6;

   left: 52%;

   transform: translate(-50%);

   top: 480px;

   font:normal 3em 华文新魏;

   font-weight:400;

   color: #000080;

   white-space: pre;

   -webkit-background-clip: text;

   filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);

}

#lrc::before {

   position: absolute;

   content: attr(data-lrc);

   width: 20%;

   height: 100%;

   color: transparent;

   overflow: hidden;

   white-space: pre;

   background: var(--bg);



   -webkit-background-clip: text;

   animation: var(--motion) var(--tt) linear forwards;

   animation-play-state: var(--state);

}

@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}

@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>

<div id="papa">

<div id="player" title="播放/暂停"></div>

<div id="dh" style="animation-play-state: running;"></div>

<div data-lrc="到底哪里才会是我的梦乡" id="lrc" title="歌词显示">到底哪里才会是我的梦乡</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=254901.mp3" autoplay loop></audio>

</div>

<script>

(function() {

let all = 160;

for(let i = 0; i < all; i++) {

let movBall = document.createElement('li-zi');

let hudu = Math.PI / 180 * 360 / all * i;

let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);

movBall.style.cssText += `

   --x0: ${xx}px;

   --y0: ${yy}px;

   --deg: ${360 / all * i}deg;

   background: #${Math.random().toString(16).substr(-6)};

   animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);

`;

papa.prepend(movBall);

}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.addEventListener('playing',mState,false);

aud.addEventListener('pause',mState,false);

player.addEventListener('click',playMusic,false);

})();

</script>

<script>

(function() {

/*原始lrc歌词*/

let lrcStr = `爱江山更爱美人 (3D环绕版)

道不尽红尘奢恋

诉不完人间恩怨

世世代代都是缘

流着相同的血

喝着相同的水

这条路漫漫又长远

红花当然配绿叶

这一辈子谁来陪

渺渺茫茫来又回

往日情景再浮现

藕虽断了丝还连

轻叹世间事多变迁

爱江山更爱美人

哪个英雄好汉宁愿孤单

好儿郎浑身是胆

壮志豪情四海远名扬

人生短短几个秋啊

不醉不罢休

东边儿我的美人儿

那西边儿黄河流

来呀来个酒啊

啊不醉不罢休

愁情烦事别放心头

红花当然配绿叶

这一辈子谁来陪

渺渺茫茫来又回

往日情景再浮现

藕虽断了丝还连

轻叹世间事多变迁

爱江山更爱美人

哪个英雄好汉宁愿孤单

好儿郎浑身是胆

壮志豪情四海远名扬

人生短短几个秋

啊不醉不罢休

东边我的美人

那西边黄河流

来呀来个酒啊

不醉不罢休

愁情烦事别放心头

愁情烦事别放心头`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/

let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/

let lrcTime = (ar) => {

   let tmpAr = [];

   for(j = 0; j <ar.length - 1; j ++) {

            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));

   }

   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;

   tmpAr.push(aver);

   tmpAr.forEach((item,key) => {

            ar = item > aver ? aver : item;

   });

   return ar;

};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/

let getLrcAr = (text) => {

   let lrcAr = [];

   let calcRule = ;

   for(x of text.split('\n')) {

            let ar = [];

            let re = /\d+[\.:]\d+([\.:]\d+)?/g;

            let geci = x.replace(re,'');

            if(geci) {

                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');

                     let time = x.match(re);

                     if(time != null) {

                           for(y of time) {

                                    let tmp = y.match(/\d+/g);

                                    let sec = 0;

                                    for(z in tmp) sec += tmp * calcRule;

                                    ar = ;

                                    lrcAr.push(ar);

                           }

                     }

            }

   }

   lrcAr.sort((a,b)=> a - b);

   return(lrcTime(lrcAr));

};

/*函数：模拟显示同步歌词*/

let showLrc = (time) => {

   let name = mFlag ? 'cover1' : 'cover2';

   lrc.innerHTML = lrcAr;

   lrc.dataset.lrc = lrcAr;

   lrc.style.setProperty('--motion', name);

   lrc.style.setProperty('--tt', time + 's');

   lrc.style.setProperty('--state', 'running');

   mKey += 1;

   mFlag = !mFlag;

};

/*函数：处理当前歌词索引 mKey*/

let calcKey = () => {

   for (j = 0; j < lrcAr.length; j++) {

            if (aud.currentTime <= lrcAr) {

                     mKey = j - 1;

                     break;

            }

   }

   if (mKey < 0) mKey = 0;

   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;

   let time = lrcAr - (aud.currentTime - lrcAr);

   showLrc(time);

};

/*格式化时间信息*/

let toMin = (val) => {

   if (!val) return '00:00';

   val = Math.floor(val);

   let min = parseInt(val / 60),

   sec = parseFloat(val % 60);

   if (min < 10) min = '0' + min;

   if (sec < 10) sec = '0' + sec;

   return min + ':' + sec;

}

/*函数：关键帧动画状态切换*/

let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/

aud.addEventListener('timeupdate', () => {

   for (j = 0; j < lrcAr.length; j++) {

            if (aud.currentTime >= lrcAr) {

                     cKey = j;

                     if (mKey === j) showLrc(lrcAr);

                     else continue;

            }

   }

});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/

aud.addEventListener('play', () => mState());/*监听播放事件*/

aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/

})();

dh.style.animationPlayState = aud.paused ? 'paused' : 'running';

aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');

aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');

</script>

愤怒的葡萄 发表于 2023-12-14 00:45

非常喜欢的一首音乐。

红影发表于 2023-12-14 08:56

这个构思真不错，把粒子拉长后，像是闪光一样了，漂亮{:4_199:}

红影发表于 2023-12-14 08:59

自己去改变的，就会有不一样的效果。这个背景设计也好，让背景明暗变化和色调变化，配合着改变后的粒子，特别漂亮呢{:4_187:}

红影发表于 2023-12-14 09:01

这个帖子里的一键全控，是真正的所有状态的控制，不是使用动态的某一帧来替代了。很赞{:4_187:}

红影发表于 2023-12-14 09:01

给亚伦老师点赞{:4_199:}

幸运草 发表于 2023-12-14 09:12

好看{:6_244:}

愤怒的葡萄 发表于 2023-12-14 10:00

这首歌曲我小时候是非常喜欢的，爱江山更爱美人。

马黑黑 发表于 2023-12-14 12:02

挺好的效果。粒子的形态可以五花八门，这需要看构思和实现能力了。

老谟深虑 发表于 2023-12-14 12:33

精美的制作，真好看。

世外桃源 发表于 2023-12-14 13:43

漂亮{:4_199:}

世外桃源 发表于 2023-12-14 13:44

好看，好听，感谢老师分享{:4_187:}

页: [1]

花潮论坛's Archiver

马老师粒子变异，《小阿枫 - 爱江山更爱美人 (3D环绕版)》