Question

我通过使用requestAnimationFrame和setTimeout设置帧速率，将背景位置移动到固定的FPS，让我的精灵表在vanilla JS中动画化。

最终我想用一条缓和曲线（例如QuadInOut）制作动画，或者更好的是自定义曲线。我看过的大多数框架都在其补间函数中内置了缓动，而不是为精灵谱表设置动画。

有人可以建议一个可能有帮助的JS框架吗？也许是GSAP或附魔？或者通过缓和曲线解释更新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();

Answer 1

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

Answer 2

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

请参阅：HTML5 Canvas KineticJS Sprite Tutorial

在JS中简化精灵动画

2 个答案: