蔡依林·心型圈

马黑黑 · 发表于 2024-11-25 12:40

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

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

x

本帖最后由马黑黑于 2024-11-25 12:43 编辑

HCPlayer

马黑黑 · 发表于 2024-11-25 12:42

本帖最后由马黑黑于 2024-11-25 12:45 编辑

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
	#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: black url('https://638183.freep.cn/638183/t24/webp2/cyl.webp') no-repeat center/ cover; }
	#player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
	#player:hover { opacity: .6; }
	#prog { bottom: 20px; width: 280px; --bg1: white; --bg2: lightblue; --color: white; }
	#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
	#lrc { top: 30px; color: lightblue; --bg: linear-gradient(rgba(0,250,250,.05),rgba(0,250,250,.75)); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	svg { position: absolute; }
	#fsbtn { position: absolute; bottom: 20px; right: 30%; color: lightblue; padding: 2px 6px; border: 2px solid lightblue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; z-index: 9; }
	use { transform-box: fill-box; transform-origin: center; animation: move var(--dur) var(--delay) linear infinite var(--state); }
	@keyframes move { to { transform: rotate(var(--deg)) translate(var(--xx)); } }
	@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=209722"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/02/45/46/video6362bada8cb97.mp4" autoplay loop muted></video>
	<span id="fsbtn" class="fsbtn"></span>
	<svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"></svg>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = Dr.dr('msvg');
dr.symbol('sy1', '-200 -200 400 400');
dr.path('M0 -100 C350 -300,100 0,0 180 C-100 0,-350 -300,0 -100', 'fuchsia').addTo('sy1');
var all = 20;
Array.from({length: all}).forEach(() => {
	var size= Math.random() * 30 + 20;
	dr.use('sy1', -100, 100, size, size).style(`filter: hue-rotate(${360 * Math.random()}deg); --delay: ${Math.random() * -12}s; --dur: ${Math.random() * 8 + 10}s; --deg: ${100 - Math.random() * 120}deg;`);
});
dr.use('#sy1', 550, 580, 100, 100).id('player');

var lrcAr = [
	[2.5,"蔡依林·心型圈",2.1],
	[10.01,"作词 : 方文山",2.7],
	[13.2,"作曲 : 詹宇豪",2],
	[15.2,"编曲 : 钟兴民",2],
	[18.6,"我送上初恋 在你的面前",3.9],
	[22.86,"再将我爱你 温习一遍",3.9],
	[27.24,"我无法收敛 对你的思念",4.1],
	[31.62,"若爱有风险 我宁愿中箭",4.1],
	[36.09,"那一年春天 爱发芽蔓延",3.8],
	[40.3,"我们故事 颜色鲜艳",3.6],
	[44.62,"我将爱完全 花在你身边",4.0],
	[49.03,"对爱纠缠很明显",2.9],
	[51.89,"想腻在你的房间",2.2],
	[54.54,"触电的瞬间 同一边",2.6],
	[57.21,"肩并着肩 黏你 脸靠着脸",3.9],
	[61.24,"看着照片 许愿",2.0],
	[63.23,"傻笑了好几遍 画十字在胸前",3.0],
	[66.49,"闭眼祈祷梦会实现",3.4],
	[70.62,"呵气在玻璃上面",1.8],
	[73.31,"画心型的圈 雾渐渐不见",3.6],
	[77.32,"你终于出现 听不进劝",3.9],
	[81.4,"对爱死心眼",1.8],
	[83.78,"希望这趟爱情走很远",4.4],
	[88.3,"我用我指尖 画心型的圈",3.9],
	[92.66,"然后碎碎念 想象你听见",4.0],
	[97.02,"空出时间 默背你的脸",3.6],
	[101.5,"认真翻字典查我们的",3.9],
	[106.22,"永远",2.9],
	[143.17,"我送上初恋 在你的面前",3.9],
	[147.49,"再将我爱你 温习一遍",3.8],
	[151.79,"我无法收敛 对你的思念",4.1],
	[156.15,"若爱有风险 我宁愿中箭",4.1],
	[160.62,"那一年春天 爱发芽蔓延",3.9],
	[164.87,"我们故事 颜色鲜艳",3.9],
	[169.25,"我将爱完全 花在你身边",4.0],
	[173.64,"对爱纠缠很明显",2.7],
	[176.29,"想腻在你的房间",2.9],
	[179.2,"触电的瞬间 同一边",2.4],
	[181.62,"肩并着肩 黏你 脸靠着脸",4.0],
	[185.88,"看着照片 许愿傻笑了好几遍 画十字在胸前",5.1],
	[191.07,"闭眼祈祷梦会实现",3.8],
	[194.9,"呵气在玻璃上面",2.2],
	[197.58,"画心型的圈 雾渐渐不见",3.9],
	[201.96,"你终于出现 听不进劝",3.8],
	[205.92,"对爱死心眼",2.0],
	[208.5,"希望这趟爱情走很远",4.3],
	[212.91,"我用我指尖 画心型的圈",3.9],
	[217.22,"然后碎碎念 想象你听见",4.0],
	[221.64,"空出时间 默背你的脸",3.8],
	[225.99,"认真翻字典查我们的",4.4],
	[231.61,"永远",3.0]
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
var resizeObserver = new ResizeObserver(() => {
	msvg.style.setProperty('--xx', mama.clientWidth + 100 + 'px');
	dr.sets({x: mama.clientWidth / 2 - 50, y: mama.clientHeight - 140});
});
resizeObserver.observe(mama);
</script>

马黑黑 · 发表于 2024-11-25 13:09

关于svg动画：

心形小图案自左上小部分向右上、大部分向右下做非直线运动。实现方法是综合性的——

（一）CSS动画 @keyframes move 选择器中设计运动为先旋转（rotate）一定角度再往右平移（translate），这会令元素做弧线运动，代码在第 13 行；

（二）svg内部子元素的运动缺省默认以svg画布左上角（0，0）为原点，要让子元素以自身中心为运动原点，需要在CSS中设置相关属性，transform-box、transform-origin，代码在第 12 行，对实例化标签 use 所做的设置（心形图标都是use标签呈现出来的）；

（三）运动需要错落有致，心型图案不同同步，否则没有美感，这需要几方配合：一是 animation 属性设计了几个CSS变量（代码第 12 行）、动画 move 也同样设计有CSS变量（代码第 13 行），然后在JS中每一个实例化心型图标使用 style 方式给出这些变量具体的随机值（代码第 37 行）；

（四）播放控制器也是实例化 symbol 模板的产品，它略大一些，运行一个闪烁动画，就不跟其他心型图标乱跑了，它得专注，坚守工位，不过它也有一定的自由度，试试切换全屏/正常显示模式看看……这是 transition 属性的效果。

另外，全屏对 transform 的 translate 考验人，因为 translate 接受的平移距离得使用实体单位（px），因此需要放置一个元素尺寸观察器 resizeObserver，它在观察元素尺寸变化时，任何被观察对象的尺寸改动都会同步修改 translate 所需的平移距离，同时设置播放控制器的位置，观察的对象是帖子容器 mama，代码在98 - 102 行。

还有，第 100 行，svgdr 修改的是播放控制器的 x、y 属性。注意，dr.sets({...}) 的上文在第 39 行，这是 dr 最后一次静态作画，第 100 行是基于它所返回的最后一个元素对象。