老唱机

马黑黑 · 发表于 2023-4-4 12:43

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-4-4 12:43

参考代码

<style>
#wrap {
margin: 50px auto;
width: 240px;
height: 240px;
border: 1px solid gray;
cursor: pointer;
position: relative;
}
#wrap::before {
position: absolute;
content: '';
width: 200px;
height: 8px;
border-radius: 50% 0 0 50%;
background: linear-gradient(to right,tan,black);
right: 0;
transform-origin: 100% 50%;
transform: rotate(-5deg);
z-index: 10;
animation: var(--chg);
}
#pan {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
bottom: 0;
position: absolute;
animation: var(--rot);
}
#pan::before {
position: absolute;
content: '';
top: 50%; left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
@keyframes chgAngle {
from { transform: rotate(-16deg); }
to { transform: rotate(-32deg); }
}
@keyframes rotate { to { transform: rotate(4turn); } }
</style>
<div id="wrap" title="点击运行">
<div id="pan"></div>
</div>
<script>
wrap.onclick = () => {
pan.style.setProperty('--rot','');
wrap.style.setProperty('--chg','');
setTimeout( () => {
pan.style.setProperty('--rot','rotate 10s linear backwards');
wrap.style.setProperty('--chg','chgAngle 10s linear backwards');
},10);
}
</script>

复制代码

马黑黑 · 发表于 2023-4-4 12:50

代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了，就用 #wrap 选择器的 ::before 伪元素简单实现。

这里，以关键帧动画模拟老唱机的运行：碟子旋转，唱针跟着碟子的旋转不断地往里圈靠。实际应用到音画帖，则需要换一个实现机制——

唱针从 -16deg 旋转到 -32deg，其区间参与到 audio 的 duration 和 currentTime 的运算中，得出的值就是当前唱针应旋转的角度，这个通过监听 audio 的 timeupdate 事件驱动。可以参考圆形播放器插件里面的算法和做法。

马黑黑 · 发表于 2023-4-4 12:53

以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难，知道原理了就可以编写了吧。

亚伦影音工作室 · 发表于 2023-4-4 13:30

马黑黑发表于 2023-4-4 12:50
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了， ...

完美，等有时间参考老师的！

亚伦影音工作室 · 发表于 2023-4-4 15:43

本帖最后由亚伦影音工作室于 2023-4-4 16:13 编辑

马黑黑发表于 2023-4-4 12:53
以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难 ...

有个想法唱针通过歌曲音乐总时间段，来设置唱针动画从外向里移动的时间，不知道能行吗？

马黑黑 · 发表于 2023-4-4 17:46

本帖最后由马黑黑于 2023-4-4 17:48 编辑

亚伦影音工作室发表于 2023-4-4 15:43
有个想法唱针通过歌曲音乐总时间段，来设置唱针动画从外向里移动的时间，不知道能行吗？

当然可以。这里的设计只是展示一下原理。

如果audio的操作句柄是 aud ，唱针旋转的角度区间是 16 度，则，唱针应旋转的角度按如下计算：

aud.currentTime * 16 / aud.dutation

考虑到起点在 -16 度开始，所以算法调整为：

-16 - (aud.currentTime * 16 / aud.dutation || 0)

上式，|| 0 是为了避免出错（开始时可能读取不到audio的相关数值）。用于驱动指针旋转，语句为（假如指针的操作句柄是 zhen）：

let angle = -16 - (aud.currentTime * 16 / aud.dutation || 0);
zhen.style.transform = 'rotate(' + angle + 'deg)';

以上JS语句由

aud.addEventListener('timeupdate', () => {
//code here
});

驱动，就OK了。