javascript - 如何为 YouTube 嵌入动画制作自定义进度条？

Question

有关 YouTube 视频的一些事情使得制作流畅的动画进度条变得困难。甚至 YouTube 的内置进度条也不流畅。但我认为必须有办法做到这一点。

我正在为 YouTube 嵌入使用自定义控件，我的进度条以跳跃的方式而不是平稳地移动。这是代码:

vidClock = setInterval(function() {
    if (state == 1) {
        var time = player.getCurrentTime();
        var percent = (time / duration) * 100;
        $seekSlider.css({
            'width' : percent + '%'
        });
    }
}, 100);

这个变量的起源并没有全部显示出来，但它们所代表的应该是显而易见的。怎样才能让横杆移动的更顺畅？

我尝试向元素添加 CSS 过渡效果，还尝试设置更小的间隔，例如 10、20 和 30(在建议之后，尝试使用 JQuery animate)。

例如，按照下面的答案建议使用 $.animate 并不顺利:http://jsfiddle.net/e11oy0eu/290/

Answer 1

您可以使用 .animate() 函数:

vidClock = setInterval(function() {
    if (state == 1) {
        var time = player.getCurrentTime();
        var percent = (time / duration) * 100;
        $seekSlider.animate({
            'width' : percent + '%'
        },500);
    }
}, 500);

或者使用 CSS 动画:

CSS:

.progress {
    width: 0%;
    height: 100%;
    background-color: green;
    transition: all 0.5s linear;
}

JS:

vidClock = setInterval(function() {
    if (state == 1) {
        var time = player.getCurrentTime();
        var percent = (time / duration) * 100;
        $seekSlider.css({
            'width' : percent + '%'
        });
    }
}, 500);