现在,如果您在屏幕上有两个或三个元素,您想要以某种随机的方式进行动画处理(类似于我的操作),则可以很容易地编辑此oilerPlate代码来进行动画处理。 x和y轴都有一个transform:translate选项。 我已将每个元素设置为vh或vw设置。 基本上,这意味着它们将在视口中动画到该点,然后再返回另一个方向,就像老式的屏幕保护程序一样,它们的球会在屏幕周围反弹。 每个动画还有一个时间,以秒为单位。 因此,由于此元素设置为大约50s和80vw,这意味着它将在50秒内为大约80%的视口设置动画。 如果创建第二个元素,则可以将其调整为90vw和20s,尽管它非常相似,但由于它们以不同的速度移动并且走的路径略有不同,因此彼此之间的动画看起来会完全不同。 请记住,这是我第一次这样做,所以我仍然很熟悉这一切。 从这个起点开始,您可以添加几个元素,只需调整平移和动画时间,即可获得多个动画路径。

座标

自然地,既然我的元素在屏幕上动画了,我的下一个目标就是跟踪它们的坐标。 我想将这些坐标用作svg多边形元素的点。 在绊倒jquery中的这个绝对GOLD函数之前,我发现了几种在JavaScript中执行此操作的方法。
getBoundingClientRect();
使用此功能不仅可以获取屏幕上任何元素的x和y坐标,还可以获取任何元素的顶部和左侧以及高度和宽度。 超级好用! 所以我想做的是追踪我的七个要素。 可能有更好的方法来执行此操作,但我认为,由于它们不断运动,因此我想每隔几毫秒检查一次新坐标。 我发现,如果将setinterval函数设置为50毫秒,那会显得有些断断续续……以及任何高于50毫秒的东西。 小于5的任何东西都太过激烈了。 对我来说,大约20毫秒似乎是个神奇的数字。 因此,我首先创建了一个setinterval函数,并在其中使用getBoundingClientRect();。 每个元素的函数,它将每隔20毫秒为我提供每个元素的坐标。 看起来是这样的:
setInterval(function(){
let element1 = site1.getBoundingClientRect();
let element2 = site2.getBoundingClientRect();
let element3 = site3.getBoundingClientRect();
let element4 = site4.getBoundingClientRect();
let element5 = site5.getBoundingClientRect();
let element6 = site6.getBoundingClientRect();
let element7 = site7.getBoundingClientRect();
现在,我可以控制台记录每个元素,以确保获取坐标。 下一部分看起来会有些疯狂,但请与我联系。 因此,我动态创建了一个svg元素,每个多边形都位于内部,然后使用反引号获取元素坐标,并将其用作每个多边形的点。 通常情况如下:
points=”${ element1.x,element1.y element2.x,element2.y......
依此类推。 但是因为我想要多边形中的一些随机性,所以我将其切换为不完全匹配每个坐标对的坐标。 我可能会使用element1.x和element7.y作为坐标对,而不是element1.x和element1.y。 无论如何,这是我所使用的:
let polygon1 = `
`
从中可以看出,对于某些坐标对,我还使用了y + 15,y + 10和y + 20以及x + 5。 这是因为我不希望每个多边形都精确对齐。 使每个坐标分别偏离10、15或20,这给我带来了更多的随机性,这就是我想要的。 您还将注意到,我添加了另一个模板表达式以内联样式定义笔触。 如果返回该站点,您会注意到每个多边形的笔触的厚度不断变化。 这是因为我将笔划定义为每个元素x坐标的百分比。 这是我定义要用于多边形内联样式的方式:
let stroke1 = element2.x / 75;
let stroke2 = element4.x / 75;
let stroke3 = element7.x / 75;
let stroke4 = element3.x / 75;