追随

马黑黑 · 发表于 2022-7-10 07:19

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

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

x

LRC LOADING ...

马黑黑 · 发表于 2022-7-10 07:35

代码分享：

<style>
#papa { left: -352px; width: 1300px; height: 758px; background: blue url('/data/attachment/forum/202207/09/234557wxn4kww7edc37aac.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 122px; height: 147px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 240px; height: 240px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 60px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>
<div id="papa">
<input id="btnplay" type="button" value=">" />
<div id="lrcbox">LRC LOADING ...</div>
<img id="hunter" alt="" src="/data/attachment/forum/202207/10/071610mpel9l0n9nzdg4z5.gif" />
<img id="prey" src="/data/attachment/forum/202207/09/234428pscd33mrersth4gx.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1404387331.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let lrcAr = [
['0.00','曲名 : 红尘客（伴奏）'],
['5.00','歌手 : 夸父'],
['10.00','帖名 : 追随 - 致朵拉'],
['160.00','感谢欣赏祝你好运']
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr[j][0]) lrcbox.innerHTML = lrcAr[j][1];
}
});
function gogo() {
let left = num(50,1050), top = num(420,518);
prey.style.left = left + 'px';
prey.style.top = top + 'px';
hunter.style.left = left + 45 + 'px';
hunter.style.top = top - 100 + 'px';
setTimeout(gogo,6000);
}
</script>

复制代码

马黑黑 · 发表于 2022-7-10 07:49

本帖最后由马黑黑于 2022-7-10 07:53 编辑

本帖采用最核心的歌词同步模块+gogo自创动画函数制作，代码极为简短。

一、关于核心歌词同步播放器

此核心代码附带在最新版本（6.24）的花潮LRC在线。仅一个圆形按钮控制音乐，按钮、歌词可分离，歌词支持单行、三行显示。本帖所用的核心歌词同步基于单行，JS部分代码如下：

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate',function(){
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
            if(tt >= lrcAr[j][0]) lrcbox.innerHTML = lrcAr[j][1];
      }
});

二、关于 gogo 函数

gogo() 函数是这两天的创意，脱胎于此前的飞碟勘探创意。gogo()函数需要两个运动元素，一个追，一个被追，追者其实是与被追者的随机腾挪同步移动，不同的是，被追者瞬间改变位置，追者的跟随设计了一个过程。JS部分代码如下：

setTimeout(gogo,100); //运行函数（启动追随机制）

//追随动画函数
function gogo() {
      let left = num(50,1050), top = num(420,518); //设计随机移动位置
      prey.style.left = left + 'px'; // 被追者腾挪的left值
      prey.style.top = top + 'px';// 被追者腾挪的top值
      hunter.style.left = left + 45 + 'px'; // 追者跟随的left值
      hunter.style.top = top - 100 + 'px'; // 追者跟随的left值
      setTimeout(gogo,6000); // 定时器递归调用此函数（从而永动）
}

马黑黑 · 发表于 2022-7-10 08:54

移动对象的朝向值得思考。最好使用万能的朝向，这样节省繁琐的朝向处理。因为——

JS可以通过临时设置CSS的相关样式（如rotate）来调整移动对象的朝向，所涉及到的计算基于对象向左、向右、向前、向后等移动方向，然后设置合适的rotate角度，这将非常繁琐。

——所以，尽量使用合适朝向的GIF动图。