对SVG动画进行惰性异步光栅化处理

栏目: 后端 · 前端 · 发布时间: 4年前

内容简介:翻译:疯狂的技术宅原文:本文首发微信公众号:jingchengyideng

翻译:疯狂的技术宅

原文: http://jakearchibald.com/2017...

本文首发微信公众号:jingchengyideng

欢迎关注,每天都给你推送新鲜的前端技术文章

渲染SVG图像可能会非常慢

在转换 SVG 图像时,浏览器会试着在每一帧上进行渲染,以便使图像尽可能的清晰。 不幸的是,SVG渲染可能会很慢,特别是对于较大的图像。

这里是一个DEMO ,打开后点击“Scale SVG”查看效果。

对SVG动画进行惰性异步光栅化处理

图:使用 Devtools 查看SVG动画的时间线

这是一个非常复杂的SVG,在某些帧上消耗的时间是我们帧预算的10倍,所以这个动画看起来非常糟糕。 这是在一款功能强大的MacBook上做的测试。

如果是更简单的SVG,就不那么糟了。 这是用Firefox的logo演示的另一个例子 ,看起来效果还可以。

不过新API为我们提供了更多的控制方法:

SVG栅格化的惰性处理

createImageBitmap(imgElement).then(imageBitmap => { 
  // … 
});

createImageBitmap 可以将许多不同的图像栅格化为位图数据,这些数据可以绘制到canvas元素上。 但是,在Chrome 61+中,启用了 chrome://flags/#enable-experimental-canvas-features ,它可以为 SVG 图像启用HTML图像元素,并在主线程之外进行异步的栅格化处理,所以不会破坏动画。

另外你还可以只渲染SVG的一部分,并以特定大小进行输出:

createImageBitmap( 
  imgElement, 
  sourceCropX, sourceCropY, 
  sourceCropWidth, sourceCropHeight, 
  {resizeWidth, resizeHeight} 
).then(imageBitmap => …);

这允许我们非常方便的使用画布对SVG进行位图缩放,同时渲染被裁剪后且非常清晰的版本。 一旦清晰版准备就绪,就可以将其包含在动画中。

这里是一个DEMO ,按“Scale canvas”查看效果。 需要Chrome 61+ 中查看,并启用 chrome://flags/#enable-experimental-canvas-features

对SVG动画进行惰性异步光栅化处理

图:Devtools中画布动画的时间线

使用这种方法对CPU来说更加友好,动画也很流畅:

查看SVG动画与SVG-in-canvas两种效果比较的视频演示: https://youtu.be/-yQBbWlXuqg

对于复杂的汽车SVG图像,最后才会出现清晰的图像。 使用Firefox徽标时,清晰版出现得更早,因为渲染时间更短。

DEMO的所有代码: https://glitch.com/edit/#!/sv... :1:0

平滑光栅化

从上面的时间线可以看出,Chrome在将更清晰的纹理传到GPU时仍然会跳过一帧。 这个问题可以通过将工作分块为更小的块来解决,因此GPU上传不会破坏帧预算。

OpenSeadragon :可以动态加载图像切片,并创建可缩放图像。 它非常适合从网络中获取位图数据,但有点hack。

Zoomable lazy-rendered tiled SVG : 需要Chrome 61+并启用 chrome://flags/#enable-experimental-canvas-features

是的,边缘有一点粗糙。 就像我前面说的那样,这是一个hack。 不过我真的对此很兴奋,对 SVG 图像更加酷炫的处理技术在逐渐用于web。

本文首发微信公众号:jingchengyideng

对SVG动画进行惰性异步光栅化处理

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

统计自然语言处理

统计自然语言处理

宗成庆 / 清华大学出版社 / 2008-5 / 66.00元

内容简介 本书全面介绍了统计自然语言处理的基本概念、理论方法和最新研究进展,内容包括形式语言与自动机及其在自然语言处理中的应用、语言模型、隐马尔可夫模型、语料库技术、汉语自动分词与词性标注、句法分析、词义消歧、统计机器翻译、语音翻译、文本分类、信息检索与问答系统、自动文摘和信息抽取、口语信息处理与人机对话系统等,既有对基础知识和理论模型的介绍,也有对相关问题的研究背景、实现方法和技术现状的详......一起来看看 《统计自然语言处理》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具