论坛 › 动画音画 › 【黑师代码】自渡（学习黑师20240331《Rags to Rings》画布转动小播效果）

南无月 发表于 2024-3-31 21:07

【黑师代码】自渡（学习黑师20240331《Rags to Rings》画布转动小播效果）

<style>
#papa {
        margin: 130px 0 10px calc(50% - 931px);
        width: 1700px;
        height: 900px;
        background:
                url('https://pic.imgdb.cn/item/6609574f9f345e8d033365ef.webp') no-repeat center/cover;
        background-blend-mode: darken;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        overflow: hidden;
        z-index: 1;
}
#papa:hover {
        background-blend-mode: overlay;
}
#canv {
        display: block;
    position: absolute;
        right:230px;
        bottom:50px;
        transform: scale(0.65);
        cursor: pointer;
        opacity: .56;
}
#vid1 {
        position: absolute;
        width: 350px;
        height: 350px;
        opacity: .10;
        bottom:-20px;right:150px;
        object-fit: cover;
        border-radius: 50%;
        mix-blend-mode: screen;
        pointer-events: none;
        z-index: 12;
        opacity: .26;
}
#vid2 {
        position: absolute;
        width: 112%;
        height: 100%;
        opacity: .10;
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
        opacity: .32;
}
</style>

<div id="papa">
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/01/60/42/63906040e1a7f.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2414777/00/02/09/5b5050e458de0.mp4" autoplay loop muted></video>
        <canvas id="canv" width="200" height="200" style=""></canvas>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=3934523" autoplay loop></audio>
</div>

<script>
(function() {
        let rotDeg = 0, prgDeg = 0, raf;
        let ctx = canv.getContext('2d');
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';

        let gradient = ctx.createLinearGradient(0, 0, 200, 200);
        gradient.addColorStop(0, 'DarkKhaki');
        gradient.addColorStop(.5, 'orange');
        gradient.addColorStop(1, 'White');

        let img = new Image();
        img.onload = () => mkProg();
        img.src = 'https://638183.freep.cn/638183/web/svg/flower_1.svg';

        let mkProg = () => {
                ctx.clearRect(0, 0, 200, 200);
                ctx.clearRect(0, 0, 200, 200);
                //底轨圆
                ctx.strokeStyle = '        #FFA500';
                ctx.beginPath();
                ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
                ctx.stroke();
                //进度圆
                ctx.save();
                ctx.strokeStyle = gradient;
                ctx.beginPath();
                ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
                ctx.stroke();
                ctx.restore();
                //旋转图片
                ctx.save();
                ctx.translate(100, 100);
                ctx.rotate(rotDeg * Math.PI/180);
                ctx.translate(-100, -100);
                ctx.drawImage(img, 20, 20, 160, 160);
                ctx.restore();
                rotDeg = (rotDeg + 1) % 360;
                raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
        };


let mState = () => {
        aud.paused
                ? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause())
                : (papa.style.setProperty('--state','running'),vid1.play(),vid2.play());
        draw();
};

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
        aud.onpause = aud.onplaying = () => mkProg();
        aud.onseeking = () => raf = cancelAnimationFrame(raf);
        aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;

        canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br>

南无月 发表于 2024-3-31 21:08

@马黑黑 老师来瞧瞧，纯套用，无更改
近期没做图，用之前做的一个图，加了字。
不管标题还是音乐，主打一个随手捞到啥是啥。{:4_170:}

红影 发表于 2024-3-31 23:01

这场景很开阔啊，意境优美，色彩协调。给月儿点赞{:4_199:}

马黑黑 发表于 2024-3-31 23:22

南无月 发表于 2024-3-31 21:08
@马黑黑 老师来瞧瞧，纯套用，无更改
近期没做图，用之前做的一个图，加了字。
不管标题还是音乐，主打一 ...

其实这是极好的设计，实现方式也尽显得心应手的功夫。关于播放器的定位，我们有做任何提示，只用了 margin 简单定位，这里能从 position 入手去做，足以说明CSS定位方面的功夫到位了

南无月 发表于 2024-4-1 17:57

马黑黑 发表于 2024-3-31 23:22
其实这是极好的设计，实现方式也尽显得心应手的功夫。关于播放器的定位，我们有做任何提示，只用了 margi ...

记得老师说过这些都是PAPA家儿子。。
定位开始不听话就让它跟vid一样，定位抄过来就好了
就是你说得太形象，就记得牢。。{:4_170:}

南无月 发表于 2024-4-1 17:58

马黑黑 发表于 2024-3-31 23:22
其实这是极好的设计，实现方式也尽显得心应手的功夫。关于播放器的定位，我们有做任何提示，只用了 margi ...

第一句是图片处理的还比较协调对吧。。
那真是太好了{:4_173:}

南无月 发表于 2024-4-1 17:58

红影 发表于 2024-3-31 23:01
这场景很开阔啊，意境优美，色彩协调。给月儿点赞

{:4_187:}影子的回复总让人开心。。

马黑黑 发表于 2024-4-1 18:06

南无月 发表于 2024-4-1 17:58
第一句是图片处理的还比较协调对吧。。
那真是太好了

不好不行

马黑黑 发表于 2024-4-1 18:07

南无月 发表于 2024-4-1 17:57
记得老师说过这些都是PAPA家儿子。。
定位开始不听话就让它跟vid一样，定位抄过来就好了
就是你说得太 ...

{:4_189:}

南无月 发表于 2024-4-1 20:19

马黑黑 发表于 2024-4-1 18:06
不好不行

一般来说中国人民很行{:4_173:}

南无月 发表于 2024-4-1 20:21

马黑黑 发表于 2024-4-1 18:07


其实有那句 margin在的话，抄的定位也是不管用的。后来删了 margin后才起作用{:4_173:}

马黑黑 发表于 2024-4-1 21:27

南无月 发表于 2024-4-1 20:21
其实有那句 margin在的话，抄的定位也是不管用的。后来删了 margin后才起作用

margin针对块状元素

马黑黑 发表于 2024-4-1 21:27

南无月 发表于 2024-4-1 20:19
一般来说中国人民很行

{:4_181:}

红影 发表于 2024-4-1 21:43

南无月 发表于 2024-4-1 17:58
影子的回复总让人开心。。

月儿对整体布局的把控十分到位{:4_199:}

小辣椒 发表于 2024-4-1 22:26

月月的图图越来越漂亮了，打开帖子看惊艳了，大气的背景，美女也是配的有立体感，非常赞的图意{:4_199:}

小辣椒 发表于 2024-4-1 22:27

好制作让人流连忘返。。。。月儿好棒的{:4_178:}

南无月 发表于 2024-4-1 22:30

马黑黑 发表于 2024-4-1 21:27
margin针对块状元素

好吧，挺霸道的。有它在，别的定位就不行了。{:4_170:}

南无月 发表于 2024-4-1 22:31

马黑黑 发表于 2024-4-1 21:27


反正我挺骄傲的呗。{:4_170:}

南无月 发表于 2024-4-1 22:31

红影 发表于 2024-4-1 21:43
月儿对整体布局的把控十分到位

{:4_199:}影子太会夸了，开心。。。

南无月 发表于 2024-4-1 22:32

小辣椒 发表于 2024-4-1 22:26
月月的图图越来越漂亮了，打开帖子看惊艳了，大气的背景，美女也是配的有立体感，非常赞的图意

{:4_199:}哈哈，制图依然都在学习中，你的贴子更漂亮

查看完整版本: 【黑师代码】自渡（学习黑师20240331《Rags to Rings》画布转动小播效果）