我只是想听听是否有人对在 hmtl5 中播放由图像序列组成的短动画时采取哪种方法有任何建议。浏览器支持的范围越广越好,并且它需要适用于 iOS。可以假设 Canvas 。
要求:
- 无需用户交互即可启动动画
- 精确控制要显示的帧(例如转到特定帧,或从第一帧开始播放到第 n 帧)
- 能够缩放动画(以适合浏览器窗口)
- 能够以 ~30fps(90 帧)播放至少 3 秒
- 支持至少 1280x720 的分辨率
从文件大小/性能的 Angular 来看,将动画编码为视频文件是最好的,但它在 iOS 上无法满足 1),并且很可能无法满足 2)。
我过去使用的解决方案是将帧作为一系列 jpeg 单独加载,并使用 DOM 中的图像元素或将帧绘制到 Canvas 来显示帧。这几乎满足了所有要求,并且工作得相当好,只是加载速度非常慢。而且我只对20-30帧左右的动画使用过这种方法。您最终会收到大量的 http 请求和大量的数据。
对于某些动画,包含大量运动模糊的帧已以较低分辨率保存,然后在显示时进行拉伸(stretch)以匹配全分辨率帧。这会节省一些文件大小,而且并不是那么明显。
减少 http 请求量的一种方法是将多个图像合并到一个 Sprite 表中,但是当单个帧为 1280x720 时,您很快就会得到一个具有非常高分辨率的 Sprite 表图像,而我不这样做认为与 iOS 配合得很好。
我还缺少其他方法吗?
最佳答案
您可以使用 CSS3 关键帧动画并在任意点控制动画。
@keyframes sunrise {
0% {
bottom: 0;
left: 340px;
background: #f00;
}
33% {
bottom: 340px;
left: 340px;
background: #ffd630;
}
66% {
bottom: 340px;
left: 40px;
background: #ffd630;
}
100% {
bottom: 0;
left: 40px;
background: #f00;
}
}
#sun.animate {
animation-name: sunrise;
animation-duration: 10s;
animation-timing-function: ease;
}
您还需要添加 vendor 前缀,但我只会使用 Modernizr 来提供后备支持。
http://www.impressivewebs.com/demo-files/css3-animated-scene/
关于javascript - 在 html5 中加载和播放图像序列作为动画的最佳方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12704109/