在JS中缓和精灵动画

我已经用香草JS制作了我的精灵表动画，通过以固定的FPS移动背景位置，使用requestAnimationFrame和setTimeout来设置帧速率。

最终，我想用一条缓和曲线来设置它的动画，比如QuadInOut，或者更好的是用一条自定义曲线。我看过的大多数框架都在它们的tween函数中内置了它们的轻松功能，而不是用于动画精灵表。

有人能提出一个JS框架吗？GSAP还是Enchant？或者通过缓和曲线解释更新fps背后的逻辑？

这是我目前的"线性"动画：

var theSprite= $('.sprite');
var timesRun = 0;
var shift = 0;
var fps = 20;        
var anim = function() {
    setTimeout(function() {
        shift -= 520;
        theSprite.css('background-position', shift +'px 0');
        timesRun += 1;
        if(timesRun === 19) {
            timesRun = 0;
            shift = 0;
        }

        animAgain = requestAnimationFrame(anim);
    }, 1000 / fps);
}
anim();