魂引

马黑黑 · 发表于 2024-6-28 18:16

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

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

x

马黑黑 · 发表于 2024-6-28 18:17

代码：

<style>

#mydiv { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 640px; background: #eee url('https://638183.freep.cn/638183/t24/webp/hyyb.webp') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}

.ball { position: absolute; width: 40px; height: 40px; background: linear-gradient(plum, teal); border-radius: 50%; opacity: .95; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M40 20 Q512 1080,984 20'); offset-distance: 0; animation: 6s linear forwards;}

.ball:hover { width: 45px; height: 45px; opacity: .75; }

.ball:nth-of-type(1) { left: -20px; top: 0; animation-name: move1-1;}

.ball:nth-of-type(2) { left: 20px; top: 0; background: linear-gradient(tan, cyan); offset-distance: 50%;}

#vid { position: absolute; width: 80%; height: 50%; transform: scale(-1,1) rotate(30deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }

@keyframes move1-1 {

from { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }

to { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }

}

@keyframes move1-2 {

from { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }

to { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }

}

@keyframes move2-1 {

from { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0deg); }

to { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }

}

@keyframes move2-2 {

from { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }

to { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0); }

}

</style>

</div>

//小球数组

const balls = [b1, b2];

//小球1动画结束

b1.onanimationend = () => {

let ani = window.getComputedStyle(b1).getPropertyValue('animation-name');

if(ani === 'move1-1') {

b1.style.animationName = '';

b2.style.animationName = 'move2-1';

}else{

b1.style.animationName = 'move1-1';

}

};

//小球2动画结束

b2.onanimationend = () => {

let ani = window.getComputedStyle(b2).getPropertyValue('animation-name');

if(ani === 'move2-1') {

b2.style.animationName = 'move2-2';

}else{

b2.style.animationName = '';

b1.style.animationName = 'move1-2';

}

};

//联动控制函数

var mState = () => {

balls.forEach(b => {

b.style.animationPlayState = aud.paused ? 'paused' : 'running';

b.title = ['暂停','播放'][+aud.paused];

});

aud.paused ? vid.pause() : vid.play();

};

//音频控件监听事件

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

//小球点击事件

balls.forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());

//加载全屏插件

var sF = document.createElement('script');

sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';

sF.charset = 'utf-8';

document.querySelector('body').appendChild(sF);

sF.onload = () => FS({

papa: '#mydiv',

css: 'bottom: 10px; left: 50%; transform: translate(-50%); --color: snow; --fsBg: transparent;',

});

//动画响应窗体变化

window.onresize = () => balls.forEach(b => {

b.style.offsetPath = `path('M40 20 Q${mydiv.offsetWidth / 2} ${mydiv.offsetHeight * 2 - 200}, ${mydiv.offsetWidth - 40} 20')`;

b.style.animationDuration = ((mydiv.offsetWidth + mydiv.offsetHeight) / (1024 + 640)) * 6 + 's';

});

</script>

马黑黑 · 发表于 2024-6-28 18:17

本帖最后由马黑黑于 2024-6-28 19:28 编辑

本帖：
（一）利用元素 animationend 事件实现对小播CSS关键帧动画进行管理，得出一静一动的动画效果。原理请查阅：

CSS关键帧动画之圆周运动演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

不同的是，这里的动画使用相抵路径（offset-path）实现，通过 @keyframes 创建四个不同方向的运行路线（都在路径上，两两衔接）。元素在路径上的运行距离以 offset-distance 表示，支持百分比，路径变长变短均能适应。

动画除了路径动画，还有旋转与色相变化，均在每一个 @keyframes 属性中一并设定。

（二）关于小球：JS代码中，需要一个数组管理小球。该数组会在联动控制函数和小球的点击事件中用上。

（三）关于相抵路径、动画运行周期时长适应全屏或窗体其他尺寸动态变化

由于相抵路径的 path 的数据是像素单位，视口尺寸变化时只能动态调整。window.onresize 事件中，以比例方法对二次贝塞尔曲线的终点和控制点进行测算，终点X坐标 = mydiv.offsetWidth - 40，40是小球的尺寸要减去；控制点X坐标 = mydiv.offsetWidth / 2；Y坐标 = mydiv.offsetHeight * 2 - 200，参照了原始相抵路径的设计；animation-duration 即运行周期时长的计算复杂一些：

((mydiv.offsetWidth + mydiv.offsetHeight) / (1024 + 640)) * 6

这是采用比例方法设计的算式：（（宽+高）÷（原始宽 +原始高））× 6，6 是原生动画在 1024*640尺寸下的运行周期时长。这是大致的测算，科学的方法是重新计算曲线长度，这太复杂，做个简单的帖子用不着这么认真。