追你（创意分享）

马黑黑 · 发表于 2022-7-9 19:22

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

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

x

本帖最后由马黑黑于 2022-7-9 19:23 编辑

马黑黑 · 发表于 2022-7-9 19:22

代码：

<style>
#papa { margin: 50px auto 0; width: 720px; height: 600px; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 90px; height: 66px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 60px; height: 60px; background: #333 linear-gradient(120deg,purple,tan); border-radius: 50%; }
</style>
<div id="papa">
<img id="hunter" alt="" src="/data/attachment/forum/202207/08/225900jzc7ctq9wa99r83a.gif" />
<span id="prey"></span>
</div>
<script>
let aniFlag = 1;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
function gogo() {
let left = num(0,960), top = num(0,500);
prey.style.left = left + 'px';
prey.style.top = top + 'px';
hunter.style.left = left + 'px';
hunter.style.top = top + 'px';
aniFlag == 1 ? (prey.style.opacity = '1', aniFlag = 0) : (prey.style.opacity = '0', aniFlag = 1);
setTimeout(gogo,6000);
}
</script>

复制代码

马黑黑 · 发表于 2022-7-9 19:23

本帖最后由马黑黑于 2022-7-9 19:42 编辑

先说一下创意：
这是猎手追猎物的构思，也可以是男追女或女追男，看怎么理解。

飞碟是 hunter，球球是 prey，各自使用了对应的 id。

prey 为了自保还是矜持等啥啥的吧，通过变量 aniFlag 的值（0或1）来隐藏或显示自己，transition 不设定，瞬间出现或消失；每一次的出现或消失，都随机定位（left和top随机变化），这个变化值的头尾设定有 num(0,600) 决定，0到600之间（含头尾），具体的区间应根据帖子父元素的尺寸来定，600这个大数分别由父元素的宽、高减去 hunter 和 prey 中尺寸最大的那个的宽、高。

prey的出现，不论隐身与否，hunter都有感知，都能在第二时间追上并作停留，直至 prey 去了下一个地方。

再说说JS（看注释）：

<script>
let aniFlag = 1; // prey动画运行标识 0 - 隐藏，1 - 现身
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //取随机整数（函数）

setTimeout(gogo,100); //第一次启动动画

// 动画函数：追
function gogo() {
let left = num(0,600), top = num(0,500); // 分别取left和top值，600和500依据是，父元素宽、高减去hunter和prey最大宽、高者
prey.style.left = left + 'px'; //猎物定位 left
prey.style.top = top + 'px'; //猎物定位 top
hunter.style.left = left + 'px'; /猎手定位 left
hunter.style.top = top + 'px'; /猎手定位 top
//根据 aniFlag 标识设定猎物是否现身
aniFlag == 1 ? (prey.style.opacity = '1', aniFlag = 0) : (prey.style.opacity = '0', aniFlag = 1);
setTimeout(gogo,6000); // 定时器递归调用本函数
}
</script>

需要理解的是，函数中定时器的时长与CSS中 hunter 的 transition 的时间存在关系，函数定时器的时长要大于CSS中 hunter 的 transition 时长。此外，hunter 和 prey 间，如果 prey 也设置 transition，则它的时长要小于 hunter 的。