在 JS 中简化精灵动画答案

【问题标题】：Easing a sprite animation in JS在 JS 中简化精灵动画
【发布时间】：2013-12-19 07:50:42
【问题描述】：

我在 vanilla JS 中制作了我的精灵表动画，方法是在固定的 FPS 上移动背景位置，使用 requestAnimationFrame 和 setTimeout 设置帧速率。

最终，我想使用缓动曲线（例如 QuadInOut）或自定义曲线为其设置动画。我看过的大多数框架都将缓动内置到它们的补间函数中，而不是用于为精灵表设置动画。

谁能推荐一个可能有帮助的 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();

【问题讨论】：

标签： javascript animation sprite easing

【解决方案1】：

Enchant.js 有几种不同的精灵动画方式。如果你看看这里的 enchant.timeline 类http://wise9.github.io/enchant.js/doc/plugins/en/symbols/enchant.Timeline.html 它有几个不同的函数可以以不同的方式缓动精灵。

【讨论】：

【解决方案2】：

我想你一定会喜欢KineticJS。它就像一个魅力，专为你想做的事情而设计。

见：HTML5 Canvas KineticJS Sprite Tutorial

【讨论】：

据我所知 Kinetic sprite 动画没有缓动选项？如果有帮助，我想降低实际帧速率，而不是任何补间或运动。