梦江南 发表于 2025-7-5 15:23

凌宵花开，手机拍摄制作


<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk        {
        --w:600px;--h:800px;
        width:var(--w);height:var(--h);
        margin-left:calc(50% - 0.5 * var(--w));
        overflow:hidden;
        position:relative;
        border-radius:32px;
        box-shadow:4px 4px 10px black;
        background:hsla(60, 50% , 80%, .4);
}
        #oBlk img        {
                width:var(--w);height:var(--h);opacity:0;
                position:absolute;left:0px;top:0px;
                -webkit-mask-image: radial-gradient(black 20%, transparent 80%);
                -webkit-mask-size: cover;z-index:1;
        }
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.5em 楷体;
                        pointer-events:none;width:1.5em;height:80%;
                        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);
                        writing-mode: vertical-rl;z-index:99;left:5px;top:50px;color:hsla(240,60%, 90%, 0.7);
        }
        .lrcShow::before {
                        writing-mode: vertical-rl;
        }
       
        @keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
        @keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
#processMeter        {position: absolute; right:3%; bottom:5px; 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'>
                <img src="https://img3.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150753707.jpg" alt="" />
                <img src="https://img2.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150752211.jpg" alt="" />
                <img src="https://img2.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150923765.jpg" alt="" />
                <img src="https://img3.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150752222.jpg" alt="" />
                <img src="https://img1.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150752141.jpg" alt="" />
                <img src="https://img1.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150752597.jpg" alt="" />
<img src="https://img1.oldkids.cn/upload/2025/07/05/blog_260798238_20250705150752729.jpg" alt="" />
                <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 fill='none' stroke-width='5'>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97" 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>
                <div class="lrcShow" data-lrc="凌宵花"></div>
</div>
<script>
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 = () => {

const keyFrames = [
        [
                [
                        {offset: 0.0, opacity:0,transform:'scale(0.3)'},
                        {offset: 0.5, opacity:1,transform:'scale(1.05)'},
                        {offset: 0.7, opacity:1,transform:'scale(0.9)'},
                        {offset: 1.0, opacity:1,transform:'scale(1)'}
                ],
                [
                        {offset: 0.0, transform:'scale(1)'},
                        {offset: 0.25,transform:'scale(0.95)'},
                        {offset: 0.75,transform:'scale(1.1)'},
                        {offset: 1.0, opacity:0,transform:'scale(0.3)'}
                ]
        ],
        [
                [   
                        {offset:0, opacity:0, transform:'translateY(-30%)'},
                        {offset:1, opacity:1, transform:'translateY(0)'}
                ],
                [
                        {opacity:1, transform:'translateY(0)'},
                        {opacity:0, transform:'translateY(30%)'}
                ]
        ],
        [
                [
                        {offset:0, transformOrigin:'left bottom',transform:'rotate(-90deg)',opacity:0},
                        {offset:1, transformOrigin:'left bottom',transform:'rotate(0)', opacity:1}
                ],
                [
                        {offset:0, transformOrigin:'right bottom',transform:'rotate(0)', opacity:1},
                        {offset:1, transformOrigin:'right bottom',transform:'rotate(-90deg)', opacity:0}
                ]
        ],
        [
                [
                        {offset:0, transform:'perspective(400px) rotateX(90deg)',opacity:0 },
                        {offset:.4, transform:'perspective(400px) rotateX(-10deg)' },
                        {offset:.7, transform:'perspective(400px) rotateX(10deg)' },
                        {offset:1, transform:'perspective(400px) rotateX(0)', opacity:1 }
                ],
                [
                        {offset:0, transform:'perspective(400px) rotateX(0)', opacity:1},
                        {offset:1, transform:'perspective(400px) rotateX(90deg)', opacity:0}
                ]
        ],
        [
                [
                        {offset:0, transform:'translateY(1200px) scale(.7)',opacity:.7},
                        {offset:.8,transform:'translateY(0) scale(.7)', opacity:.7},
                        {offset:1, transform:'scale(1)', opacity:1}
                ],
                [
                        {offset:0, transform:'scale(1)',opacity:1},
                        {offset:.2,transform:'translateY(0) scale(.7)',opacity:.7},
                        {offset:1, transform:'translateY(700px) scale(.7)',opacity:.7}
                ]
        ],
        [        //        Roll in/out
                [
                        {offset:0, transform: 'translateX(-800px) rotate(-540deg)', opacity: 0 },
                        {offset:1, transform: 'translateX(0) rotate(0deg)', opacity: 1 }
                ],
                [
                        {offset:0, transform: 'translateX(0) rotate(0deg)', opacity: 1 },
                        {offset:1, transform: 'translateX(-1000px) rotate(-540deg)', opacity: 0 }
                ]
        ],
        [                       
                [        //        PuFF in/out
                        {offset:0, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 },
                        {offset:1, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 }
                ],
                       
                [
                        {offset:0, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 },
                        {offset:1, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 }
                ]
        ],
        [        //        scale-in/out-center
                [
                        {offset:0, transform: 'scale(0)', opacity: 1 },
                        {offset:1, transform: 'scale(1)', opacity: 1 }
                ],
                [
                        {offset:0, transform: 'scale(1)', opacity: 1 },
                        {offset:1, transform: 'scale(0)', opacity: 1 }
                ]
        ]
];
const EffectTiming =
[
        {
                duration: 2000,
                iterations: 1,
                delay: 0,
                fill: 'forwards'
        },
        {
                duration: 2000,
                iterations: 1,
                delay: 9000,
                fill: 'forwards'
        }
];

const lrctxt = `
歌手：半卷
凌霄藤蔓绕墙头
翠叶红花映日流
不畏高墙遮望眼
但凭傲骨展芳洲
风吹雨打浑无惧
月照星辉自有秋
莫道此花无傲骨
凌霄直上更风流
凌霄凌霄
勇敢向前
凌霄凌霄
不惧艰难
层层阶梯尽攀登
花开花落皆随风
红花翠叶映日流
凌霄花开最从容
歌词编辑：梦江南
不畏风雨不畏愁
高墙遮眼亦无忧
每棵凌霄皆傲骨
直上青天最风流
凌霄凌霄
勇敢向前
凌霄凌霄
不惧艰难
**********
凌霄凌霄
勇敢向前
凌霄凌霄
不惧艰难
嗨哈

`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://img2.oldkids.cn/upload/2025/07/05/blog_260798238_20250705113123624.mp3",
}

let lrcPlayer = new lrcPlayerY(opts);
let imgSet = document.querySelectorAll('#oBlk > img');
let aniObjs = ;


function chg_cur_pic() {
        let aniIdx = parseInt(Math.random() * keyFrames.length);
        let Idx = parseInt(Math.random() * imgSet.length);
       
        for(let i = 0; i < EffectTiming.length; i++)        {
                if(aniObjs)         aniObjs.cancel();
                //console.log(oBlk.offsetWidth,oBlk.offsetHeight);
                aniObjs = imgSet.animate(keyFrames, EffectTiming);
        }
    aniObjs.onfinish = chg_cur_pic;
}
chg_cur_pic();

        //        格式化时间数据
        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'),aniObjs.forEach(aObj => {if(aObj) aObj.pause()}))
                        : (mCtrl.style.setProperty('--rState','running'),aniObjs.forEach(aObj => {if(aObj) aObj.play()}));
        }
        //        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-7-5 16:02

非常漂亮的花朵摄影，点赞。

梦江南 发表于 2025-7-5 16:14

愤怒的葡萄 发表于 2025-7-5 16:02
非常漂亮的花朵摄影，点赞。

问好葡萄，谢谢沙发欣赏支持。祝夏安。

杨帆 发表于 2025-7-5 16:55

漂亮！谢谢江南精彩分享{:4_204:}

梦油 发表于 2025-7-5 17:03

我为优美的制作点个赞！{:4_199:}

梦江南 发表于 2025-7-5 17:18

杨帆 发表于 2025-7-5 16:55
漂亮！谢谢江南精彩分享

问好杨帆，谢谢欣赏支持，祝夏安。

梦江南 发表于 2025-7-5 17:19

梦油 发表于 2025-7-5 17:03
我为优美的制作点个赞！

问好梦油，谢谢欣赏支持，祝夏安！

老谟深虑 发表于 2025-7-5 17:50

            花拍的精彩，音画制作的美。点赞！

梦江南 发表于 2025-7-5 17:53

老谟深虑 发表于 2025-7-5 17:50
花拍的精彩，音画制作的美。点赞！

谢谢老谟老师欣赏支持，问好，祝夏安！

梦油 发表于 2025-7-5 20:21

梦江南 发表于 2025-7-5 17:19
问好梦油，谢谢欣赏支持，祝夏安！

你的制作很有新意。

红影 发表于 2025-7-5 21:13

漂亮的凌霄花的拍摄，还针对这花儿有歌曲呢。这样的歌曲配着这样的花儿真好。
欣赏江南好帖{:4_199:}

红影 发表于 2025-7-5 21:15

这样的图片轮播效果真好{:4_187:}

梦江南 发表于 2025-7-6 07:07

梦油 发表于 2025-7-5 20:21
你的制作很有新意。

早上好，这是对代码的温习。

梦江南 发表于 2025-7-6 07:10

红影 发表于 2025-7-5 21:13
漂亮的凌霄花的拍摄，还针对这花儿有歌曲呢。这样的歌曲配着这样的花儿真好。
欣赏江南好帖

早上问好，本来想用照片发在自行自摄版块的，后来想想还是做动画吧。就去找了这首歌。{:4_204:}

梦江南 发表于 2025-7-6 07:11

红影 发表于 2025-7-5 21:15
这样的图片轮播效果真好

谢谢影子欣赏支持。{:4_187:}

梦油 发表于 2025-7-6 11:08

梦江南 发表于 2025-7-6 07:07
早上好，这是对代码的温习。

我真羡慕你们。

梦江南 发表于 2025-7-6 11:15

梦油 发表于 2025-7-6 11:08
我真羡慕你们。

我也羡慕你满肚都是油诗啊！{:4_173:}

梦油 发表于 2025-7-6 11:18

梦江南 发表于 2025-7-6 11:15
我也羡慕你满肚都是油诗啊！

哈哈哈……各有所长。

梦江南 发表于 2025-7-6 11:44

梦油 发表于 2025-7-6 11:18
哈哈哈……各有所长。

{:5_108:}

红影 发表于 2025-7-6 12:54

梦江南 发表于 2025-7-6 07:10
早上问好，本来想用照片发在自行自摄版块的，后来想想还是做动画吧。就去找了这首歌。

嗯嗯，这样更好，在一个帖子里通过图片轮播，就看到所有摄影作品了呢{:4_187:}
页: [1] 2
查看完整版本: 凌宵花开，手机拍摄制作