皮皮网

1.UE4 LevelSequence源码解析
2.Vert.x 源码解析(4.x)——Future源码解析
3.async-validator源码解析（二）：rule
4.Vue2.6x源码解析（一）：Vue初始化过程
5.PIXI.JS源码解析：Ticker.js
6.源码解析，自解Glide加载GIF图的析源析源原理竟然这么简单

UE4 LevelSequence源码解析

       本文旨在总结UE4中LevelSequence工具的学习理解，内容涉及LevelSequence结构、码解码整插值数据提取及数据导出实例，自解同时也提供了一些实用技巧。析源析源

       LevelSequence在UE4中分为运行时Runtime和编辑器Editor两部分。码解码整源码交易 eRuntime中，自解主要文件位于/Runtime/MovieScene和/Runtime/MovieSceneTracks文件夹下，析源析源包括了LevelSequence资产在关卡中的码解码整组成形式和播放设置。在Editor中，自解文件位于/Editor/Sequencer文件夹下，析源析源包含了Sequence的码解码整组成部分和通用方法。每个ALevelSequenceActor包含UMovieSceneSequence和ULevelSequencePlayer，自解前者存储数据，析源析源后者负责播放。码解码整

       UMovieSceneSequence和ULevelSequencePlayer的结构，展示了Sequence资产与当前场景之间的关系。Sequence数据按Actor组织，每个Actor可以持有多种UMovieSceneTrack，用于记录不同属性，所有Track均继承自UMovieScenePropertyTrack。Track由多个Section组成，Section由UMovieSceneChannel存储关键帧数据。

       LevelSequence的模拟过程由Evaluation实现，现在主要由EntitySystem负责，以支持多线程提高效率，具体解释见文章：Performance at scale: Sequencer in Unreal Engine 4. - Unreal Engine。

       在实际模拟中，关键数据的提取是重点。对于Transform等float类型数据，Sequence编辑器支持以曲线方式灵活调整关键值之间的变化过程。MovieSceneFloatValue结构体用于存储关键帧数据，通过访问该值即可获得对应数据。

       导出数据的实例是将Sequence内属性（如Transform）导出为曲线。首先获取LevelSequence资产，然后获取绑定的Actor。利用获取的MCPlugindz论坛源码Actor，可以进一步获得轨道，并将对应数据存储到曲线中。

       一些技巧包括：某些特殊Component在Sequence中作为同等层级存在，可通过此方式获取Component的Track；相对位置配置在Instance Data中，可通过变量获取对应数据；实践体验Sequence生成过程，建议通过/Editor/SequencerRecord入手，直观看到生成流程。

       参考文章包括：UE4 LevelSequence源码剖析（一）- 知乎、UE4 LevelSequence源码剖析（二）- 知乎、UE4 LevelSequence源码剖析（三）- 知乎、Performance at scale: Sequencer in Unreal Engine 4. - Unreal Engine。

Vert.x 源码解析(4.x)——Future源码解析

       在现代软件开发中，异步编程的重要性日益凸显，提升并发性能并处理大量并行操作。Vert.x，作为一款基于事件驱动和非阻塞设计的异步框架，提供了丰富的工具简化异步编程。本文将深入解析Vert.x 4.x版本的Future源码，理解其关键类和功能。

       1. 异步核心

       Vert.x的核心在于FutureImpl和PromiseImpl，它们是实现异步操作的关键。AsyncResult是通用接口，用于表示异步操作的结果，包含成功值或失败异常。

       2. Future类详解

       Future扩展了AsyncResult，提供了组合操作如join、any、all和map等功能。内部的FutureInternal主要负责添加监听器，FutureBase负责执行监听器和转换函数。

       具体来说，FutureImpl的onComplete方法接收一个handler，任务完成后执行，而tryComplete则在异步操作有结果时触发，最终调用用户指定的handler。

       相比之下，番茄娱乐源码Promise允许用户手动设置异步结果，PromiseImpl继承自FutureImpl，并增加了context获取功能。

       3. 实例与源码分析

       通过简单的入门实例，如独立使用Future，我们可以看到Vert.x如何通过创建PromiseImpl获取Future。源码分析显示，Promise.future获取Future，OnComplete用于添加监听，而complete方法则用于设置值并通知监听器。

       4. 深入源码

       在源码层面，addListener和emitSuccess方法在OnComplete中扮演重要角色。而complete方法，特别是tryComplete，是设置值并触发监听的关键。

       5. 总结

       总的来说，理解Vert.x中的Future，就是创建PromiseImpl获取Future，通过OnComplete添加监听器，然后通过Promise的complete方法设置值并通知监听器。后续还将深入探讨其他Future实现类，如all、any和map的原理。

async-validator源码解析（二）：rule

       async-validator源码解析（二）深入探讨rule模块，解析其内部的校验逻辑和依赖工具函数。本文将逐步揭开rule目录的面纱，以及util.js中关键的format和isEmptyValue方法。

       rule目录的核心是export的一系列校验方法，它们接受value、source、errors和options作为参数。value是当前字段的值，source是整个待校验的对象，而errors数组用于存储验证结果。options允许自定义验证消息。每种规则方法如required、pixhawx源码获取whitespace、range等，都有特定的验证功能，例如检查必填性、空白字符、数值范围等。

       format函数是个灵活的工具，根据传入参数的不同执行不同的格式化操作。而isEmptyValue则用于判断值是否为空，包括空字符串和空数组。

       在rule目录中，type.js规则尤其有趣，通过组合简单的判断，区分了值的多种类型，如整数、浮点数、数组等。

       后续文章将继续关注validator目录，完整揭示async-validator校验库的运作机制。点击github.com/MageeLin/asy.../analysis分支，探索每个文件的详细代码解析。

Vue2.6x源码解析（一）：Vue初始化过程

       Vue2.6x源码解析（一）：Vue初始化过程

       Vue.js的核心代码在src/core目录，它在任何环境都能运行。项目入口通常在src/main.js，引入的Vue构造函数来自dist/vue.runtime.esm.js，这个文件导出了Vue构造函数，允许我们在创建Vue实例前预置全局API和原型方法。

       初始化前，Vue构造函数在src/core/instance/index.js中定义，它预先挂载了全局API如set、delete等。即使不通过new Vue初始化，Vue本身已具备所需功能。

       当执行new Vue时，实际上是调用了_init方法，这个过程会在src/core/index.js的直播源码转卖initGlobalAPI(Vue)中初始化全局API和原型方法。接着，组件实例的初始化与根实例基本一致，包括组件构造函数的定义，以及组件的生命周期、渲染和挂载。

       组件初始化过程中，关键步骤包括数据转换为响应式、事件注册和watcher的创建。例如，组件的渲染函数会触发渲染方法，而watcher的更新则通过异步更新队列机制确保性能。

       在开发环境，Vue-template-compiler插件负责模板编译，然后runtime中的$mount方法负责实际的渲染和挂载。整个过程涉及组件的构建、渲染函数生成、依赖响应式数据的更新和异步调度。

PIXI.JS源码解析：Ticker.js

       本文聚焦于剖析PIXI.JS的核心模块，尤其探讨了Ticker.js文件中包含的功能实现，解释了Ticker和TickerListener如何协同工作以处理动画渲染和执行回调。

       在使用PIXI.JS时，初次接触的关键代码涉及实例化Application，该实例用于添加精灵图和创建动画。核心在于Application中的内部变量_ticker，它负责动画循环的执行。_ticker对象通过start方法启动循环，同时ticker.add方法允许将渲染函数添加到渲染队列中，确保每次循环时都能触发渲染函数，更新画布上的图像。

       Ticker.js作为核心模块，包含了Ticker和TickerListener的逻辑。ticker.add方法将渲染函数添加到渲染队列中，而ticker.start方法则启动循环，触发队列中的渲染函数执行。ticker.remove方法用于移除队列中的函数。UPDATE_PRIORITY.LOW参数允许用户调整回调函数的执行顺序。

       Ticker内部维护了一个队列，由_head和_tick变量管理。_head作为队列的源头，而_tick则负责循环执行，通过requestAnimationFrame实现。每次循环执行前，需要确保三个条件满足：_ticker已启动、_requestId为null以及队列中存在有效回调。当这三个条件满足时，循环得以启动并执行。

       每次循环时，_tick执行内部逻辑以更新图像。在循环过程中，_head.next指向下个回调，形成链式执行。_addListener方法用于内部管理回调函数的添加与移除，允许用户通过控制参数来影响回调函数的执行顺序与执行次数。

       TickerListener作为回调函数链的管理器，负责链接并执行一系列回调函数。当向应用实例中添加回调时，会自动插入到TickerListener队列中，确保在每次循环时按照特定顺序执行所有回调。TickerListener内部方法确保了回调的正确执行顺序与执行次数，同时提供了灵活的插入策略，允许用户根据需要调整回调函数的位置。

       总之，Ticker.js通过Ticker和TickerListener的协作，实现了高效、灵活的动画循环和回调执行机制，为开发者提供了强大的动画控制能力，简化了渲染和动画管理过程。

源码解析，Glide加载GIF图的原理竟然这么简单

       在探讨之前，让我们明确一点：Android的ImageView实际上并不支持直接加载GIF动图，因为ImageView基于Canvas绘制，而Canvas仅支持drawBitmap一次绘制一张。那么，Glide是如何巧妙地让ImageView展现出GIF动画的呢？

       让我们从Glide的源码入手，今天的主角是GifDrawable。这个类虽然有大约行代码，但理解其工作原理并非无迹可寻。首先，我们注意到一个开始播放第一帧的方法，这可能是入口点。

       代码结构中，当GIF有多帧时，会订阅特定事件。关键在于观察三句代码：一是递增帧位置，表明采用无限轮播算法；二是加载资源回调，通过Target接口来触发；三是消息传递，用Handler进行控制。

       在加载资源的回调中，我们看到消息机制在发挥作用。当接收到消息，会根据what参数进行处理。在handleMessage中，处理了延迟消息和清理消息。延迟消息会获取新帧数据并绘制到ImageView，同时清除旧帧，接着进入下一个帧的加载和清除过程。

       总结来说，Glide加载GIF的原理相当直观：GIF被解析为一系列，通过无限轮播，每次新帧的加载都触发一次请求。在完成绘制后，旧帧会被清除，然后继续下一轮的加载。整个过程通过Handler的消息传递机制驱动循环播放。以上内容摘自Android轮子哥的分享。

Navigation源码解析及自定义FragmentNavigator详解

       谷歌推出的Navigation主要目标是统一应用内页面跳转行为。使用方法简单，新项目选择Bottom Navigation Activity，系统自动生成页面逻辑。

       Navigation源码设计简洁，包含多个关键类。其中，NavHostFragment是直接在XML文件中定义的，其生命周期方法onCreate中直接创建了NavHostController，并通过findNavController暴露给外部调用者。NavHostController继承自NavController。在此过程中，通过navController获取NavigatorProvider并添加了两个Navigator：DialogFragmentNavigator和FragmentNavigator。NavController构造方法中还额外添加了两个Navigator，分别对应DialogFragment、Fragment和Activity的页面跳转。NavGraphNavigator用于在XML配置的navGraph与根节点文件中的startDestination之间实现跳转，功能单一。

       各个Navigator通过重写navigate方法实现各自的跳转逻辑。FragmentNavigator的关键实现在于注释1处，使用replace加载Fragment，这不符合实际开发需求。文章后续将解释如何自定义FragmentNavigator以避免Fragment在切换时执行生命周期。

       NavigatorProvider内部维护了一个HashMap存储相关Navigator信息，通过获取Navigator的注解Name作为键和getClass作为值进行存储。在onCreate方法中，mNavController调用了setGraph，解析XML配置的mobile_navigation节点信息文件，根据不同的节点各自解析。通过获取NavInflater进行解析，返回NavGraph，NavGraph继承自NavDestination，保存了所有解析出的节点信息。

       总结，通过NavHostFragment获取到NavContorl并存储了相关Navigator信息。通过各自navigate方法进行页面跳转，通过setGraph解析配置的页面节点信息并封装为NavGraph对象。其中，通过SparseArray存储Destination信息。

       自定义Navigator实现思路主要在于继承现有FragmentNavigator并重写其navigate方法，将replace方法替换为show和hide方法，完成Fragment切换。通过@Navigator.Name(value)注解标记自定义类为Navigator，加入NavigatorProvider中即可识别。自定义Navigator核心代码实现后，需调整mobile_navigation节点中的fragment为fixFragment，并删除布局文件中NavHostFragment节点信息，手动关联FixFragmentNavigator与NavControl，完成Fragment切换时生命周期不会重新执行。

vue3-ref源码解析

       本文深入解析了 Vue3 中的 ref 源码，主要探讨了 ref 的特性、实现原理以及与 reactive、effect 的关系。在阅读本文之前，建议先了解 reactive 和 effect 的基本概念和实现原理。

       reactive 函数能够创建响应式对象，通过 Proxy 实现响应式功能。当修改响应式对象时，Proxy 会通过 trigger 通知所有依赖的 effect 对象执行监听方法。然而，Proxy 不支持基础类型（如 number、string、boolean）作为入参。

       ref 对象是针对 reactive 不支持数据类型的一个补充，它支持基础类型响应式，并提供了更方便的对象替换操作。ref 对象在 value 属性的修改和获取时进行拦截，收集依赖并触发相关 effect 对象。

       ref 和 shallowRef 是两个主要的 ref 实现方式。ref 支持深度响应式，shallowRef 只支持浅层响应式。ref 的响应式行为通过将 value 属性转化为 reactive 对象来实现，同时存储原始值以判断是否发生修改。

       ref 对象内部使用 RefImpl 类实现，该类接收 raw 和 shallow 参数。当创建 ref 对象时，会检查入参是否为 ref 对象，如果是则直接返回。否则，ref 对象将通过 toReactive 方法将 raw 转化为 reactive 对象，然后存储在 _value 中，以实现深度响应式。

       ref 的 dep 属性与 effect 中的 dep 相关联，使得 ref 能够成为响应式对象。当获取或设置 value 时，ref 会通过 trackRefValue 和 triggerRefValue 方法触发响应式行为，分别在获取和设置值时收集和触发依赖。

       自定义 ref 方法 customRef 允许用户通过传入收集依赖和触发执行的工厂函数，实现更灵活的响应式控制。toRefs 和 toRef 方法提供了从 reactive 对象生成 ref 对象的便利接口，用于解决缓存属性值时失去响应式特性的问题。

       此外，ref 文件还包含了辅助方法，如 triggerRef 用于手动触发 ref 更改，unref 用于获取原始值。proxyRefs 方法将对象中所有 ref 属性值解构访问，仅对第一层属性有效。

       总之，ref 在 Vue3 中提供了一种灵活的响应式数据操作方式，支持基础类型响应式并提供了深度响应式支持。通过结合 reactive、effect 和内部的 dep 管理机制，ref 实现了高效的数据响应式处理。理解 ref 的源码有助于深入掌握 Vue3 中的数据响应式机制。