Js把球做错了，每次动作慢然后变快。
Js把球做错了，每次动作慢然后变快。
提问于 2018-10-28 22:56:58
当我第一次运行这段代码时，动画速度很慢，那么每次faster.The代码移动一个球时，当你触摸到屏幕后，球就会转到你接触的地方。
但是第一次，它很慢，然后每次它都跑得更快。为什么？
我期待着类似的速度，不是完全恒定的，但不是那样的。在第十次尝试时，球跑得太快了。
我试试看我的智能手机，我不知道它是否能在电脑上工作。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.point{
width:10px; height:10px;
background-color:green;
position:absolute;
}
#ball{
width:10px; height:10px;
background-color:red;
position:absolute;
top:1px; left:50px;
}
</style>
</head>
<body>
<div class="point"></div>
<div id="ball"></div>
<script type="text/javascript">
window.addEventListener("touchstart", function(e){
var cx = e.touches[0].clientX;
var cy = e.touches[0].clientY;
});
window.addEventListener("touchmove", function(e){
var cx = e.touches[0].clientX;
var cy = e.touches[0].clientY;
endB = [cx, cy];
});
window.addEventListener("touchend", function(e){
decl();
});
function decl(){
isBmove = true;
mstep = 2;
requestAnimationFrame(step);
}
function step(ts){
if (isBmove){
var dfrein = 25;
var gb = b.getBoundingClientRect();
var ang = Math.atan2(endB[1]-gb.top, endB[0]-gb.left);
var addX = Math.cos(ang)*mstep;
var addY = Math.sin(ang)*mstep;
var difX = endB[0]-gb.left;
var difY = endB[1]-gb.top;
var dist = Math.sqrt(Math.pow(difX,2),Math.pow(difY,2));
if(dist < dfrein){
mstep *= 0.98;
l("m= "+mstep);
}
if (mstep < 1){
isBmove = false;
l("add :"+addX+","+addY);
}
b.style.top = gb.top+addY+"px";
b.style.left = gb.left+addX+"px";
}
requestAnimationFrame(step);
}
window.requestAnimationFrame =
window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
var isBmove = false;
var endB = [0,0];
var mstep = 2;
var b = document.getElementById("ball");
function l(p){
console.log(p);
}
</script>
</body>
</html>谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-28 23:06:44
如果我没有弄错，那是因为每次调用touchend事件侦听器时都需要一个新的动画框架，这样就可以调用decl()函数。所以，也许试着把requestAnimationFrame(step)从decl()中拿出来。就像这样：
// Instead of:
function decl(){
isBmove = true;
mstep = 2;
requestAnimationFrame(step);
}
// Try like this:
function decl() {
isBmove = true;
mstep = 2;
}
requestAnimationFrame(step)Stack Overflow用户
发布于 2018-10-28 23:13:05
佩塔是对的。至于它的价值，这里有一个版本的你的应用程序更改为工作鼠标事件。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.point {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
#ball {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 1px;
left: 50px;
}
</style>
</head>
<body>
<div class="point"></div>
<div id="ball"></div>
<script type="text/javascript">
window.addEventListener("mousedown", function (e) {
var cx = e.clientX;
var cy = e.clientY;
});
window.addEventListener("mousemove", function (e) {
var cx = e.clientX;
var cy = e.clientY;
endB = [cx, cy];
});
window.addEventListener("mouseup", function (e) {
decl();
});
function decl() {
isBmove = true;
mstep = 2;
}
function step(ts) {
if (isBmove) {
var dfrein = 25;
var gb = b.getBoundingClientRect();
var ang = Math.atan2(endB[1] - gb.top, endB[0] - gb.left);
var addX = Math.cos(ang) * mstep;
var addY = Math.sin(ang) * mstep;
var difX = endB[0] - gb.left;
var difY = endB[1] - gb.top;
var dist = Math.sqrt(Math.pow(difX, 2), Math.pow(difY, 2));
if (dist < dfrein) {
mstep *= 0.98;
l("m= " + mstep);
}
if (mstep < 1) {
isBmove = false;
}
l("add :" + addX + "," + addY);
b.style.top = gb.top + addY + "px";
b.style.left = gb.left + addX + "px";
}
requestAnimationFrame(step);
}
requestAnimationFrame(step);
window.requestAnimationFrame =
window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
var isBmove = false;
var endB = [0, 0];
var mstep = 2;
var b = document.getElementById("ball");
function l(p) {
console.log(p);
}
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53036792
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号