2

我正在尝试向 HTML5 视频添加运动动画，但结果非常不稳定，而且根本不流畅。

HTML 是：

<div id="video">
    <video width="320" height="240" controls="controls">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4"/>
    </video>
</div>

和CSS：

@-webkit-keyframes movement {
    0%  { -webkit-transform: translate3d(0px, 0px, 0); }
    50% { -webkit-transform: translate3d(100px, 100px, 0); }
    100%  { -webkit-transform: translate3d(0px, 0px, 0); }
}

#video {
    -webkit-animation: movement 20s linear infinite;
}

这是小提琴链接：http: //jsfiddle.net/LSAm5/

运动非常不稳定，在视频的边界和控件中非常明显。我主要在 chrome 和 iPad 上进行测试。

有没有办法让这样的动画看起来更流畅？

谢谢。

4

2 回答 2

1

对于 Chrome 的 html 动画，使用 css 过渡非常顺利。这是一个基于您的 jsfiddle 使用 css 转换和 jquery 的示例。

$("video").css({
    '-webkit-transform': 'translateX(100px) translateY(100px)',
    'webkitTransition' : 'all ' + 10000 + 'ms '});

http://jsfiddle.net/LSAm5/144/

于 2014-01-15T21:50:21.090 回答
0

克里斯，我觉得你遇到了设备和浏览器的限制。

我在 MacBook Pro 和 Chrome 上的 Safari 中查看了您的链接。我还检查了 iPad1 上的页面。我认为 Safari 比 Chrome 更好地呈现动作。Safari 控制器栏是 Quicktime 栏，它更小且更暗，因此与具有蓝色大进度条的 Chrome 相比，移动不太明显。

简而言之，我认为您不能以任何其他可以提高性能的方式编写代码。

我还认为不同平台的性能也会有所不同。请记住，浏览器需要通过编解码器解码视频，将生成的视频帧绘制到屏幕上，并不断在屏幕上移动视频帧。

于 2011-08-21T14:50:11.143 回答