0

我已经构建了一个 HTML 5 视频播放器，将元信息显示为叠加层。元信息应显示在视频画布上方视频特定播放时间的特定坐标处。覆盖位置（CSS 属性顶部和左侧）应在这些坐标之间线性设置动画。

用户提供的位置存储在 JavaScript 对象中。例如：

{
    "0.283079": {
        "x": 0.019623233908948195,
        "y": 0.05441860465116279
    },
    "10.302745": {
        "x": 0.49686028257456827,
        "y": 0.8869767441860466
    },
    "18.924348": {
        "x": 0.9657247514390371,
        "y": 0.08046511627906977
    }
}

0.283079 s为了实现视频之间的叠加动画18.924348 s，我对给定时间码之间的值进行了线性插值，得到以下结果：

{
    0.3: {
        "x": 0.020429181741986834,
        "y": 0.05582461122653863
    },
    0.35: {
        "x": 0.022810683523910604,
        "y": 0.059979231448085354
    },
    0.4: {
        "x": 0.025192185305834374,
        "y": 0.06413385166963209
    },
    0.45: {
        "x": 0.027573687087758144,
        "y": 0.06828847189117881
    },
    0.5: {
        "x": 0.02995518886968191,
        "y": 0.07244309211272554
    },

    ...

    18.65: {
        "x": 0.95080501675582,
        "y": 0.1061291200719866
    },
    18.7: {
        "x": 0.9535241425892902,
        "y": 0.10145184817772868
    },
    18.75: {
        "x": 0.9562432684227602,
        "y": 0.09677457628347075
    },
    18.8: {
        "x": 0.9589623942562304,
        "y": 0.09209730438921293
    },
    18.85: {
        "x": 0.9616815200897006,
        "y": 0.087420032494955
    }
}

这种方法背后的想法是简单地监听timeupdate事件，然后使用舍入currentTime值作为访问对象以检索插值位置的键。

然而，该timeupdate事件很少触发以实现流畅的动画。（它在 chrome 中每 250 毫秒触发一次）。

为了弥补这个问题，我决定使用 jQuery.animate()来为事件之间的移动设置动画timeupdate：

    this.element.stop(true, true).animate({
        "left" : this.taggingPosition.x + "px",
        "top" : this.taggingPosition.y + "px"
    }, 250, "linear");

这种方法导致动画更接近预期。不幸的是，动画仍然远非流畅，因为它timeupdate可能会以不规则的间隔触发。试验 的clearQueue和jumpToEnd属性.stop( [clearQueue ] [, jumpToEnd ] )也无助于创建更流畅的动画。

如何实现流畅的动画？

4

1 回答 1

2

与其等待timeupdate或使用setInterval，我推荐requestAnimationFrame，它是专门为动画设计的。它应该每秒触发大约 60 次，取决于 CPU 负载和浏览器确定的其他因素。它的另一个好处是浏览器通常会将其与重绘同步，以避免闪烁和/或屏幕撕裂，这可能发生在手机等速度较慢的设备上。

或者，您可以将 Popcorn.js 与Popcorn Base附加模块一起使用，它或多或少完全符合您的要求。它内置了关键帧插值和各种补间函数。有大量文档和一些演示。如果您不想自己构建，我建议使用“样式”插件。

于 2013-11-11T21:19:39.800 回答