在JS中简化精灵动画
在JS中简化精灵动画
提问于 2013-12-03 18:04:30
我已经让我的雪碧表在香草JS动画通过移动背景位置在一个固定的帧，使用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();回答 2
Stack Overflow用户
发布于 2013-12-14 11:56:49
Enchant.js有几种不同的精灵动画制作方法。如果你看看这里的enchant.timeline类，http://wise9.github.io/enchant.js/doc/plugins/en/symbols/enchant.Timeline.html，它有几个不同的函数，以不同的方式缓解精灵。
Stack Overflow用户
发布于 2013-12-03 18:16:42
我想你一定会喜欢KineticJS的。它就像一个护身符，专为你想要做的事情而设计。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20348046
复制相关文章
相似问题
腾讯云开发者
