jQuery Animate 动态转换答案

【问题标题】：jQuery Animate Dynamic TransformationjQuery Animate 动态转换
【发布时间】：2015-10-28 00:05:52
【问题描述】：

我是 jQuery 新手，我正在构建一个向左移动的基本块，如果我按下左键；如果我按右，向右移动。它完美地工作。但是，我不想直接使用 css webkitTransform，而是想使用动画来使运动更流畅。这是我的初始代码：http://jsfiddle.net/hphchan/c2zzhjwL/。

我整天都在浏览如何做到这一点，但仍然无法找到答案。我注意到有一个.animate() jQuery 内置方法和step 函数。但是，我不知道如何使它起作用。

谢谢。

【问题讨论】：

标签： javascript jquery jquery-animate translate-animation

【解决方案1】：

你可以使用动画：

$spinner.animate({
    left: i
}, 200);

为此，您必须将#spinner 的位置设置为相对或绝对。如果你想创建一个游戏，这对 hitbox 很有用。

Demo here

【讨论】：

【解决方案2】：

您为微调器设置动画的时间非常少，我建议使用 CSS 来获得相同的结果，这里是 example。

#spinner {
   width : 50px;
   height : 10px;
   background-color : #000;
   -webkit-transition: all .6s; /* Safari */
   transition: all .6s;
}

【讨论】：

你可以实现比 jQuery animate 方法更流畅的动画

【解决方案3】：

使用.animate可以替换

$spinner.css("webkitTransform", "translate(" + i + "px, 0)");

与

$spinner.animate({ left: i }, {
       duration: 500, //change this according to your need
       step: function(now, fx){
            $spinner.css("margin-left", now);
       }
});

DEMO

Article如果您想了解更多详情

【讨论】：

还有其他方法吗...？？？似乎这种方法无法创建足够流畅的翻译......就像普通的 CSS 翻译一样......例如：jsfiddle.net/hphchan/pmgn2q5e/1
@CHANist 在这种情况下，您可以尝试将i 的值增加到更高的值，因为animation 和step 就是这样工作的。看到这个 DEMO