追随 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

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

追随

马黑黑 发表于 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) lrcbox.innerHTML = lrcAr;
}
});

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) lrcbox.innerHTML = lrcAr;
   }
});

二、关于 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动图。

红影发表于 2022-7-10 09:07

这个有趣，前面那个小球还会隐身，这个不隐身了啊{:4_173:}

红影发表于 2022-7-10 09:08

能用这么简洁的代码，实现追随的动画，黑黑好棒{:4_199:}

马黑黑 发表于 2022-7-10 09:26

红影发表于 2022-7-10 09:08
能用这么简洁的代码，实现追随的动画，黑黑好棒

原理在那，做了就能好

马黑黑 发表于 2022-7-10 09:26

红影发表于 2022-7-10 09:07
这个有趣，前面那个小球还会隐身，这个不隐身了啊

舞台表演无需隐身

绿叶清舟 发表于 2022-7-10 10:05

这么快成品来了

绿叶清舟 发表于 2022-7-10 10:05

这么快成品来了

大猫咪 发表于 2022-7-10 10:13

哈这个好玩，{:4_189:} 空了学习，辛苦老黑 {:4_191:}周末快乐！

{:4_204:}{:4_199:}

马黑黑 发表于 2022-7-10 10:38

大猫咪发表于 2022-7-10 10:13
哈这个好玩，空了学习，辛苦老黑周末快乐！

喝水{:4_190:}

马黑黑 发表于 2022-7-10 10:38

绿叶清舟发表于 2022-7-10 10:05
这么快成品来了

简单的

马黑黑 发表于 2022-7-10 10:39

绿叶清舟发表于 2022-7-10 10:05
这么快成品来了

不复杂的

小辣椒 发表于 2022-7-10 10:51

又一个这个效果好玩，黑黑真的脑子里面装满了智慧，小辣椒脑子里面都是浆糊。。。。{:4_178:}

小辣椒 发表于 2022-7-10 10:52

这个就动图还特别的可爱，这个要学习做一次

马黑黑 发表于 2022-7-10 11:04

小辣椒发表于 2022-7-10 10:52
这个就动图还特别的可爱，这个要学习做一次

这个，说实在，很简单，也容易理解。建议这个不仅仅是套用，要尽可能吃透每一句代码

马黑黑 发表于 2022-7-10 11:05

小辣椒发表于 2022-7-10 10:51
又一个这个效果好玩，黑黑真的脑子里面装满了智慧，小辣椒脑子里面都是浆糊。。。。

怎么可以这么说话{:4_170:}

小辣椒 发表于 2022-7-10 11:05

马黑黑发表于 2022-7-10 11:04
这个，说实在，很简单，也容易理解。建议这个不仅仅是套用，要尽可能吃透每一句代码

按黑黑的要求得动脑子了{:4_173:}

马黑黑 发表于 2022-7-10 11:06

小辣椒发表于 2022-7-10 11:05
按黑黑的要求得动脑子了

反正不复杂，理解一下，对精进有巨大作用

页: [1] 2 3

花潮论坛's Archiver

追随