解析 ECharts 设计：UniversalTransition 动画
· 阅读需 12 分钟
最后更新于 2023-11-11 21:56:00
ECharts 的 UniversalTransition 动画提供了一些复杂场景下过渡动画的解决方案，这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画，在业内比较熟知的类似技术则是 SVG Morph 动画。
查看以下 ECharts 官方示例：
39 篇博文 含有标签「Web 前端」
查看所有标签解析 Konva 设计：事件系统
· 阅读需 13 分钟
最后更新于 2024-06-02 19:47:00
绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 Konva.js 的源码来看看其事件系统是如何设计的。
（之前分析过 ZRender 的源码实现，其采用了几何判断的方式来实现元素拾取，而 Konva.js 采用了不同的方案。）
WebGPU – Web 平台的通用计算 API
· 阅读需 11 分钟
最后更新于 2023-05-14 15:42:00
随着 Chrome v113 的发布，WebGPU API 已正式可用，预计其它平台也将很快发布正式支持，WebGPU 为 Web 平台现代 3D 图形开发提供了一流的支持，不过相比于在 3D 图形开发领域的发展，其还有一个更值得关注的目标，即为 Web 平台带来通用计算 API 的一流支持。
3D 开发：正向渲染与延迟渲染
· 阅读需 12 分钟
最后更新于 2023-03-18 14:30:00
相对于 2D 开发，3D 开发由于有大量的概念需要进行学习了解因此门槛较高，近期刚好针对 3D 图形渲染技术中的两种常见技术正向渲染和延迟渲染进行了简单的了解，在此做个简单的记录，另外通过了解这些概念的同时也对光照相关的知识有了更深入的了解。
在此之前，虽然已经进行了相当多的开发实践，但由于场景受限，一直对于 3D 开发中的光照技术应用的偏少，不过恰好近期在学习了解性能相关的知识，在了解到渲染这方面的知识概念时，才意识到光照在 3D 开发中的是一个非常重要的技术。
解析 ECharts 设计：交互状态系统
· 阅读需 22 分钟
最后更新于 2023-01-09 23:37:00
通常，对于 Web 页面的交互处理中，尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的，但如果是普通对象呢？问题似乎变得复杂起来了，这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现，讨论一下在复杂场景中处理交互状态的设计方案，如何将命令式编码的复杂性通过声明式编码来降低，该怎样应对复杂场景下的状态叠加问题。
Web 3D 开发实践：计算物体在 2D 平面上的像素尺寸
· 阅读需 13 分钟
最后更新于 2022-12-20 00:09:00
这次是基于中秋节活动时开发 3D 月球组件的经验来开发 3D 地球组件，相比于上一次，这一次很多技术难点都有了现成的解决方案，可以说开发成本降低了三分之二之多，而这些额外的开发成本则 花费在隐藏在需求细节中的技术难点。这篇文章主要用来记录开发过程中遇到的一个比较有意义的技术难点，即 3D 空间中的物体投影到 2D 平面中时如何换算像素尺寸，在探索解决该难点的过程中，对 3D 与 2D 空间之间的关系有了一个更深刻的认识。
解析 ZRender 设计：事件系统
· 阅读需 13 分钟
最后更新于 2024-06-16 16:09:00
绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 ZRender 的源码来看看其事件系统是如何设计的。
Web 字体加载对页面产生的影响
· 阅读需 6 分钟
最后更新于 2023-12-16 21:32:00
通常，在 Web UI 设计过程中会用到定制字体，页面开发过程中会使用 CSS 引用（@font-face）该字体资源，不过由于字体资源较大，通常会对页面性能造成一些不利影响。
Web 3D 开发实践：3D 月球组件
· 阅读需 43 分钟
最后更新于 2022-09-17 17:23:01
恰逢中秋节，有机会参与到一项中秋运营活动的项目中，负责为业务方提供一个移动端场景投放的 3D 月球组件。由于一直接触的是 2D 可视化开发，对于 3D 开发（WebGL）的技术未有深入了解和实践经验，基于对现有社区主流技术的简单了解和团队成员的技术背景，遂选定基于 Three.js 进行开发以降低风险。
这篇文章是基于 3D 月球组件的开发实践，记录 3D 开发实践中了解的一些 Web 3D 技术知识和一些典型问题场景的解决方案。
精选资源：Web 前端工程化
· 阅读需 3 分钟
最后更新于 2024-03-12 19:33:00
精选资源
这是一个系列，收集不同领域相关的精选（高价值）内容，包括深入分析文章、视频、工具等。
探索一项新兴技术出现的背景、动机，尤其是其背后的设计哲学，更甚的是在不断的版本演进过程中遇到了什么问题，产生了什么思考，以及是如何决策并得到最优解。
Web 前端发展至今，已成为一个非常复杂的领域，纷繁复杂的工程化技术、工具为构建前端产品提供了有力的支持，通过深入探索工程化技术的发展路径、不同工具的设计理念与差异，了解 Web 前端发展趋势。