个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
<分区>
一段时间以来，我一直在为子弹使用动画，动画使子弹从起点到终点沿正弦轨迹运动。我遇到的动画的唯一问题是它使用平面 speed 参数来移动，我想转换它以便它使用时间来代替。这样你实际上可以说子弹将持续 2 秒，否则你不知道它什么时候到达。
经过一些研究，我认为子弹需要这些:
这些将允许您计算自子弹发射后经过了多少时间，并根据假设它行进了多少时间，您可以知道它在特定时间点(例如 1.2 秒后)应该在何处
由于脚本让子弹以正弦曲线方式行进，但我不知道如何实现它。
脚本:
var cvs = document.querySelector('canvas'),
ctx = cvs.getContext('2d'),
w, h, cx, cy,
resize = function() {
w = cvs.width = window.innerWidth;
cx = w / 2;
h = cvs.height = window.innerHeight;
cy = h / 2;
},
tools = {
rnd: (min, max) => Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min),
flt: (min, max, dec) => parseFloat((Math.random() * (min - max) + max).toFixed(dec)),
distance: (p1, p2) => Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y)),
rftv: (p1, p2) => Math.atan2(p2.y - p1.y, p2.x - p1.x)
},
loop = function() {
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, w, h);
for (var i = pool.length - 1; i >= 0; i--) {
// move bullet
pool[i].move();
// bullet
ctx.save();
ctx.beginPath();
ctx.arc(pool[i].x, pool[i].y, pool[i].r, Math.PI * 2, 0);
ctx.fillStyle = 'hsl(100, 100%, 50%)';
ctx.fill();
ctx.closePath();
ctx.restore();
// start location
ctx.save();
ctx.beginPath();
ctx.arc(pool[i].ix, pool[i].iy, pool[i].r, Math.PI * 2, 0);
ctx.strokeStyle = 'hsl(100, 100%, 50%)';
ctx.stroke();
ctx.closePath();
ctx.restore();
// end location
ctx.save();
ctx.beginPath();
ctx.arc(pool[i].dx, pool[i].dy, pool[i].r, Math.PI * 2, 0);
ctx.strokeStyle = 'hsl(100, 100%, 50%)';
ctx.stroke();
ctx.closePath();
ctx.restore();
// remove bullet when it arrives
if (pool[i].remaining <= 0) {
pool.splice(i, 1);
}
}
requestAnimationFrame(loop);
},
pool = [],
last_spawn = 0,
spawn_interval = 0,
spawn_limit = 1,
spawn = function() {
if (Date.now() - last_spawn > spawn_interval) {
last_spawn = Date.now();
for (var i = 0; i < spawn_limit; i++) {
pool.push(new particle());
}
}
},
particle = function() {
var exvec = tools.rnd(20, w - 20),
eyvec = tools.rnd(20, h - 20),
svecs = {
x: cx,
y: cy
},
evecs = {
x: exvec,
y: eyvec
},
rad = tools.rftv(svecs, evecs),
distance = tools.distance(svecs, evecs);
this.time = 2 * 1000; // time in seconds for example 2 seconds === 2 * 1000 = 2000 ms
this.elapsed = 0; // how much time passed since it started
this.started = Date.now(); // time of departure
this.ix = cx; // start x axis
this.iy = cy; // start y axis
this.dx = exvec; // end x axis
this.dy = eyvec; // end y axis
this.x = cx; // current x axis
this.y = cy; // current y axis
this.r = 10; // radius of bullet
this.rad = rad; // needed for computation
this.period = distance / 2; // how many axis changes
this.distance = 0; // how much distance bullet travelled
this.total = distance; // how much distance there is in total to be made
this.remaining = distance; // difference between total and made
this.amplitude = distance / 2; // how big hump
this.speed = 2; // flat speed increase
this.move = function() { // this is function for to calculate move
this.elapsed = Date.now() - this.started;
this.distance += this.speed;
this.remaining = this.total - this.distance;
this.x = this.ix + Math.cos(this.rad) * this.distance;
this.y = this.iy + Math.sin(this.rad) * this.distance;
const deviation = Math.sin(this.distance * Math.PI / this.period) * this.amplitude;
this.x += Math.sin(this.rad) * deviation;
this.y -= Math.cos(this.rad) * deviation;
};
};
resize();
loop();
window.onresize = function() {
resize();
};
spawn();body {
overflow:hidden;
}
canvas {
position:absolute;
top:0;
left:0;
}<canvas></canvas>最重要的东西在 this.move 函数里面，因为它完成了整个移动，我已经实现了时间计算(希望它是正确的)但是我不知道如何修改当前的移动代码所以它受时间影响而不是受速度影响。
25
4
0
您好，我是使用 xampp 的 PHPmyadmin 新手，没有 MYSQL 背景。当我喜欢研究它是如何工作的时，我的脑海中浮现出一个想法，它让我一周都无法休眠，因为我似乎无法弄清楚如何使用 MIN(
Go docs say (强调): Programs using times should typically store and pass them as values, not pointers.
我有一组用户在 8 月 1 日有一个条目。我想找到在 8 月 1 日有条目但在 8 月 2 日没有做任何事情的用户。 现在是 10 月，所以事件已经过去很久了。 我有限的知识说: SELECT * F
我有以下代码，主要编码和取消编码时间结构。这是代码 package main import ( "fmt" "time" "encoding/json" ) type chec
您能详细解释一下“用户 CPU 时间”和“系统 CPU 时间”吗？我读了很多，但我不太理解。 最佳答案 区别在于时间花在用户空间还是内核空间。用户 CPU 时间是处理器运行程序代码(或库中的代码)所花
应用程序不计算东西，但做输入/输出、读取文件、使用网络。我希望探查器显示它。 我希望像 callgrind 中的东西一样，在每个问题中调用 clock_gettime。 或者像 oprofile 那样
目前我的 web 应用程序接收 websocket 数据来触发操作。 这会在页面重新加载时中断，因此我需要一个能够触发特定事件的客户端解决方案。 这个想法可行吗？ 假设你有 TimeX = curre
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我有一个 Instant (org.joda.time.Instant) 的实例，我在一些 api 响应中得到它。我有另一个来自 (java.time.Instant) 的实例，这是我从其他调用中获得
如何集成功能 f(y) w.r.t 时间;即 'y'是一个包含 3000 个值和值 time(t) 的数组从 1 到 3000 不等。所以，在整合 f(y) 后我需要 3000 个值. 积分将是不确定
可以通过 CLI 创建命名空间，但是如何使用 Java SDK 来创建命名空间？ 最佳答案 它以编程方式通过 gRPC API 完成由服务公开。 在 Java 中，生成的 gRPC 客户端可以通过 W
我有一个函数，它接受 2 组日期(开始日期和结束日期)，这些日期将用于我的匹配引擎 我必须知道start_date1和end_date1是否在start_date2和end_date2内 快进:当我在
我想从 Python 脚本运行“time”unix 命令，以计算非 Python 应用程序的执行时间。我会使用 os.system 方法。有什么方法可以在Python中保存这个输出吗？我的目标是多次运
我正在寻找一种“漂亮的数字”算法来确定日期/时间值轴上的标签。我熟悉 Paul Heckbert's Nice Numbers algorithm . 我有一个在 X 轴上显示时间/日期的图，用户可以
在 PowerShell 中，您可以格式化日期以返回当前小时，如下所示: Get-Date -UFormat %H 您可以像这样在 UTC 中获取日期字符串: $dateNow = Get-Date
我正在尝试使用 Javascript 向父子窗口添加一些页面加载检查功能。 我的目标是“从父窗口”检测，每次子窗口完全加载然后执行一些代码。 我在父窗口中使用以下代码示例: childPage=wi
我正在尝试设置此 FFmpeg 命令的 drawtext 何时开始，我尝试使用 start_number 但看起来它不会成功。 ffmpeg -i 1.mp4 -acodec aac -keyint_
我收到了一个 Excel (2010) 电子表格，它基本上是一个文本转储。 单元格 - J8 具有以下信息 2014 年 2 月 4 日星期二 00:08:06 EST 单元格 - L8 具有以下信息
我收到的原始数据包含一列具有以下日期和时间戳格式的数据: 2014 年 3 月 31 日凌晨 3:38 单元格的格式并不一致，因为有些单元格有单个空格，而另一些单元格中有两个或三个字符之间的空格。所以
我想知道是否有办法在我的 Grails 应用程序顶部显示版本和构建日期。 编辑:我应该说我正在寻找构建应用程序的日期/时间。 最佳答案 在您的主模板中，或任何地方。 Server version:
我是一名优秀的程序员,十分优秀！