Question

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

用户提供的位置存储在JavaScript对象中。 E.g：

{
    "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事件很少发生，因此很难实现流畅的动画。（它每隔250毫秒镀铬一次）。

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

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

这种方法可以使动画更贴近预期。不幸的是，考虑到timeupdate可能会以不规则的间隔发射，动画仍然不够流畅。尝试使用clearQueue的{{1}}和jumpToEnd属性也无助于创建更流畅的动画。

如何实现流畅的动画？

Answer 1

我建议使用专为动画设计的requestAnimationFrame，而不是等待timeupdate或使用setInterval。根据CPU负载和浏览器确定的其他因素，它应该每秒发射大约60次，给予或接受。它还有一个额外的好处，即浏览器通常会将其与重新绘制同步，以避免闪烁和/或屏幕撕裂，这可能发生在手机等较慢的设备上。

或者，您可以将Popcorn.js与Popcorn Base附加模块一起使用，该模块或多或少完全符合您的要求。它具有关键帧插值和内置的各种补间功能。有大量的文档和一些演示。如果你不想建立自己的插件，我推荐使用'style'插件。

根据视频的currentTime动画显示DOM节点的位置

1 个答案: