未知频率

马黑黑 发表于 2024-5-20 12:13

本帖最后由马黑黑于 2024-5-20 17:44 编辑 <br /><br /><style>
#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; z-index: 1; display: grid; place-items: center; }
#papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t23/3/wvpl.jpeg') no-repeat center/cover; transition: 2s; }
#papa:hover::before { transform: scale(1.5);}
#canv, #player, #vid { position: absolute; }
#vid { bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .9; mix-blend-mode: lighten; }
#player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2141274880" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03b48b1c3.mp4" autoplay loop muted></video>
<canvas id="canv" width="400" height="260"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/windmill.png" alt="" title="播放/暂停" />
</div>

<script>

var ctx = canv.getContext('2d');
ctx.globalAlpha = .6;
var ww = canv.width, hh = canv.height;
var total = 16, step = 0.2, balls = [], raf = null;

class Ball {
constructor(data) {
this.ctx = ctx;
this.data = data;
};
draw() {
ctx.fillStyle = this.data.color;
ctx.beginPath();
ctx.arc(this.data.x, this.data.y, this.data.r, 0, Math.PI * 2);
ctx.fill();
};
};

var setData = (angle) => {
var cx = ww / 2, cy = hh / 2, r1 = ww / 2 - 25, r2 = hh / 2 - 25;
var x = cx + r1 * Math.cos(Math.PI / 180 * angle),
y = cy + r2 * Math.sin(Math.PI / 180 * angle);
var r = 5 + y / 25;
return { x: x, y: y, r: r };
};

var mkBalls = () => {
for(var i = 0; i < total; i ++) {
var a = i * 360 / total;
var d = Object.assign(setData(a), {angle: a, color: `#${Math.random().toString(16).substring(2,8)}`});
var ball = new Ball(d);
ball.draw();
balls.push(ball);
}
};

var render = () => {
ctx.clearRect(0, 0, ww, hh);
balls.forEach(b => {
b.data.angle = (b.data.angle + step) % 360;
b.data = Object.assign(b.data, setData(b.data.angle));
b.draw();
});
raf = requestAnimationFrame(render);
};

var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};

aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);

player.onclick = () => aud.paused ? aud.play() : aud.pause();

mkBalls();

</script>

马黑黑 发表于 2024-5-20 12:20

本帖最后由马黑黑于 2024-5-20 12:50 编辑

环形旋转的粒子是本帖推出的重点，其思路是：

为了模拟3d，以 y 坐标作为依据令粒子小球的半径有所不同，y值越小小球的半径越小，反之越大，最小半径5，最大半径不会突破20（算法在第42行代码）。这实际上是模拟出了Z轴上的观察效果，当然是很粗糙的。

马黑黑 发表于 2024-5-20 12:14

本帖最后由马黑黑于 2024-5-20 17:46 编辑

帖子代码<style>
#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; z-index: 1; display: grid; place-items: center; }
#papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t23/3/wvpl.jpeg') no-repeat center/cover; transition: 2s; }
#papa:hover::before { transform: scale(1.5);}
#canv, #player, #vid { position: absolute; }
#vid { bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .9; mix-blend-mode: lighten; }
#player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2141274880" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03b48b1c3.mp4" autoplay loop muted></video>
<canvas id="canv" width="400" height="260"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/windmill.png" alt="" title="播放/暂停" />
</div>

<script>

var ctx = canv.getContext('2d');
ctx.globalAlpha = .6;
var ww = canv.width, hh = canv.height;
var total = 16, step = 0.2, balls = [], raf = null;

class Ball {
constructor(data) {
this.ctx = ctx;
this.data = data;
};
draw() {
ctx.fillStyle = this.data.color;
ctx.beginPath();
ctx.arc(this.data.x, this.data.y, this.data.r, 0, Math.PI * 2);
ctx.fill();
};
};

var setData = (angle) => {
var cx = ww / 2, cy = hh / 2, r1 = ww / 2 - 25, r2 = hh / 2 - 25;
var x = cx + r1 * Math.cos(Math.PI / 180 * angle),
y = cy + r2 * Math.sin(Math.PI / 180 * angle);
var r = 5 + y / 25;
return { x: x, y: y, r: r };
};

var mkBalls = () => {
for(var i = 0; i < total; i ++) {
var a = i * 360 / total;
var d = Object.assign(setData(a), {angle: a, color: `#${Math.random().toString(16).substring(2,8)}`});
var ball = new Ball(d);
ball.draw();
balls.push(ball);
}
};

var render = () => {
ctx.clearRect(0, 0, ww, hh);
balls.forEach(b => {
b.data.angle = (b.data.angle + step) % 360;
b.data = Object.assign(b.data, setData(b.data.angle));
b.draw();
});
raf = requestAnimationFrame(render);
};

var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};

aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);

player.onclick = () => aud.paused ? aud.play() : aud.pause();

mkBalls();

</script>

朵拉发表于 2024-5-20 12:17

好漂亮的效果，有空学习下{:4_178:}

南无月 发表于 2024-5-20 12:54

这个贴子如梦似幻，色彩太漂亮了。乍一看跟昨天的钟摆结构有点相似。。细看完全不同。。{:4_199:}

南无月 发表于 2024-5-20 12:55

背景这样移进推出，那条竖线还在正中，这个设计是巧妙，转动的小球空间感和层次感很强，像是绕着那条线在转动，整体效果完美。。

梦江南 发表于 2024-5-20 13:57

独特的音画设计，加上这种节凑音效，棒极了！

红影发表于 2024-5-20 17:27

这样模拟立体感，厉害。这思路非常独特，利用y值的变化，设计球球半径，正好走到下方的y最大，上方的最小，倒真的像离得远的就小的道理一样呢{:4_199:}

红影发表于 2024-5-20 17:27

播放器的转速和小球的一样，这个也需要设计的呢{:4_187:}

红影发表于 2024-5-20 17:32

伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

马黑黑 发表于 2024-5-20 17:43

红影发表于 2024-5-20 17:32
伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

忘了删除了

马黑黑 发表于 2024-5-20 17:47

朵拉发表于 2024-5-20 12:17
好漂亮的效果，有空学习下

{:4_190:}

马黑黑 发表于 2024-5-20 17:47

红影发表于 2024-5-20 17:32
伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

这是暗语，忘记了删除啦{:4_170:}

马黑黑 发表于 2024-5-20 17:48

红影发表于 2024-5-20 17:27
播放器的转速和小球的一样，这个也需要设计的呢

这个末流设计师喝醉了酒才可以弄得出来{:4_170:}

马黑黑 发表于 2024-5-20 17:49

红影发表于 2024-5-20 17:27
这样模拟立体感，厉害。这思路非常独特，利用y值的变化，设计球球半径，正好走到下方的y最大，上方的最小， ...

如果做Z轴，其实也是利用这个原理的

马黑黑 发表于 2024-5-20 17:49

梦江南发表于 2024-5-20 13:57
独特的音画设计，加上这种节凑音效，棒极了！

下午好

马黑黑 发表于 2024-5-20 17:52

南无月发表于 2024-5-20 12:55
背景这样移进推出，那条竖线还在正中，这个设计是巧妙，转动的小球空间感和层次感很强，像是绕着那条线在转 ...

图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句一约束子元素的位置：

display: grid;
place-items: center;

如果子元素不设置 left、top 或 translate(x,y) 之类的定位属性，则它们一直会保持绝对居中，不论大小、不论变大变小。

马黑黑 发表于 2024-5-20 17:53

南无月发表于 2024-5-20 12:54
这个贴子如梦似幻，色彩太漂亮了。乍一看跟昨天的钟摆结构有点相似。。细看完全不同。。

外观有点巧合而已，两者不相干

南无月 发表于 2024-5-20 18:08

马黑黑发表于 2024-5-20 17:52
图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句 ...

{:4_170:}
我今天加字的时候用常规方法完全不能控制带字的那个画布的位置，调得快晕了才有点像在轨道上。。

南无月 发表于 2024-5-20 18:08

马黑黑发表于 2024-5-20 17:52
图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句 ...

敲三下记住了，好记性不如烂笔头，我记个笔记去。{:4_173:}

页: [1] 2 3

花潮论坛's Archiver

未知频率