轻舟 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

起个网名好难 发表于 2025-1-13 20:59

轻舟

本帖最后由起个网名好难于 2025-1-13 20:59 编辑 <br /><br /><meta name="referrer" content="never" >
<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--w:768px;--h:1024px;}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:20%;bottom:1%;color:hsla(240,60%, 90%, 0.7);
}
.lrcShow::before {
color: transparent;
}
#oBlk {
width:var(--w);height:var(--h); position: relative; margin:20px 0 32px -60px;
background: hsla(203, 25%, 86%, 0.7);
padding:16px;
overflow:hidden;
border-radius:36px;
box-shadow:3px 3px 6px darkgray;
}
#showSVG {position:absolute; left:0px;top:0px;width:100%;height:100%;}
#processMeter {position: absolute; right:3%; bottom:5px; width: 120px; height:60px; cursor: pointer; z-index:99;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
   #feather {position: absolute; left: 0; top: 0; width: 50px;offset-distance: 0;offset-path: path("M500 -60 Q 300 80, 600 200 T 1000 840");animation: move 8s linear infinite;z-index:100;}
   @keyframes move { to { offset-distance: 100%;} }
</style>
<div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<defs>
            <clipPath id="clip">
            <circle cx="100" cy="50" r="35" />
            </clilpPath>
         </defs>
<image xlink:href="http://p2.music.126.net/tMDKEYGguhwtXfqUlQYDaQ==/109951169681834558.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g fill='none' stroke-width='8'>
<path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="pink" id="fgc"></path>
</g>
   <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="82%" y="55%" id="durTime">00:00</text>
<text x="18%" y="55%" id="curTime">00:00</text>
   </g>
</svg>
</div>
<divclass="lrcShow" data-lrc='轻舟'></div>
</div>
<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtGaAKGMAeHnpmHKRVAC3C8NiaJN028WLuMBnOKQYDVzzfb2v2wl0uBLQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtLUUaNYhibMXibl2wxiaVS5kpTaZ5UApwebwfaJCR2BuULp6kLCaFrYocg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtv2EibIkIAZ3VmlAK7U61g9hBYOURoPDibPxypAwnKJKwPTIUHKTRZb0A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtCBKiaGic7zl2P01LDpgPBXiaeiagRCHoWBiaMkouuPf0ibdcR3PbHb0rNeYQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbt8LsicrpfbCJuFRwSZuiae66ul1Xv4B5BfShiaVbpokZTTRBBj5ZIeGKIw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtPLYrCUWVmlkVBGxAT3PtjDXDtraVbFIoFdNiaEVmRbIoENjmwe3XYibg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/fLFh10mhjmVUUzsOxTGMsSb1icgvjMqbtOS0o1SFVQwwQ8N3tQcu9hT1zxLbIuDlVttsib2fYLlMDZibTXYrbtibgQ/640",
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 768 1024`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-5` : `ep${idx-1}.end-5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':0, 'height':0, 'x':384, 'y':512, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':384, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':512, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':0, 'to':768, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':0, 'to':1024, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
//aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'360 384 512', 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});

//aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'-360 384 512', 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':384, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':512, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':0, 'from':768, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':0, 'from':1024, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
轻舟

轻舟将万重山过
船上你和我
谁家姑娘红晕一抹
一半脸颊一半日落
爱意泛江波
月升入梦再与你细说

轻舟将万重山过
船上你和我
纸伞滴答轻抚雨落
就任那岁月蹉跎
待江南云雾拨
关关难过关关携手过

我一笔一划诉春秋
一撇一捺绣温柔
一动一静情无限
一生一世牵你的手
人生不过二两酒
一两心酸一两愁
唯你这杯甜到我心头

用今生了解
悟你的月
为何缺又为何圆
待我意愿
留在身边
让此生都两情相悦

`;
var opts = {
lrcTxt:lrc,
// audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://music.163.com/song/media/outer/url?id=2166055328.mp3'
//audioURL:'https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac'
};
let lrcPlayer = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;

for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};

fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;

// 歌曲、歌词及动态元素启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());

}
</script>

小辣椒 发表于 2025-1-13 21:14

难难的特效代码漂亮而且图片出来特别的流畅{:4_199:}

小辣椒 发表于 2025-1-13 21:15

图图也是很清晰，配的歌曲好听，赞的{:4_178:}

小辣椒 发表于 2025-1-13 21:15

感谢难难精彩分享

起个网名好难 发表于 2025-1-13 21:36

小辣椒发表于 2025-1-13 21:14
难难的特效代码漂亮而且图片出来特别的流畅

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2025-1-13 21:37

小辣椒发表于 2025-1-13 21:15
图图也是很清晰，配的歌曲好听，赞的

凑合一帖，惭愧

起个网名好难 发表于 2025-1-13 21:38

小辣椒发表于 2025-1-13 21:15
感谢难难精彩分享
https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp

红影发表于 2025-1-13 22:07

这同系列的图图轮播好漂亮，找起来也不容易呢，边看帖子边赏画作了呢。
欣赏难难好帖{:4_199:}

杨帆发表于 2025-1-14 00:05

轮播很顺畅，转场很自然，谢谢难难老师经典分享{:4_191:}

起个网名好难 发表于 2025-1-14 06:19

红影发表于 2025-1-13 22:07
这同系列的图图轮播好漂亮，找起来也不容易呢，边看帖子边赏画作了呢。
欣赏难难好帖

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2025-1-14 06:19

杨帆发表于 2025-1-14 00:05
轮播很顺畅，转场很自然，谢谢难难老师经典分享

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影发表于 2025-1-14 10:39

起个网名好难发表于 2025-1-14 06:19

问好难难，不客气{:4_187:}

起个网名好难 发表于 2025-1-14 11:09

红影发表于 2025-1-14 10:39
问好难难，不客气
https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNibZuCsnZdIdkHYvrZpibrOAAtWcff9z9BKqVOibm15AsDOqbow5ly8pjJ9UMjnibzK5yPYoFcAr9ZHw/640?wx_fmt=jpeg

{:5_106:}

红影发表于 2025-1-14 16:07

起个网名好难发表于 2025-1-14 11:09

哈哈，太有道理了。不过偶尔摸鱼不会被看到的{:4_173:}

老谟深虑 发表于 2025-1-14 16:19

欣赏难难老师的精美音画，很漂亮！

起个网名好难 发表于 2025-1-14 16:36

红影发表于 2025-1-14 16:07
哈哈，太有道理了。不过偶尔摸鱼不会被看到的

https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibPwib0cMlVHLe4yFK7hdjvzsjaTLUfQR3N80eFUpoNYa8ZWkfvGeabo6VWKSYbibAEsTIiaiasqK0oQSw/640?wx_fmt=jpeg

起个网名好难 发表于 2025-1-14 16:37

老谟深虑发表于 2025-1-14 16:19
欣赏难难老师的精美音画，很漂亮！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影发表于 2025-1-14 16:38

起个网名好难发表于 2025-1-14 16:36

我不行，没那么多，坚决摸鱼{:4_173:}

起个网名好难 发表于 2025-1-14 16:40

红影发表于 2025-1-14 16:38
我不行，没那么多，坚决摸鱼

指标下降了{:5_117:}
https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibPwib0cMlVHLe4yFK7hdjvzsYBo5zRJAwibG08xQ1y2p48bebN3JKTLWnconiaxm8moutYHFK4wd3icRA/640?wx_fmt=jpeg

红影发表于 2025-1-14 16:42

起个网名好难发表于 2025-1-14 16:40
指标下降了

还不行，还得降降{:4_173:}

页: [1] 2

花潮论坛's Archiver

轻舟