css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画

Welcome to My GitHub

一般在使用 CSS3 keyframe transform 实现逐帧动画时，往往会先把逐帧动画图片合成精灵图，然后再使用 transform 改变其位置，这个方法会消耗大量显存(帧数越多，合成的精灵图越大，显存消耗越多)，容易出现闪烁的问题。

直接看例子：

以下截图都来自于 OPPO FindX Chrome 远程调试。

页面中有50个使用 CSS3 keyfrmae 结合 transform 实现的逐帧动画；

为什么会闪烁，大概是因为 transform 会导致浏览器开启硬件加速，每个动画区域都是一个独立的渲染层；

在调试工具的 Layers 中可以看到：

另外还要注意每个独立的渲染层并不仅仅只是显示出来的那一小块区域，而是整个逐帧动画精灵图内容区域，这应该就是为什么例子中的逐帧动画会消耗那么多显存的原因了。

当选中 Rendering 中的 FPS meter 就可以看到，总消耗显存 130M 左右。

接着再看 Performance：

可以看到因为渲染层太多，光栅化会消耗较长时间，此时页面空白，较长时间的空白就会造成闪烁。

怎么解决这个问题呢？

Canvas逐帧动画

普通的2D Canvas并不是独立的渲染层，渲染区域也仅仅只是显示的那一块区域，并不会消耗太多显存；

最后上述 Canvas逐帧动画是可以再优化一下的；

每次绘制时都是从整个精灵图中选取一部分绘制，这其实是比较耗时的操作；

正确的做法应该在精灵图加载完成之后，先从精灵图中拆出每一帧的图片，然后绘制时直接绘制特定帧的图片即可。

这样优化之后，页面中 Paint 阶段的耗时就可以从 10毫秒减少为 5 毫秒了。

css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画相关推荐

html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
webview显示图片太大，导致webview显示图片还要左右滑动的解决方法
如图所示是解决好之后的样子原始代码: string content="<p>IT之家3月15日消息今日凌晨,苹果公司已宣布其2019年全球开发者大会的日期:<span ...
移动端上(传图片太大)处理方案
利用FileReader和FormData实现图片预览和上传(base64转二进制文件) 监听表单文件变化文件表单的样式主要通过让它后面,通过别的DOM来美化它. <input type=&q ...
Android之解决布局文件图片太大同步放缩后挤掉其它布局的问题
1.问题局文件图片太大同步放缩后挤掉其它布局的问题比如有个图片logo1.png,很大,在平板上图片布局写成这样 <ImageViewandroid:src="@drawable/ ...
基于layer的图片弹出展示,默认原大小展示。图片太大则等比例缩小
/**** html:<img src="img/1.jpg" onclick="showimg('img/1.jpg');">* 图片弹出展示,默 ...
Android图片太大导致无法正常显示
Android图片太大导致无法正常显示原因安卓中有个内存的限制,超过这个限制后资源是无法显示的解决办法在全局配置文件中进行对内存的配置[关键:android:largeHeap="t ...
tabbaritem 图片太大解决方案
tabbaritem 图片太大解决图片很大,下面的字都挡着了.搜到方法是把原来的名字后面加上@2x,原来是tab_chat.png 修改为 tab_chat@2x.png问题解决大小正好. 就是不明 ...
【Android Studio】ImageView / ImageButton 图片太大或者太小解决方法
第一步:指定layout_width与layout_height 在xml文件中设置的ImageButton的宽和高为: android:layout_width="100dp" ...
图片太大导致 imageView无法显示
图片太大导致 imageView无法显示项目中遇到预置大图,在imageView加载时显示不出来从网络中收集资料,明白了原来imageView 在把图片填充到控件中,是通过分辨率(例如:720*1 ...

css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画

css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画相关推荐

最新文章

热门文章