化风行万里-大欢

亚伦影音工作室 发表于 2024-11-16 20:26

本帖最后由亚伦影音工作室于 2025-1-7 18:13 编辑 <br /><br /><style >
#papa{margin: 10px 10px ;
width: 535px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 850px;
border: 1px solid;
background: #333 url('https://pic.imgdb.cn/item/6738791fd29ded1a8c9ead33.webp') no-repeat center/cover;
position: relative;z-index: 12345;}
#papa:hover { transform:rotate(90deg)scale(1.5)}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;filter: url(#water);
height: 100%;animation: round 60s linear infinite; }
#tu img{width: 100%;
}

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
}
#dt{position: absolute;top:0%; left:0%;
width: 100%;
height: 100%;mix-blend-mode: lighten;z-index: 3; }

#dt img{
width: 100%;
height: 100%;}
#mplayer {top:90%; left:45%;z-index: 60;
position: absolute;
width: 60px;
height: 60px;
overflow:hidden;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
#tit {
   position: absolute;
   width: fit-content;
   height: fit-content;
   left:5%;top:30px;
   z-index: 12;
   color: SeaGreen;
   font: bold 30px/40px 'Microsoft YaHei',serif;

}
.mysp {
   position: relative;
   display: block;
}

@keyframes move {
   0% { left: 10px;top:10px; transform: rotate(0); color: olive; }
   50% {left:150px;top:150px; transform: rotate(360deg); color: red; }
   100% {left:10px;top:10px; transform: rotate(720deg); color: green; }
}

</style>
<div id="papa">
<div id="tit"></div>

<div id='dt'><img id="testImg" src="https://pic.imgdb.cn/item/6738871cd29ded1a8ca9ea1c.gif" ></div>
<div id='tu'>
<svg width="0" height="0"id="p" >
<filter id="water">
<feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
<feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
   <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="5" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
<img src="https://pic.imgdb.cn/item/67388237d29ded1a8ca5fcb0.webp" alt=""></div>
<div ><imgid="mplayer"src="https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png" alt="" /></div>
<div id="lrc" data-lrc="化风行万里-大欢">化风行万里-大欢</div>
</div>

<audio id="MusicPlayer" src="https://s2.ananas.chaoxing.com/sv-w9/audio/4b/13/62/ba6f4e62aa3d18778047666d70ab4592/audio.mp3" loop autoplay></audio>

<style>
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 80%;transform: translate(-50%);font:normal 2.2em 华文新魏; 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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `化风行万里-大欢
词：聂小慧
曲：聂小慧
编曲：卡个秋@Huijian music
长笛：郭士钰
封面：华玮轩
和声：小佑
童声：王梓熙
混音：苏洲
监制：米奇，王翔
制作人：聂小慧
发行：阿宇、开心
推广：汉马文化
OP：星汉马文化
『酷狗音乐人星曜计划』
就一句对不起结束当初的约定
你转身离开得毫不犹豫
被遗忘的曾经又泛起了涟漪
有多可惜却无能为力
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
`;

/*变量：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 (MusicPlayer.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (MusicPlayer.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 = () => MusicPlayer.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');
/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (MusicPlayer.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script>
let spans = [],idx = 0, last = null;

   [...'*化风行万里*大欢*'].forEach((item,key) => {
            let sp = document.createElement('span');
            sp.className = 'mysp';
            sp.innerHTML = item + '<br>';
            spans.push(sp);
            tit.appendChild(sp);
   });
var movTimer = null;
      let mov = () => {
            if(last != null) spans.style.animation = '';
            spans.style.animation = 'move 2s';
            last = idx;
            idx += 1;
            if(idx >= spans.length) idx = 0;
            movTimer = MusicPlayer.paused ? clearTimeout(movTimer) : setTimeout(mov,2000);
};

   mov();
MusicPlayer.addEventListener('playing', () => {
   mplayer.style.animationPlayState = 'running';
   mov(); //运行 mov 函数
});

MusicPlayer.addEventListener('pause', () => {
   mplayer.style.animationPlayState = 'paused';
   clearTimeout(movTimer); //取消定时器
});
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}
</script>

<script>
tu.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
var image= document.getElementById("testImg");

mplayer.addEventListener('click', () => { MusicPlayer.paused ? (MusicPlayer.play(),image.play(),p.unpauseAnimations()) : (MusicPlayer.pause(),image.stop(),p.pauseAnimations())});
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>

红影发表于 2024-11-16 21:04

把左移字体和图片移动展示结合在一起，这个制作很动脑筋呢{:4_199:}

红影发表于 2024-11-16 21:05

亚伦老师的制作总有很多设想以及各种效果的运用，很赞{:4_187:}

亚伦影音工作室 发表于 2024-11-16 21:12

还得请教黑老师，让他用播放按钮控制动字！

马黑黑 发表于 2024-11-17 13:47

亚伦影音工作室发表于 2024-11-16 21:12
还得请教黑老师，让他用播放按钮控制动字！

分三步处理：

一、需要加一个变量 movTimer 用来控制 setTimeout 的执行与暂停，可以放在 mov() 函数所在代码区域的头部：

var movTimer = null;

二、mov 函数改装一下：

var mov = () => {
if(last != null) spans.style.animation = '';
spans.style.animation = 'move 2s';
last = idx;
idx += 1;
if(idx >= spans.length) idx = 0;
movTimer = MusicPlayer.paused ? clearTimeout(movTimer) : setTimeout(mov,2000);
};

//mov(); //这里的函数执行可以不要，将在音频监听事件中管控（保留也无妨）

三、音频监听事件中，各加入相应语句：

MusicPlayer.addEventListener('playing', () => {
tu.style.animationPlayState = 'running';
mov(); //运行 mov 函数
});

MusicPlayer.addEventListener('pause', () => {
tu.style.animationPlayState = 'paused';
clearTimeout(movTimer); //取消定时器
});

修改之后，预期的目的会达到：音乐暂停，文本动画会在执行完后暂停，而不是马上暂停，这是惯性问题，音乐重新播放，文本动画会接着上一个文字动画继续。

亚伦影音工作室 发表于 2024-11-17 15:05

马黑黑发表于 2024-11-17 13:47
分三步处理：

一、需要加一个变量 movTimer 用来控制 setTimeout 的执行与暂停，可以放在 mov() 函 ...

老师说的很详细，现在是手机，上网再修改，谢谢！另一款动字也是这样处理的吧！

马黑黑 发表于 2024-11-17 15:28

亚伦影音工作室发表于 2024-11-17 15:05
老师说的很详细，现在是手机，上网再修改，谢谢！另一款动字也是这样处理的吧！

你用定时器的话就这样处理，你用纯CSS动画的话交给CSS变量处理

亚伦影音工作室 发表于 2024-11-17 19:37

马黑黑发表于 2024-11-17 15:28
你用定时器的话就这样处理，你用纯CSS动画的话交给CSS变量处理

只好用手机修改就像老师说的不会即可暂停，但从新播放接着前个字继续运行，这样也可以！谢谢老师！

马黑黑 发表于 2024-11-17 21:23

亚伦影音工作室发表于 2024-11-17 19:37
只好用手机修改就像老师说的不会即可暂停，但从新播放接着前个字继续运行，这样也可以！谢谢老师！

就是这样的：那两秒还剩多少是多少，事干完就听。这和尿尿是一个道理：开弓没有回头箭{:4_170:}

亚伦影音工作室 发表于 2024-11-17 21:24

本帖最后由亚伦影音工作室于 2024-11-17 21:55 编辑 <br /><br />马黑黑发表于 2024-11-17 21:23
就是这样的：那两秒还剩多少是多少，事干完就听。这和尿尿是一个道理：开弓没有回头箭
哈哈.....

<p style="font:bold 60px sans-serif"><span style="color:#3b0602">亚</span><span style="color:#3af8bf">伦</span><span style="color:#c486c9">影</span><span style="color:#f2e0b6">音</span><span style="color:#5e5a5e">工</span><span style="color:#a06690">作</span><span style="color:#9b4c48">室</span></p>

页: [1]

花潮论坛's Archiver

化风行万里-大欢