本文介绍了一种使用Web Animation API在网页中创建随机游走动画的方法。通过JavaScript，我们可以限制元素在特定容器内的随机移动，并通过计算速度来平滑过渡。文章还详细解释了如何生成新的随机位置、计算运动速度以及实际移动元素的函数。
随机游走和随机重启游走
I’m currently writing a demo that will use a small repeated random animation for some elements; before getting to that, I though it might be helpful to look at ways in which that kind of random movement might be achieved, particularly with breaking web technologies.
我目前正在编写一个演示，该演示将对某些元素使用小的重复随机动画。 在开始讨论之前，我想研究一下实现这种随机运动的方式可能会有所帮助，尤其是在打破网络技术的情况下。
For this example, I’m using the Web Animation API, a unified method of creating animations using the flexibility and power of JavaScript, without the traditional need for frameworks (JQuery, GreenSock), setTimeout, or requestAnimationFrame(). At this time, the API is supported at different levels in modern browsers: you’ll see the best results in the latest versions of Chrome and Firefox.
对于此示例，我使用的是Web Animation API，这是一种使用JavaScript的灵活性和强大功能来创建动画的统一方法，而无需传统的框架(JQuery，GreenSock)， setTimeout或requestAnimationFrame() 。 目前，现代浏览器已在不同级别上支持该API：您将在最新版本的Chrome和Firefox中看到最佳效果。
标记和CSS (Markup & CSS)
However random the motion, we usually want to limit the movement of the element to a particular container, be it the <body> or another element:
无论运动是随机的，我们通常希望将元素的运动限制在特定的容器中，无论是<body>还是其他元素：
<div id="container">
</div>
The CSS for this example is quite straightforward; the image to be inserted, target, is given an absolute position so that it can be moved freely with JavaScript:
这个例子CSS非常简单。 给要插入的图像target赋予绝对位置，以便可以使用JavaScript自由移动它：
#container {
height:20vh;
width:100%;
}
#target {
position: absolute;
}
(In the demo I’ve also provided target with a drop-shadow filter)
(在演示中，我还为target提供了drop-shadow过滤器 )
JavaScript (The JavaScript)
To start the script added to the bottom of the page, we need to identify the container:
要启动添加到页面底部的脚本，我们需要标识容器：
var container = document.getElementById("container");
Because the image may take a moment to load (confusing or disrupting our script) I’ll load it via JavaScript and append it to the container element, using an onload to guarantee that nothing starts until the image is loaded:
因为加载图像可能会花费一些时间(混乱或破坏脚本)，所以我将通过JavaScript加载并将其附加到容器元素，使用onload来确保在加载图像之前不会启动任何操作：
var target = document.createElement("img");
target.id = "target";
target.onload = function() {
floatHead();
}
target.src = "head.png";
container.appendChild(target);
The animation is created through three functions. The first creates a new random position (newX and newY) for the target element, within the confines of the container (less the width and height of the target, so that the image does not move over the edge of the container).
通过三个功能创建动画。 第一个在container的范围内(减去target的宽度和高度，以便图像不会在container的边缘上移动)，为target元素创建一个新的随机位置( newX和newY )。
function makeNewPosition() {
var containerVspace = container.offsetHeight - target.offsetHeight,
containerHspace = container.offsetWidth - target.offsetWidth,
newX = Math.floor(Math.random() * containerVspace),
newY = Math.floor(Math.random() * containerHspace);
return [newX, newY];
}
The new position is returned as a simple array.
新职位以简单数组形式返回。
In mathematics, a “random walk” is the formalization of a path consisting of a series of random steps. The movement of a gas particle, stock prices, the paths of foraging animals and the fortunes of compulsive gamblers are all examples of random walks.
在数学中，“随机行走”是由一系列随机步骤组成的路径的形式化。 气体颗粒的运动，股票价格，觅食动物的路径以及强迫性赌徒的命运都是随机游走的例子。
The next function calculates the speed of the motion, i.e. how long the target takes to get to its new location, measured in milliseconds. It is passed two arrays: prev contains the original X and Y position of the target, and next contains the location it is headed for.
下一个函数计算运动速度，即目标到达新位置所需的时间，以毫秒为单位。 它传递了两个数组： prev包含目标的原始X和Y位置， next包含目标的位置。
function velocity(prev, next) {
var x = Math.abs(prev[1] - next[1]),
y = Math.abs(prev[0] - next[0]),
larger = x > y ? x : y,
speedModifier = 0.1,
speed = Math.ceil(larger / speedModifier);
return speed;
}
The final function moves the target:
最后一个函数移动target ：
function floatHead() {
var newPos = makeNewPosition(),
oldTop = target.offsetTop,
oldLeft = target.offsetLeft,
target.animate([
{ top: oldTop+"px", left: oldLeft+"px" },
{ top: newPos[0]+"px", left: newPos[1]+"px" }
], {
duration: velocity([oldTop, oldLeft],newPos),
fill: "forwards"
}).onfinish = function() {
floatHead();
}
}
The whole thing is set in motion by calling the floatHead() once the image is loaded.
加载图像后，通过调用floatHead()整个过程。
翻译自: https://thenewcode.com/20/A-Random-Walk-with-the-Web-Animation-API
随机游走和随机重启游走
扫一扫
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
