0

我正在开发一个演示库,以使我的生活更轻松。自然,动画是其中不可或缺的一部分。

该库使用Transit为动画提供动力,以加速 CSS3 的性能。一个特定的动画具有滑入或滑出演示文稿的元素。如果你把其中的两个粘在一起(一个进去,一个出去),它会为幻灯片到幻灯片的过渡创造一个非常好的效果。在此处查看演示(使用箭头键/单击前进/后退通过演示文稿)

(这都是在 Windows 中)Chrome 显示效果很好,在过渡期间您看不到两个“幻灯片”之间的间隙,因为它们实际上是同时播放的。然而,Chrome 在转换过程中会扭曲文本,我对此无能为力,因此在实际演示时,我想使用 Firefox 甚至 IE 之类的东西,因为它们总是很好地消除锯齿文本。然而,在 FF 和 IE 中,两张幻灯片之间会出现一个间隙,就好像它们开始时相距非常小一样。

确实它们是分开开始的,当我在每个动画开始时记录一个 Date.now() 时,Chrome 大约有 4 毫秒的差异,而 Firefox 有 3 毫秒的差异(尽管其中一些开销可以归因于创建Date 对象,还有很多优化要做)。Chrome 的时差较大,而 Firefox 是动画中的差距。

有没有什么办法解决这一问题?是我的实现有问题(在 Github 上),还是与 Transit 有关(在 Github 上)?如果没有明显的解决方案,我可以尝试使用Tram.js,但我一开始想避免这种情况,因为它比 Transit 有点笨拙。

对此的任何见解将不胜感激。很抱歉,此页面上没有任何代码,但它可能归结为很多事情,所以我只是将整个库供查看。

4

1 回答 1

0

进行调试,我看到缓动功能设置为

  easeInOutCubic: "cubic-bezier(.645,.045,.355,1)"

我想说问题就是从这里出现的,如果你想让 2 个动画完美同步,你应该选择一个线性缓动函数。

于 2014-02-25T18:34:54.793 回答