jquery - 使用 Metro JS 的平铺动画

Question

我正在尝试使用Metro js插件组合两个动画。我想将多站动画与翻转动画结合起来。翻转动画应该在延迟后发生。你能帮我开始一些示例代码吗？

谢谢你的帮助。

Answer 1

这取决于您正在寻找多少黑客。

有一个简短而肮脏的方法可以做到这一点，但我不能保证它会跨浏览器工作，如果你关心同步问题，你还必须仔细调整。

解释一下，您可以将一个图块嵌入到另一个图块的框架中，但内部图块不会“智能”地判断它是否正在显示：它不会在每次再次显示时重置其动画。

如果您以翻转瓷砖作为外部动画开始，然后嵌入多个停止瓷砖作为翻转的第一面显示，您可以显示多个停止，然后瓷砖翻转。

变得棘手的是该delay值只是：动画之间的延迟，但不考虑动画运行的时间。为了在翻转之前显示多个停靠点的所有停靠点，您的翻转瓷砖的延迟必须是：number-of-stops * ( multiple-stops-tile-delay + multiple-stops-tile-single-animation-time ) - flip-tile-single-animation-time

这是一个示例 jsfiddle（我只是修改了给出的两个示例），其中翻转瓷砖的延迟设置得不够长，因为我懒得计算/编码潜入 ms 动画时间。我只是使用了停站数 * 延迟时间。因此，将多个停止瓷砖设置为 3 个停止的 6000 延迟，我将父翻转瓷砖设置为 18000 延迟。如果您让它运行超过几次翻转，它将完全不同步。

注意：我已经在 Chrome、Firefox 和 IE 9 中对此进行了测试，它基本上适用于所有三种浏览器，但 IE 可能具有与其他两种不同的奇怪延迟时间，这可能会导致在所有三种浏览器中停止翻转同步是不可能的。

更长和更优雅的方法将涉及对插件的代码更改以强制重置其他图块内的图块的动画，或一些类似的方法，但不仅仅是指出这一点将超出直接答案的范围。