动画精灵更平滑的动作小提琴jquery

Question

我想动画这个facebook贴纸，这是10张图片的精灵。这是基于css中的背景位置。

在facebook动画中，动作很好，很流畅，我只是有方方面奇怪的动作...... 我究竟做错了什么？ http://jsfiddle.net/64nu4h4w/37/

＆＃13;

＆＃13;

var currentY = 0;
var isAnimating = false;
var $window = $('.window');
var windowWidth = 80;
var frameRateMs = 100;

function updateWindow() {
    if (isAnimating) {
        $window.css({'background-position-y': currentY + 'px'});
        currentY -= windowWidth;
        if (currentY == -windowWidth*4) {
            windowWidth = -windowWidth;
        } else if (currentY == 0) {
            windowWidth =windowWidth;
        }
    }
    setTimeout(updateWindow, frameRateMs);
}

isAnimating = true;

updateWindow();

＆＃13;

h1 {
    font-family:sans-serif;
    font-size:14px;
}
.window {
    width: 80px;
    height: 80px;
    background: url("https://scontent.flim5-4.fna.fbcdn.net/v/t39.1997-6/p240x240/10333108_451580824986023_868823540_n.png?_nc_cat=0&oh=2b81c371938ee4f2648f4e35fe260b33&oe=5B75B854");

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<h1>Current State using .animate() (hover for effect)</h1>
<div class="window"></div>


<h1>Sprites:</h1>
<img src="https://scontent.flim5-4.fna.fbcdn.net/v/t39.1997-6/p240x240/10333108_451580824986023_868823540_n.png?_nc_cat=0&oh=2b81c371938ee4f2648f4e35fe260b33&oe=5B75B854"/>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在图片上放置了numbers for each frame以查明发生了什么，因为我怀疑订单不正确。然后我修改了代码以左右移动帧，从上到下。还为总帧数添加了一个变量，以便跳过空帧。

＆＃13;

＆＃13;

var currentY = 0;
var currentX = 0;
var isAnimating = false;
var $window = $('.window');
var windowWidth = 80;
var frameRateMs = 170;
var totalNumberOfFrames = 10;
var currentFrame = 1;

function updateWindow() {
  if (isAnimating) {
    $window.css({
      'background-position': currentX + 'px ' + currentY + "px"
    });
    if (currentFrame == totalNumberOfFrames) {
      currentX = 0;
      currentY = 0;
    } else if (currentX > -windowWidth * 3) {
      currentX -= windowWidth; 
    } else {
      currentY -= windowWidth; 
      currentX = 0;  
    }
    currentFrame = currentFrame < totalNumberOfFrames ? currentFrame + 1 : 1;
  }
  setTimeout(updateWindow, frameRateMs);
}
$window.hover(function() {
  isAnimating = true;
}, function() {
  isAnimating = false;
});
updateWindow();

＆＃13;

h1 {
  font-family: sans-serif;
  font-size: 14px;
}

.window {
  width: 80px;
  height: 80px;
  background: url("https://scontent.flim5-4.fna.fbcdn.net/v/t39.1997-6/p240x240/10333108_451580824986023_868823540_n.png?_nc_cat=0&oh=2b81c371938ee4f2648f4e35fe260b33&oe=5B75B854");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Desired Effect:</h1>
<img src="https://scontent.flim5-4.fna.fbcdn.net/v/t39.1997-6/p240x240/10333108_451580824986023_868823540_n.png?_nc_cat=0&oh=2b81c371938ee4f2648f4e35fe260b33&oe=5B75B854" />

<h1>Current State using .animate() (hover for effect)</h1>
<div class="window"></div>

＆＃13;

＆＃13;

＆＃13;