梦江南 发表于 2025-4-6 11:23

李大火《紫荆花盛开》梦江南拍摄制作


<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root        {--w:600px;--h:800px;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 1.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: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:2%; 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 100 Q 300 80, 600 200 T 600 800");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="https://img2.oldkids.cn/upload/2025/04/05/blog_260798238_20250405171037277.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://img2.oldkids.cn/upload/2025/04/05/blog_260798238_20250405171216751.jpg",
"https://img3.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173348295.jpg",
"https://img4.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173433490.jpg",
"https://img3.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173555901.jpg",
"https://img2.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173646174.jpg",
"https://img2.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173801420.jpg",
"https://img3.oldkids.cn/upload/2025/04/05/blog_260798238_20250405173843171.jpg",
];
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 600 800`});
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':600, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':0, 'to':810, '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':600, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':0, 'from':810, '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 =`
最美的紫荆花
白云之下
随微风在摇摆
心中的梦之花
仍在盛开不惧挫折阻碍
不论多远的路
不会迷路
有信念守护
淋过雨的路
阳光会覆盖孤独
最美的紫荆花
白云之下
随微风在摇摆
笑容绽放盛开
温暖存在
忧愁化作尘埃
梦想从未离开
初心仍在
等花落花开
风雨无法阻碍
信念的存在
词由 www.33VE.com 提供
作词：李大火
作曲：李大火
LRC：梦江南
希望照出轨迹
让我向着光前行
穿过层层迷雾
找寻光阴的真理
哪怕前路崎岖
哪怕风雨不停
不再彷徨犹豫
不再畏惧困境
每次挑战都是成长的证明
最美的紫荆花
白云之下
随微风在摇摆
心中的梦之花
仍在盛开
不惧挫折阻碍
不论多远的路
不会迷路
有信念守护
淋过雨的路
阳光会覆盖孤独
最美的紫荆花
白云之下
随微风在摇摆
笑容绽放盛开
温暖存在
忧愁化作尘埃
梦想从未离开
初心仍在
等花落花开
风雨无法阻碍
信念的存在

`;
var opts = {
        lrcTxt:lrc,
//        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://img1.oldkids.cn/upload/2025/04/06/blog_260798238_20250406084809700.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-4-6 11:29

梦江南朋友真是一位难得的才女。{:5_116:}

红影 发表于 2025-4-6 11:36

江南自己拍摄的紫荆花呢，好看，拍得真好{:4_187:}

红影 发表于 2025-4-6 11:36

这个图片轮播效果也好。欣赏江南好帖{:4_199:}

梦江南 发表于 2025-4-6 11:41

梦油 发表于 2025-4-6 11:29
梦江南朋友真是一位难得的才女。

谢谢梦油老师首席欣赏，梦油老师过奖了。中午问好！

梦江南 发表于 2025-4-6 11:43

红影 发表于 2025-4-6 11:36
江南自己拍摄的紫荆花呢，好看，拍得真好

问好影子，紫荆花就在我住的楼下，有4枝树呢。

梦江南 发表于 2025-4-6 11:46

红影 发表于 2025-4-6 11:36
这个图片轮播效果也好。欣赏江南好帖

这代码是难难老师的，他是横式，我拍的是直式的，改了好久呢。改成了很开心。{:4_204:}

樵歌 发表于 2025-4-6 11:59

片片拍得相当漂亮。很喜欢这花儿。也叫“满树红”与香港的市花不同种属。

亦是金 发表于 2025-4-6 12:41

谢谢梦江南分享精彩制作！点赞学习了！{:4_187:}

走过岁月 发表于 2025-4-6 13:31

姹紫嫣红真漂亮

梦江南 发表于 2025-4-6 14:12

樵歌 发表于 2025-4-6 11:59
片片拍得相当漂亮。很喜欢这花儿。也叫“满树红”与香港的市花不同种属。

谢谢樵歌老师欣赏支持，下午好。

梦江南 发表于 2025-4-6 14:13

亦是金 发表于 2025-4-6 12:41
谢谢梦江南分享精彩制作！点赞学习了！

谢谢亦是金老师欣赏支持，下午好！

梦江南 发表于 2025-4-6 14:13

走过岁月 发表于 2025-4-6 13:31
姹紫嫣红真漂亮

谢谢岁月老师欣赏支持，下午好！

樵歌 发表于 2025-4-6 15:45

梦江南 发表于 2025-4-6 14:12
谢谢樵歌老师欣赏支持，下午好。

不客气哈{:4_190:}

梦江南 发表于 2025-4-6 15:48

樵歌 发表于 2025-4-6 15:45
不客气哈

礼尚往来应该的。{:4_190:}

梦油 发表于 2025-4-6 17:05

梦江南 发表于 2025-4-6 11:41
谢谢梦油老师首席欣赏，梦油老师过奖了。中午问好！

你真是多才多艺啊。

梦江南 发表于 2025-4-6 17:35

梦油 发表于 2025-4-6 17:05
你真是多才多艺啊。

只是爱好多点而已。

红影 发表于 2025-4-6 20:55

梦江南 发表于 2025-4-6 11:43
问好影子，紫荆花就在我住的楼下，有4枝树呢。

能想到把它们摄入镜头并做成音画，也回思紫荆的福气呢，它们可以让美丽的姿态永存了。

红影 发表于 2025-4-6 20:56

梦江南 发表于 2025-4-6 11:46
这代码是难难老师的，他是横式，我拍的是直式的，改了好久呢。改成了很开心。

所以代码的学习乐趣多多{:4_187:}

小辣椒 发表于 2025-4-6 21:52

阿姨也是厉害，花是手机拍的吧，拍的很好，这么多张张PP都好看{:4_199:}
页: [1] 2
查看完整版本: 李大火《紫荆花盛开》梦江南拍摄制作