- 综合排序
- 最热优先
- 最新优先
- 来自专栏QQ音乐技术团队的专栏
iOS 视图，动画渲染机制探究
终端的开发，首当其冲的就是视图、动画的渲染，切换等等。用户使用 App 时最直接的体验就是这个界面好不好看，动画炫不炫，滑动流不流畅。 好了，废话不说，我们进入主题：看看 iOS 是如何渲染视图和动画的，以及在我们遇到渲染的性能问题时怎么做优化。 （注意：以下内容是笔者的一些踩坑经验和总结, 欢迎探讨！） 准备：在这个阶段，Core Animation 框架准备要渲染的 layer 的各种属性数据，以及要做的动画的参数，准备传递給 render server。同时在这个阶段也会解压要渲染的 image。 然后 render server 会做下面的两件事： 根据 layer 的各种属性（如果是动画的，会计算动画 layer 的属性的中间值），用 OpenGL 准备渲染。 渲染这些可视的 layer 到屏幕。 如果做动画的话，最后的两个步骤会一直重复直到动画结束。 我们都知道 iOS 设备的屏幕刷新频率是 60Hz。
2.1K91发布于 2018-02-01 - 来自专栏腾讯Bugly的专栏
iOS 视图，动画渲染机制探究
终端的开发，首当其冲的就是视图、动画的渲染，切换等等。用户使用 App 时最直接的体验就是这个界面好不好看，动画炫不炫，滑动流不流畅。 好了，废话不说，我们进入主题：看看 iOS 是如何渲染视图和动画的，以及在我们遇到渲染的性能问题时怎么做优化。 （注意：以下内容是笔者的一些踩坑经验和总结, 欢迎探讨！） 准备：在这个阶段，Core Animation 框架准备要渲染的 layer 的各种属性数据，以及要做的动画的参数，准备传递給 render server。同时在这个阶段也会解压要渲染的 image。 然后 render server 会做下面的两件事： 根据 layer 的各种属性（如果是动画的，会计算动画 layer 的属性的中间值），用 OpenGL 准备渲染。 渲染这些可视的 layer 到屏幕。 如果做动画的话，最后的两个步骤会一直重复直到动画结束。 我们都知道 iOS 设备的屏幕刷新频率是 60Hz。
1.8K120发布于 2018-03-23 - 来自专栏大史住在大前端
高性能Web动画和渲染原理系列（2）——渲染管线和CPU渲染
高性能动画 动画的流畅程度通常是以FPS(Frame Per Second，每秒帧率)作为衡量的。 但实际上上面的流程里并没有覆盖网站的整个生命周期，它只是描述了从用户获取到网站首页和资源文件后到完成首屏渲染这段时间内所做的工作，尽管工作流程几乎是一致的，但诸如响应用户的交互动作，在页面上实现动画等等内容 当动画执行时，浏览器会不断创建帧，上面的过程就会反复发生，从而实现帧画面的不断变动： ? ，你可以借助HTML Canvas 2D API来类比理解，在canvas画板上实现的二维动画，即使在逐帧动画中进行覆盖式的全画布重绘，也能够保持较高的帧率；对3D图形学有一定了解的小伙伴都知道，3D渲染引擎只支持点 当需要绘制逐帧动画时，问题就来了。
1.8K30发布于 2019-10-21 - 来自专栏大史住在大前端
Web高性能动画及渲染原理（1）CSS动画和JS动画
开发者编写的CSS代码会在渲染之前被浏览器使用（也就是生成CSSOM的过程），所以对于被渲染出来的元素而言，首屏渲染的结果就可以被当做是起始关键帧，那么结束关键帧从哪里来？ 如果CSS代码中只包含一般的静态选择器（指CSS代码中不包含能够造成HTML元素状态变更的选择器），那么被渲染出的元素在整个生命周期中就只会拥有一个关键帧，也就是首次被渲染时的样式，而1个关键帧或是2个没有样式差异的关键帧都无法进行插值计算 ，这也就不难理解为什么首屏渲染时transition不会生效了。 逐帧动画不再借助浏览器内部的插值机制来生成渲染画面，而是将对应的逻辑在JavaScript中实现，每一帧的状态都由JS来计算生成，然后借助requestAnimationFrame来将动画中的每一帧传递到渲染管线中 以一个列表项的渲染动画为例，通常都会采用阶梯交错动画（也称为stagger动画）来实现，阶梯交错动画中，每一个元素执行的动画实际上是一样的，但是需要在前一个元素的动画过程执行到特定时间点时自己才能开始执行动画
8.3K30发布于 2019-10-16 - 来自专栏云计算linux
vue3.0js 动画效果渲染技术
} }).mount('#app'); //在指定的元素上装载应用程序的根组件; </script> </body> </html> 没有动画的情况下 ，整个内容的显示和隐藏会非常的生硬： 如果我们希望给单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画； Vue的transition动画 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡： 条件渲染 (使用 v-if)、条件展示 (使用 v-show) 动态组件 组件根节点。
54410编辑于 2024-12-19 - 来自专栏软件库
KeyShot动画渲染软件安装包：3D渲染软件KeyShot下载安装
KeyShot是一款专业的实时渲染软件，它提供了一系列功能强大的工具，可用于制作细致、高精度的静态和动态渲染动画效果。 以下是KeyShot动画渲染的一些特点： 1. 实时渲染：KeyShot的实时渲染功能可让动画制作者立即预览他们的工作，而无需等待渲染过程的完成，这样可以大大缩短渲染时间。 2. 多种输出格式：KeyShot支持多种输出格式，如AVI、MPEG、Flash、QuickTime等，这样用户可以将渲染的动画导出到所需的输出格式，以供其他制作用途。 4. 总的来说，KeyShot是一款强大的动画渲染软件，具有实时渲染、动态材质和灯光、多种输出格式和简易的用户界面等特点，这使得其成为制作动画的首选之一。 KeyShot是目前非常强大的一款3D渲染软件，是keyshot最新的中文版本，有了它用户不再需要通过各种复杂的操作便可生产出一个非常真实的影像或者动画效果，并且它为用户带来了与众不同的3D视觉效果创建方式
75700编辑于 2023-04-19 - 来自专栏编程时光
《现代Javascript高级教程》优化动画和渲染的利器
现代JavaScript高级小册 深入浅出Dar 现代TypeScript高级小 requestAnimationFrame：优化动画和渲染的利器 引言 在Web开发中，实现平滑且高性能的动画和渲染是一个关键的需求 而requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它可以协调浏览器的刷新率，帮助开发者实现流畅的动画效果，并提供更高效的渲染方式。 浏览器会在适当的时机调用这个函数，以保证动画和渲染的协调性。通过与浏览器的合作，requestAnimationFrame可以避免不必要的渲染操作，并确保动画的效果更加平滑。 通过使用requestAnimationFrame，可以在每个浏览器刷新帧之前更新动画的状态，并在合适的时机进行渲染。这样可以确保动画的流畅性，并减少不必要的渲染操作。 总结 requestAnimationFrame是浏览器提供的用于优化动画和渲染的API，它通过与浏览器的合作，协调刷新率并在合适的时机执行回调函数，从而实现流畅的动画效果和高性能的渲染。
37920编辑于 2023-07-27 - 来自专栏Mac资源随时更新
KeyShot Pro，3D动画渲染制作工具
KeyShot Pro Mac版是一款强大的3D动画渲染制作工具，使用它可以简化3d渲染和动画制作流程，并且提供最准确的材质及光线，渲染效果更加真实！ 下载：KeyShot Pro Mac版KeyShot Pro WIn版图片环境亮度动画环境光动画使用 KeyShot Animation 直接控制和调整环境的亮度。 可变形动画导入除了 Alembic 之外，还可以导入带有装配动画的 .mc/.mcx 缓存文件和 FBX 文件。肤色从 KeyShot 材质库中拖放更广泛的肤色。
89220编辑于 2023-02-15 - 来自专栏Mac软件的分享
KeyShot Pro for mac(3D渲染和动画制作软件)
KeyShot Pro是Mac平台一款高端的渲染软件，能够在Mac系统上实现快速和高质量的3D渲染。 KeyShot Pro还具有高度可定制的材质编辑器、动画功能、交互式场景构建工具和虚拟现实支持等功能，使得用户可以更加轻松地创建和呈现出令人惊叹的视觉效果。 KeyShot Pro for mac(3D渲染和动画制作软件) 图片 KeyShot Pro for Mac具有许多功能特点，让用户可以轻松地创建高质量的3D渲染效果。 以下是其主要功能特点： 快速渲染：KeyShot Pro for Mac能够在短时间内生成高质量的渲染图像，使用户可以快速呈现出他们的设计成果。 动画功能：KeyShot Pro for Mac支持动画功能，使用户可以创建流畅的动画来展示他们的设计成果。
1.5K50编辑于 2023-04-14 - 来自专栏量子位
CG动画渲染师：云存储更香了
我发四，这是我一动画渲染师朋友告诉我的。 “云渲染”是一种什么体验？ 所谓渲染，作为模型到动画的一个关键步骤，需要大量算力来计算。 有这样一组数据。 CG动画经典《阿丽塔：战斗天使》，就需要600天、30000台服务器全天不停歇的渲染，才制成了这部122分钟的电影。 一个传统的渲染厂商，首先你得自建一个机房，也就是所谓的“渲染农场”。 除了成本高昂以外，渲染本身还有一定的规律性。年期以及年初的时候是市场淡季，但在节假日那段时间，需求就会爆发性增长。 以吞吐量为例，腾讯云Turbo文件存储可以提供百GB/s的吞吐量，结合动态扩展的计算资源，实现随用随取，在实际的渲染场景下，渲染效率提升30%。 机器渲染的成本是非常高的，一般来讲，一百台服务器，他渲染一部电影需要一个月的时间。通过云渲染提供资源可以提供一千台服务器，时间会缩短到十分之一。 讲到这里，似乎还不能证明云存储就是新的生产力工具。
1.3K30编辑于 2023-03-10 CSS3强制启用 GPU 加速渲染 CSS3 动画
CSS3强制启用 GPU 加速渲染 CSS3 动画 css3 transform:translateZ(0)解决一个存在已久并早已知悉解决方案的渲染问题… 最终，只用了一小段的css代码就解决了 transform : translate(x,y); 在监听滑鼠滚动事件时，判断上下执行相应动画总是会卡顿（帧数很低，不稳定），之前了解过 -webkit-transform: translateZ(0);或者-webkit-transform : translate3d(0,0,0);属性，也就是强制启用gpu 加速渲染动画 transform:translateZ(0px); -webkit-transform-style:preserve -3d; -webkit-transform: translate3d(0,0,0); 这个CSS属性等于告诉了浏览器用GPU来渲染该层，与一般的CPU渲染相比，提升了速度和性能。 被加速元素如果有position定位的子元素，这些子元素有可能无法渲染到被加速元素以外的区域——left设置成-10000px都会渲染成0px； pc上有些显卡还会出现渲染bug
55010编辑于 2024-03-12- 来自专栏Mac/Win软件
Maya 2023 for macwin(三维动画建模渲染制作软件)
Maya 3D 动画软件在高度可扩展的制作平台上为 3D 计算机动画、建模、模拟、渲染和合成提供了全面的创意功能集。Maya 拥有下一代显示技术、加速建模工作流程和用于处理复杂数据的工具。 图片软件特点先进的设计三维模型模拟各种自然和环境元素，例如气候变化、水和液体、火灾、植物……拥有各种建模和数据管理工具将一个对象的属性转移到另一个对象的可能性设计衣服、头发和性别以及不同的场景与其他软件建模和动画协调支持数学模型
90550编辑于 2022-12-22 - 来自专栏Web前端
✍️浏览器渲染原理深度拆解：为什么你的动画总是卡顿？
其实背后隐藏着一套精密流水线： 浏览器渲染流水线（文本流程图版）解析阶段 结构生成阶段 计算阶段 绘制阶段 │ │ │ │ ▼ ▼ ▼ ▼[CSS]─────→[CSSOM树]───→[渲染树 触发同步布局：浏览器必须立即计算新布局强制全链路更新：每次修改都经历 Layout → Paint → Composite帧率杀手：16ms的渲染窗口期被反复突破 性能优化第一定律：避开Layout实战技巧 直接跳过Layout和Paint阶段仅触发Composite（GPU加速层）符合浏览器异步渲染机制 深度思考：浏览器分层机制现代浏览器采用分层渲染策略，类似Photoshop图层：主文档层（Root Layer 记住：最流畅的动画，是用户根本感觉不到技术的存在。
25520编辑于 2025-05-26 - 来自专栏Coco的专栏
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
下面将进入本文的重点，从性能优化的角度讲讲浏览器渲染展示原理，浏览器的重绘与重排，动画的性能检测优化等: 浏览器渲染展示原理 及 对web动画的影响 小标题起得有点大，我们知道，不同浏览器的内核（渲染引擎 当不需要绘制时，复合操作的开销可以忽略不计，因此在试着调试渲染性能问题时，首要目标就是要避免层的重绘。那么这就给动画的性能优化提供了方向，减少元素的重绘与回流。 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 动画的性能检测及优化 耗性能样式 比错误放置的动画更糟的事情是导致页面卡顿的动画。 这将让用户觉得失望和不悦，并且可能希望您根本不必费心去设置动画！ 使用 will-change 提高页面滚动、动画等渲染性能 官方文档说，这是一个仍处于实验阶段的功能，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。 ?
2.9K70发布于 2018-05-28 - 来自专栏大史住在大前端
高性能Web动画和渲染原理系列（3）——transform和opacity为什么高性能
目录 一. opacity动画为什么性能好 二. transform动画为什么性能好 三.小结 示例代码托管在：http://www.github.com/dashnowords/blogs 博客园地址 关于opacity和transform的动画性能的话题，机会总是会涉及到“合成层”或者“硬件加速”的概念，理解起来让人觉得非常混乱，最近研究渲染相关的知识后，希望将这几个概念逐步梳理清楚。 例如在网页默认的白底色上rgba(255,255,255)显示一个包含透明度的rgba(218,89,97,0.8)颜色， 那么颜色的RGB分量都按照上述公式进行计算就得到rgb(225,122,128),用取色器拾取一下渲染出来的点 比如一段平移动画，如果使用绝对定位+改变left值的方式来实现，就需要不断计算动画元素的布局并更新它的像素信息，但如果使用translate来实现，动画元素在文档流中的位置并不需要改变，无论后续平移到多远 三.小结 opacity和transform动画的高性能是由于其数学原理决定了可以使用缓存信息，而并不是因为它被硬件加速了。
1.3K10发布于 2019-10-28 - 来自专栏Mac软件分享
KeyShot Pro for mac(3D渲染和动画制作软件) v11.3.2.3激活版
KeyShot 11是一款相当优秀的专业化实时3D渲染工具，使用它可以简化3d渲染和动画制作流程，并且提供最准确的材质及光线，渲染效果更加真实，KeyShot为您提供了使用 CPU 或 NVIDIA GPU 进行渲染的能力和选择，并能够线性扩展以获得无与伦比的性能，从静止图像和动画到交互式 Web 和移动内容，KeyShot 创造最高质量视觉效果的能力可确保您使用最佳工具来满足您的所有可视化需求。 图片KeyShot Pro for mac(3D渲染和动画制作软件)KeyShot Pro for mac最新功能3D绘画用笔触探索细节3D PAInt 允许您通过直接在模型表面上绘画或冲压来进一步定制产品的材料和饰面 物理模拟允许您记录对象的物理并将其应用为关键帧动画。该工具引入了完全模拟的动画以及更精确的散射对象。模拟可以应用于单个或多个模型集、对象或对象组，并作为部分或整个组进行模拟。控制重力、摩擦力和弹力等。 应用程序包括自动化渲染输出、加速产品变体的生成等等。
89430编辑于 2022-12-17 - 来自专栏大史住在大前端
高性能Web动画和渲染原理系列（4）“Compositor-Pipeline演讲PPT”学习摘要
【重要】软件渲染和硬件渲染的区别 声明：本节内容是个人理解，仅用作技术交流，不保证对！ 软件渲染和硬件渲染的区别对笔者而言一直非常抽象，只是知道基本概念。 纹理上传: 处理纹理的挑战之一就是它是在渲染进程（可以理解为单个Tab网页的进程）的主线程里进行的，但是最终需要将其放入GPU内存。 通常我们使用CPU（也就是软件渲染的方式）来执行光栅化任务，也可以直接使用GPU来渲染（也就是硬件渲染的方式）。 纯软件渲染里严格说是没有合成层概念的，因为最终输出的只有一张位图，按照顺序从下往上画，和画到一个新层上再把新层贴到已有结果上其实是一样的。 所以【硬件渲染】就是渲染进程把要做的事情和需要的数据都写好，然后打包递给GPU让它去干活。
94940发布于 2019-11-15 - 来自专栏大史住在大前端
高性能Web动画和渲染原理系列（5）合成层的生成条件和陷阱
硬件加速相关的几个概念 之前介绍到了RenderLayer渲染层的概念，在涉及到硬件加速的话题时，出现了很多新的概念，参考《Webkit技术内幕》一书的介绍总结如下： Webkit决定将哪些RenderLayer 笔者旁白：对于渲染过程来说，只需要理解这里形成了新的CompositingLayer合成层就可以了，其他的层概念基本都是用于实现对CompositingLayer功能支持的，概念数量太多对于理解宏观流程是一大障碍 动画实现的一些建议 使用transform实现动画 这可能是我们编写动画时听到最多的建议了。 例如使用left和top来实现位置动画时，绝对定位的元素会形成RenderLayer，但是却不符合提升为CompositingLayer的条件，所以动画元素就会和Document处在同一个合成层里，持续进行的动画就会导致 Document这一层（通常是正常文档流这一层，包含了大量的流式布局的元素）不断重绘，从而影响渲染效率，如果能够让动画的节点放到单独的合成层里，就可以避免这种大规模重绘，并借助GPU加速合成的能力加速整个渲染流程
1.3K10发布于 2019-11-19 - 来自专栏Mac软件分享
KeyShot Pro for mac(3D渲染和动画制作软件) v11.3.3.2激活版
keyshot 11是一款基于mac平台开发的的3D渲染工具，是非常强大的光线追踪与全域光渲染软件；keyshot11中文版可以快速轻松地创建3D渲染和动画，支持Mac和PC上最广泛的3D文件格式。 图片 KeyShot Pro for mac(3D渲染和动画制作软件) KeyShot Pro for mac附加功能 环境亮度动画 环境光动画 使用 KeyShot Animation 直接控制和调整环境的亮度 可变形动画导入 除了 Alembic 之外，还可以导入带有装配动画的 .mc/.mcx 缓存文件和 FBX 文件。 肤色 从 KeyShot 材质库中拖放更广泛的肤色。
1.1K30编辑于 2023-02-15 - 来自专栏达达前端
列表渲染与条件渲染
file 作者 | Jeskson 来源 | 达达前端小酒馆 列表渲染与条件渲染 如何渲染数组类型和对象类型的数据 渲染数组⾥的所有数据 相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据， [ "幸咖啡", "腾：年", "总投资20亿元", "京数量同⽐增⻓163%", "腾超五千万", ], } 如何把整个列表都渲染出来呢
1.9K20发布于 2019-11-29
腾讯云开发者
