问题标签 [spritely]

我正在使用Spritely为精灵设置动画。我已经成功平移，但我的最后一项工作是创建淡入淡出的“明星”。我创建了一个精灵表：

我按照此处找到的文档更改了帧数和每秒帧数。

我的问题是精灵的动画既生涩又似乎没有跟随精灵图像，它应该淡入然后淡出。目前它在半可见和完全可见之间摇摆不定。

我使用 Chrome 的控制台来记录帧，我似乎只得到帧 0,1 和 2。我原本预计会有 12 帧（精灵中的每个图像一个），但我是新手，所以我可能会弄错。根据日志，它似乎也没有到达最后一帧。

这是我的完整代码：

在被一个问题困住了 2 天之后，我终于找到了一种从几帧制作动画的简单得多的方法……它叫做Spritely。

到目前为止我所拥有的

• 当您将鼠标悬停时，它会启动动画。

• 当您鼠标移出时，它会倒带动画。

问题

如果在动画结束之前鼠标悬停，或者在倒带结束之前鼠标悬停，它会走得太远并且不同步。

我想做的事

• 在鼠标移出时，仅倒退到第 1 帧并停在那里。
• 在鼠标悬停时，只播放到最后一帧并停在那里。
• 如果我在第 x 帧鼠标悬停（在动画期间），我希望它从第 x 帧倒回到第 1 帧。
• 如果我将鼠标悬停在第 x 帧（倒带期间），我希望它从第 x 帧播放到最后一帧。

提前致谢！

http://jsfiddle.net/reveries/9Dt7n/ http://www.reveriesrefined.com/test/

当您将鼠标悬停在门上时，它应该动画......并且在 jsfiddle 中它工作得很好，但是一旦我将此代码放在我的网站上，它就会停止工作。您仍然会看到图像，但是当您将鼠标悬停在它上面时，没有动画。我想知道js fiddle是否有一些我不包括的隐藏代码？

jQuery (w/srpitely)

我试图在我的页面上有一个使用 Spritely 脚本进行动画处理的角色。我使用的精灵表总共包含 92 帧。我希望动画可以点击。

第一次单击它时，我希望它播放到第 70 帧并停止。然后，下次单击它时，我希望动画从第 70 帧播放到第 92 帧并停止。

我应该如何编写代码？

到目前为止，我能够让动画播放到第 70 帧并停止。即使作为初学者 Web 开发人员，这也相当容易。

这是我到目前为止所拥有的：

使用此代码，当您单击角色时，它会播放第 1-70 帧并停止。那挺好的。但是，下次单击它时，它会从第 70 帧开始并继续播放另外 70 帧。如何更改此设置以使动画仅在第二次单击时播放第 70 到 92 帧？

PS：我希望最终让角色为每次点击执行不同的帧序列。

如果您能帮助我解决这个问题，我将不胜感激！谢谢！

我创建了三个热气球的 .png 图像。每个都有不同的尺寸，因此它们散发出“深度”的概念。对这些 .png 进行编码以便它们像热气球一样在我的容器周围移动和漂浮的最佳方法是什么？

我已经尝试了来自 Spritely 网站的以下代码，我将其改编为：

我将此代码用于其他两个气球 (#balloon1) 和 (#balloon2)，然后将它们各自的 DIV 放入标有“#sky”的容器 DIV 中

我认为将速度设置为 10000 会使它们漂浮得慢很多。

然而，它并没有像我希望的那样运行。首先，一旦页面加载，所有三个气球（我最初定位在容器的三个不同位置）都会立即浮动到同一个确切的位置，之后它们似乎不会从那个位置移动太多。

有没有更简单、更有效的方法让我的三个气球图像在我的容器中随机、真实地移动？

如果您能提供一些帮助，非常感谢！

我有一个精灵动画，我想在鼠标悬停在对象上时播放它，然后在鼠标离开对象时反向播放并在第一帧停止。

这就是我为鼠标输入动画所拥有的：

基本上，当您将鼠标悬停在横幅上时，小胡子会“生长”，直到在第 34 帧完成。（而在第 1 帧，没有小胡子。）

我希望这个小胡子在鼠标离开悬停状态时反向播放并返回到第 1 帧。

问题是，我尝试了几种反转播放的方法，但它并不总是反转回第一帧。

我怎样才能做到这一点？

如果您能提供一些意见，非常感谢！

我有一个对象，当你点击它时，会发生两件事……一个带有一些文本的 div 出现，一个角色播放一个简短的精灵动画。但是，我希望精灵动画在第一次播放后被完全删除。我希望通过单击继续切换 div 文本框。

这就是我所拥有的：

此时，每次单击“#chalkboardweare”对象时，“#boxweare”和“#dude”都会切换...

我希望每次点击都切换“#boxweare”div。

我希望仅在第一次单击后才切换“#dude”div。

有人可以帮我解决这个问题吗？

谢谢！

我一直在尝试做一些跨平台动画，因此没有 web-kit 框架或画布等，也没有 svg（Android 问题）

我有 7 个 png，我想通过它们制作动画（不使用一堆 setTimeOuts），这对我来说听起来是一个非常简单的问题，但经过一番谷歌搜索后我找不到解决方案。

我看过的东西包括 sprite.js、spritely 等，但我真的不想将我所有的 7 帧组合成一个精灵

是否有一个精简的动画库可以让我轻松地跨平台为思想 7 个单独的 png 设置动画？

另一个游泳鱼问题;-)

有没有办法检测 spRandom 当前移动的方向？这样我就可以将精灵的 spState 从 1 更改为 2。

if direction=left spState(1) -> Fish 面朝左 if direction=right spState(2) -> Fish 面朝右

希望你能理解我的问题。我还没有发布任何示例代码。希望任何人都可以给我一个通用的例子来说明如何做到这一点。

谢谢你，阿诺。

我正在尝试使用 Jquery Spritely 实现一个简单的动画。问题是在 Chrome、Firefox 和 Safari 上一切正常。但在 IE 上，我收到以下错误：'无法获取未定义引用或 null 的属性'替换''

小提琴在这里