论坛 › 动画音画 › 绍兴我的故乡

夕阳黄昏 发表于 2024-12-18 11:38

绍兴我的故乡

本帖最后由 夕阳黄昏 于 2024-12-18 16:51 编辑 <br /><br /><meta name="referrer" content="never">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk        {
        width:1200px;height:900px;margin:80px auto 40px calc(50% - 681px);
        display: grid;background-color:hsl(240, 35%, 95%);
        place-items:center;
        position:relative;
        grid-template-rows:810px 90px;
        grid-template-columns:100%;
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:4px;
        padding:4px;font-size:14px;
}
#showSVG        {
        width:1200px;background-color:hsl(180, 30%, 70%);padding:8px;overflow:hidden; border-radius:12px;background-color:transparent;
}
#picture        {               
        -webkit-mask-image: radial-gradient(black 23%, transparent 85%);
        -webkit-mask-size: cover;z-index:1;border-radius:16px;
}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.5em 楷体;
                        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:-5px;color:hsla(240,60%, 90%, 0.7);
        }
#processMeter        {position: absolute; right:10px; bottom:0px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
        <div id="showSVG"></div>
        <div id="lrc"></div>
        <div id="processMeter">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
                  <radialGradient r="0.8" id="rg">
                        <stop offset="0.1" stop-color="hsl(0, 70%, 50%)"></stop>
                        <stop offset="0.5" stop-color="hsl(10, 70%, 75%)"></stop>
                        <stop offset="1" stop-color="hsl(30, 70%, 90%)"></stop>
                  </radialGradient>
                  <path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.63932022500211 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
                  <g stroke-width="8">
                        <path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="pink" fill="none"></path>
                        <path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="snow" fill="none"></path>
                  </g>
                  <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font:bold 24px;">
                        <text x="82%" y="50%" id="durTime">00:00</text>
                        <text x="18%" y="50%" id="curTime">00:00</text>
                  </g>
                </svg>
        </div>
        <div class="lrcShow" data-lrc="绍兴我的故乡"></div>
</div>

<script>
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);else document.body.appendChild(sObj);return sObj};
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/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN22DYiaydY4Ju34BIbCZvGtHOktdsE3shkaKKlHubHI44k3ibKTpItof2g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2Jrr6tPHFL7YkhXhqicLPvibgsKMkkoViagcXLz5K1sn70CVZnUxS2PAGg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2U3icBicUgJuOalO2QDicibnckCaz3ALJz2XZEa6hJiabuz7NTQEicjhbNe3A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2ib8k7hpKlwGp8cWjOoNnQ0plib26R0j66dAsRwGOSEwITvsgtGEJJSgg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2gvR0w5XmiaB6KS7VBuZL7aKsJSeVmV4lTqPWGILarKNWb0zH0NMhdZQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2doEiaym8JT2kFZexvlYoMHIobcSrsB01219wCa4FLN5PJRm6GjkpVNg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2LDDNyyJJibrFElax3jkPdurgfOa4TljVreI5LcNZpIVBz0eaDoyqPQw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN26ic4GLx2XN1ADC6BoBOlOt46SVLPyDKfswenF8fnrzwvQjXghXYjPiag/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2CMLibo1rlaZA5AKYicL4e7mHloLezOFsdSsicAemUVaRvObqMSRmnpKOQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2e6ial59hh5FIHCq2k5hyhby3eyr1q5yibMzst3rqkARSWzyAg0Pz7r5w/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2dDsWHZPicmiaDeZekfKica3SHddbklRZicfwic2aAibb3exJSicO6ETZjb1Qg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN26js7B5h4mzNpOm68woaG7bNMfiabDNW5ic1aV1VJ3flrM5wF05WOh6icA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2tAOoRgHbqWUdB9YqXfHTLSt0amDGicQAq7H6GVwFfluwzQXkoS0LZIA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2cAPEG13rgqAuK0Haob7tMChry09VjJgm3JrhwGlEslV3UvxQgyWkoQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2zYxBPLPESnM0WRZGnQJKlmyaLqwjFw4Wy2ZT4FiaYIfoy7iaSVVmZx0g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2dyUTK4ian4ibSShvzVAVsCicvwFEZXsdgpcmfveM1lh1VAEan8Eg25YNg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN2eQAz2IzU66N51LCRzQYo7xlZDLdjK4Nw1DfKfdPGcic1V9dicQqGJ0Sw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/OZe1c3yt3DbJpZJMYXxPVHZ3oa9A7RN25QzbjHg2APcicQhEibqmMkSGcZ1p1PkSk2SfG667Sgpz6iamnqdAT6JiaQ/640",
];
let rows = 3, cols = 6 ,pWidth = 1080, factor=rows<cols?rows:cols, pHeight = 1440;
let mysvg = genTagObj(showSVG,{'tag':'svg', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 ${pWidth * cols} ${pHeight * rows}`});

pics.forEach((url,idx) => {
        let rowPos = (idx % cols) * pWidth, colPos = parseInt(idx/cols) * pHeight, beginStr = idx == 0 ? '0;clrs.end+1' : `ep${idx-1}.end-0.5`;
        let bjObj = genTagObj(mysvg,{'tag':'image', 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0.2, 'preserveAspectRatio':'none'});
        let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0, 'preserveAspectRatio':'none'});
        let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':2, 'begin':beginStr, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':rowPos, 'to':((cols - factor) * pWidth) / 2 , 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':colPos, 'to':((rows - factor) * pHeight) / 2, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':pWidth, 'to':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':pHeight, 'to':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
       
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':rowPos, 'from':((cols - factor) * pWidth) / 2, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze', 'id':`ep${idx}`});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':colPos, 'from':((rows - factor) * pHeight) / 2, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':pWidth, 'from':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':pHeight, 'from':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        if(idx == (pics.length - 1))
                aniObj = genTagObj(imgObj,{'tag':'animate', 'id':"clrs", 'attributename':'opacity', 'to':0, from:1, 'begin':`bp${idx}.begin+15`,'dur':2, 'fill':"freeze"});
        else
                aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'opacity', 'to':0, 'from':1, 'dur':2, 'begin':'clrs.begin', 'fill':'freeze'});
       
});
showSVG.innerHTML = mysvg.outerHTML;
const lrctxt = `
绍兴我的故乡
又是三月柳成行
那年离别正春光
望明月 思故乡
忘不了的陈酿老酒香
荷塘小桥马头墙
乌篷小船入画廊
乌毡帽 换新妆
喝不厌母亲的干菜汤
绍兴啊我的故乡
鉴湖碧波十里白塔洋
坚韧的青石板是你有力的臂膀
清澈的舜江水舒展温柔的胸膛

运河长流橹声不再响
曾经古纤道上弓背拉纤的模样
雕刻出绍兴人吃苦耐劳又坚强
绍兴啊我的故乡
运河长流橹声不再响
曾经古纤道上弓背拉纤的模样
雕刻出绍兴人吃苦耐劳又坚强
绍兴我可爱的故乡
`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=507532369.mp3",
}

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>

醉美水芙蓉 发表于 2024-12-18 11:40

夕阳黄昏 发表于 2024-12-18 11:47

醉美水芙蓉 发表于 2024-12-18 11:40
欣赏老师带来的精彩音画！

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

愤怒的葡萄 发表于 2024-12-18 13:04

我很小的时候去过两次绍兴，跟我妈妈一道参加党员活动去的。

夕阳黄昏 发表于 2024-12-18 13:13

愤怒的葡萄 发表于 2024-12-18 13:04
我很小的时候去过两次绍兴，跟我妈妈一道参加党员活动去的。

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

一次也没去过{:5_102:}

小辣椒 发表于 2024-12-18 13:37

老顽童这歌曲是纯歌曲名称还是不是真的故乡啊

小辣椒 发表于 2024-12-18 13:39

绍兴现在是非常漂亮了，前段时间去玩了绍兴黄酒小镇很美，很有特色的，乌篷船看见的，拍了许多的照片

小辣椒 发表于 2024-12-18 13:41

又一个不一样款式的图片转换效果，还带歌词，老顽童非常的强悍{:4_178:}

愤怒的葡萄 发表于 2024-12-18 13:56

夕阳黄昏 发表于 2024-12-18 13:13
一次也没去过

我是上海的，离绍兴是比较近的，我妈妈单位开党员活动，那时候我还是小学生，TA带我到绍兴的一条船上去的，就是中共一大转移到绍兴湖上开会的那条船。

起个网名好难 发表于 2024-12-18 14:06

愤怒的葡萄 发表于 2024-12-18 13:56
我是上海的，离绍兴是比较近的，我妈妈单位开党员活动，那时候我还是小学生，TA带我到绍兴的一条船上去的 ...

一大是嘉兴南湖不是绍兴

夕阳黄昏 发表于 2024-12-18 14:18

小辣椒 发表于 2024-12-18 13:37
老顽童这歌曲是纯歌曲名称还是不是真的故乡啊

假的{:5_106:}

夕阳黄昏 发表于 2024-12-18 14:19

小辣椒 发表于 2024-12-18 13:39
绍兴现在是非常漂亮了，前段时间去玩了绍兴黄酒小镇很美，很有特色的，乌篷船看见的，拍了许多的照片

没去过，看看图片羡慕下

夕阳黄昏 发表于 2024-12-18 14:20

小辣椒 发表于 2024-12-18 13:41
又一个不一样款式的图片转换效果，还带歌词，老顽童非常的强悍

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

夕阳黄昏 发表于 2024-12-18 14:20

愤怒的葡萄 发表于 2024-12-18 13:56
我是上海的，离绍兴是比较近的，我妈妈单位开党员活动，那时候我还是小学生，TA带我到绍兴的一条船上去的 ...

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

愤怒的葡萄 发表于 2024-12-18 14:40

起个网名好难 发表于 2024-12-18 14:06
一大是嘉兴南湖不是绍兴

不好意思，搞错了，应该是嘉兴，绍兴我没去过。

起个网名好难 发表于 2024-12-18 14:59

愤怒的葡萄 发表于 2024-12-18 14:40
不好意思，搞错了，应该是嘉兴，绍兴我没去过。

{:5_108:}

红影 发表于 2024-12-18 15:04

数了一下，应该是用18张轮转图图逐个展示，然后填满了背景。
很漂亮的轮播，从各个角度展示了绍兴的特点。{:4_199:}

红影 发表于 2024-12-18 15:05

看到绍兴两字，想起黄酒，想起孔乙己和鲁迅先生{:4_173:}

夕阳黄昏 发表于 2024-12-18 15:21

红影 发表于 2024-12-18 15:04
数了一下，应该是用18张轮转图图逐个展示，然后填满了背景。
很漂亮的轮播，从各个角度展示了绍兴的特点。 ...

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

夕阳黄昏 发表于 2024-12-18 15:23

红影 发表于 2024-12-18 15:05
看到绍兴两字，想起黄酒，想起孔乙己和鲁迅先生

绍兴黄酒有名气

查看完整版本: 绍兴我的故乡