[转载] 随机游走和随机重启游走_网络动画API的随机游走

参考链接：随机游走(Python实现)

随机游走和随机重启游走

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>

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

随机游走和随机重启游走

[转载] 随机游走和随机重启游走_网络动画API的随机游走相关推荐

问道海岛地区服务器维护,问道手游今日09:00服务器停机维护通知_网络-游戏圈...
亲爱的玩家: 为了给各位道友提供更好的修行环境,<问道>手游"梦回佳境"服务器将于2015年11月27日09:00进行停机维护,维护时间预计持续1小时,如遇到突发性事件 ...
画质超高的仙侠java游戏_画质超高的仙侠手游
画质超高的仙侠手游是一款让人越玩越上瘾的游戏. 画质超高的仙侠手游是一款古风系列的唯美修仙手游,游戏的背景主题非常的强大,多元化的社交系统,精美细腻的人物形象设计,酷炫华丽的技能绝招,超级新颖的游戏主 ...
网络游戏安全小议（端游/页游/手游）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 一.网络 ...
黑客自学网络知识远程控制攻击网游公司帮玩家牟利
自学网络知识,黑客攻击多家网游公司致其服务器瘫痪,帮助玩家获取游戏奖励牟利,造成每家网游公司日损失近300万元.近日,海淀公安分局刑侦支队.网安大队在市局网安总队的协助下梳理数万条数据锁定嫌犯,在扬州 ...
当年的三国java游戏_三国卡牌类手游塞班分享问几年前玩的一个三国
分享问几年前玩的一个三国卡牌手机游戏,好像是塞班...分享问几年前玩的一个三国卡牌手机游戏,好像是塞班,或者安卓的,单机的...是塞班的,之前也玩过.里面有霹雳车,攻城云梯,什么的.骑兵,枪兵,盾兵, ...
qq幻想一直连接不到服务器,造梦西游OL连接服务器失败连接不上网络怎么办
造梦西游OL连接服务器失败连接不上网络怎么办.造梦西游OL是一款非常好玩的网络游戏,许多游戏爱好者进入游戏想领略它的玩法,但是近日有许多小伙伴反应一直连接不上服务器,一打开就是连接网络失败这样的界面 ...
ML之RF：利用Js语言设计随机森林算法【DT之CART算法(gain index)】并应用随机森林算法
ML之RF:利用Js语言设计随机森林算法[DT之CART算法(gain index)]&并应用随机森林算法目录输出结果设计思路代码实现(部分代码) 输出结果设计思路代码实现(部分代 ...
12_信息熵，信息熵公式，信息增益，决策树、常见决策树使用的算法、决策树的流程、决策树API、决策树案例、随机森林、随机森林的构建过程、随机森林API、随机森林的优缺点、随机森林案例
1 信息熵以下来自:https://www.zhihu.com/question/22178202/answer/161732605 1.2 信息熵的公式先抛出信息熵公式如下: 1.2 信息熵信 ...
Java黑皮书课后题第5章：5.2（重复加法）程序清单5-4产生了5个随机减法问题。改写该程序，使它产生10个随机加法问题，加数时两个1到15之间的整数。显示正确答案的个数和完成测试的时间
5.2(重复加法)程序清单5-4产生了5个随机减法问题.改写该程序,使它产生10个随机加法问题,加数时两个1到15之间的整数.显示正确答案的个数和完成测试的时间题目题目概述程序清单5-4 破题 ...

[转载] 随机游走和随机重启游走_网络动画API的随机游走

[转载] 随机游走和随机重启游走_网络动画API的随机游走相关推荐

最新文章

热门文章