jQuery游戏——让飞行直升机更流畅答案

【问题标题】：jQuery game - make flying helicopter more smoothjQuery游戏——让飞行直升机更流畅
【发布时间】：2014-03-14 08:34:39
【问题描述】：

我正在制作一个简单的游戏。

我有一架直升机，用户可以上下飞行。

我有基本代码可以正常工作（触摸启动 + 按住直升机上升，松开它下降）。但是，它非常“被动”；如果你想让直升机直线飞行，你需要快速点击屏幕，但是无论你点击多快，直升机都会移动很多。

我需要一种方法让运动在开始上升和开始下降时缓和下来，这样直升机可以在需要时沿相当直线飞行。

我的代码如下：

var speed  = 1;

function copter_touchstart(){
    clearInterval(fall);
    fly = setInterval( start_fly, 2);
}

function copter_touchend(){
    clearInterval(fly);
    fall = setInterval( start_fall, 2);
}

function start_fly(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) - speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

function start_fall(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) + speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

$body.on('touchstart', copter_touchstart).on('touchend', copter_touchend);

JS FIDDLE：HERE

（鼠标事件的触摸改变）反复点击屏幕以“悬停”块，它太被动了，但我不想在正常飞行时降低速度

【问题讨论】：

你能做个小提琴吗？
我正在寻找相同的解决方案。然而，我对喷气背包兜风的观察是。当触摸/释放屏幕时，它在开始时非常缓慢地上升/下降，并且速度随着时间逐渐增加（可能从 0.00 开始，增量为 0.01（随着时间的推移）并达到最大允许速度 1.0）。但我不确定这是否正确，我尝试了很多事情但失败了，但让我们实现这个事情，看看会发生什么。当您找到解决方案时请告诉我。
stackoverflow.com/questions/22442495/… 请看一下，它对我有用。如果您通过任何其他方式实现了这一点，请分享。

标签： javascript android jquery ios mobile

【解决方案1】：

过渡有不同类型的移动，默认为线性。看看这里：

CSS3 transitions

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

【讨论】：