ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Motion Canvas Core 3.x 演进全解:从信号系统、WebGL 渲染到播放架构的版本变迁指南

Motion Canvas Core 3.x 演进全解:从信号系统、WebGL 渲染到播放架构的版本变迁指南 图形学音视频前端【免费下载链接】motion-canvasVisualize Your Ideas With Code项目地址https://gitcode.com/gh_mirrors/mo/motion-canvas点击查看免费下载Motion Canvas 是一个以代码驱动动画创作的 Web 工具仓库描述为 Visualize Your Ideas With Code其核心引擎由 packages/coremotion-canvas/core提供。本指南以 packages/core/CHANGELOG.md 为骨架梳理 2.0.0 到 3.17.2 的核心演进脉络结合仓库源码解读信号、补间、线程、过渡、向量数学、插件与渲染等关键模块的实现原理。读完本文你将理解 Motion Canvas 核心 API 的来龙去脉、3.0 破坏性变更的迁移要点以及各版本新特性在源码中的落点便于按版本查阅文档、排查升级问题。一、如何阅读这份 Changelog版本管理与内容结构packages/core/CHANGELOG.md遵循 Conventional Commits 规范生成全文共 877 行覆盖从 2.0.02023-02-04到 3.17.22024-12-14的所有版本。每个版本条目按以下结构组织版本号与发布日期如## 3.17.2 (2024-12-14)可链接到版本对比页面外部链接本文不展开。Bug Fixes行为修正与缺陷修复通常带 PR/Issue 编号。Features新增功能按模块标注core、2d、ui、docs等。Code Refactoring内部重构。BREAKING CHANGES破坏性变更附带迁移说明这是升级时最需要关注的部分。值得注意的是该文件并非只记录core包自身的改动而是整个 monorepo 的变更在 core 包上的汇总——例如**2d:** support tweening emojis3.17.0、**ui:** timeline scrubbing3.12.0等跨包条目也会出现。3.13.0 条目甚至直接标注为 Version bump only for package motion-canvas/core表示该版本 core 无代码变更。从版本节奏看2023 年发布密集2.0.0 至 3.11.02024 年逐步放缓3.12.0 至 3.17.2当前仓库 packages/core/package.json 中motion-canvas/core的版本号为3.17.2与 Changelog 最新条目一致。二、2.x 时代信号系统与基础能力奠基2.0.0 – 2.6.02.1 里程碑2.0.0 的 monorepo 化与核心重构2.0.02023-02-04是一次大规模奠基版本包含大量条目可以从源码中看到其留下的印记切换到信号signals系统Changelog 记录 switch to signals#64与 merge properties and signals#124。如今 packages/core/src/signals 目录下的createSignal、createComputed、createEffect、createDeferredEffect等 API 即源自这一时期。createSignal的签名在 createSignal.ts 中为createSignal(initial?, interpolation deepLerp, owner?)默认插值函数为deepLerp这解释了为何信号可以无缝参与补间动画。切换构建与测试工具链记录 switch to Vite#28、switch to vitest#99。当前 packages/core/package.json 的 devDependencies 中仍保留vitest: ^0.34.6测试脚本为vitestdev/build脚本则使用tspc。缓存caching机制从 introduce basic caching#68到 add advanced caching#69、world space cache3.2.0、restrict size of cache canvas3.3.0缓存体系持续演进核心目标是在静态场景下避免重复绘制。基础组件与工具新增Grid、Video、Text/Image、CodeBlock、Layout、polyline 等节点以及 add random number generator#116——即今天位于 packages/core/src/scenes/Random.ts 的Random类。线程与并发渲染make exporting concurrent 与 support multiple players#128确立了多播放器与并发导出的架构方向。2.2 2.1.0 – 2.6.0补间、数学与时间工具补齐2.1.0新增useDuration助手#226。其实现见 useDuration.ts调用scene.timeEvents.register(name, thread.time())注册时间事件并返回其时长秒使动画可以在某个事件点开始并持续指定时长。2.2.0引入项目变量project variables#255允许在项目层面定义跨场景复用的变量。2.3.0新增debug辅助函数、更多缓动函数easing functions并禁止对undefined值进行补间#257从类型层面杜绝非法补间。2.4.0新增Matrix2D类型#340、重复事件名报错#341、信号默认计算值#259。2.5.0新增fadeTransition#384、spring弹簧插值#356位于 tweening/spring.ts、range函数的step参数#373。同时修复颜色补间到null、浮点误差导致acos越界等问题。2.6.0为节点添加save/restore方法#406对应 2d 包并引入 CORS 代理#357。三、3.0.0破坏性变更与迁移指南重点章节3.0.02023-02-27是 core 包历史上最重要的一次破坏性更新Changelog 给出了完整的迁移说明升级时务必逐条核对3.1 类名与 API 重命名为避免命名冲突以下类型名称发生变更旧名称新名称说明TextTxt文本节点ImageImg图片节点Rect类型BBox轴对齐包围盒类型见 types/BBox.tsTweenFunctionInterpolationFunction插值函数[type]Tween[type]Lerp如colorTween→colorLerpInterpolationFunction旧TimingFunction时序函数与 CSS 规范对齐Node的缓存相关方法同步更名getCacheRect→getCacheBBox、cacheRect→cacheBBox、fullCacheRect→fullCacheBBox。CodeBlock.selectionOpacity属性更名为CodeBlock.unselectedOpacity。3.2 项目结构从bootstrap到Project类3.0.0 之前通过bootstrap函数初始化项目3.0.0 之后改为在项目文件中导出Project实例。项目文件示例如下来自 Changelog 3.0.0 迁移说明import {Project} from motion-canvas/core/lib; import example from ./scenes/example.scene; export default new Project({ name: project, scenes: [example], // 与 bootstrap() 相同的其他选项均可用 });同时构建工具链发生变化需要安装 Vite 与官方插件npm i -D vite motion-canvas/vite-plugin并在项目根目录创建vite.config.tsimport {defineConfig} from vite; import motionCanvas from motion-canvas/vite-plugin; export default defineConfig({ plugins: [motionCanvas()], });Motion Canvas 的类型不再全局注入需要在src目录下创建motion-canvas.d.ts/// reference typesmotion-canvas/core/project /3.3 场景导入方式与设置迁移场景文件不再要求遵循[name].scene.tsx命名模式导入时必须使用?scene查询参数import example from ./scenes/example?scene;makeProject不再接受部分设置background、audioOffset等设置改由项目 meta 文件存储后续 3.3.0 又增加了 preserve custom fields in meta files 能力。3.4 其他修复3.0.0 同时修复了半透明背景清除#424、Vector2.exactlyEquals#437、仅渲染指定范围内帧#436等问题并重构了播放架构new playback architecture#402。从源码看Project类的ProjectSettings接口仍保留了name、scenes要求FullSceneDescription[]、plugins支持字符串形式动态导入等核心字段见 app/Project.ts。四、3.1 – 3.11播放、信号与动画原语持续增强4.1 3.1.0演示模式与播放状态修复3.1.0 引入演示模式presentation mode#486、BBox.intersects#485、navigate to slide source#490修复播放状态、相对时间计算与多异步播放器支持#450。对应实现可见 app/Presenter.ts 与 app/PlaybackManager.ts。4.2 3.2.0世界空间缓存与向量类型3.2.0 引入世界空间缓存world space cache#498并在Vector2方法中全面采用PossibleVector2#478——后者允许传入[x, y]数组或{x, y}对象大幅提升 API 易用性。4.3 3.3.0tree shaking 与插件架构3.3.0 是性能关键版本为core引入 tree shaking#523修复于 3.3.4 的 #555限制缓存画布尺寸#544并支持按场景分组输出#477。同时将 Vite 从 v3 升级到 v4#495。插件的雏形也在此阶段出现详见 3.4.0。4.4 3.4.0插件架构与元字段3.4.0 落地插件架构#564、自动 meta 字段#565与Vector2类型扩展#579。插件体系如今位于 packages/core/src/plugin包含Plugin接口、DefaultPlugin、makePlugin工厂meta 字段体系位于 packages/core/src/meta提供NumberMetaField、ColorMetaField、EnumMetaField、Vector2MetaField等 12 类字段供编辑器渲染可配置面板。4.5 3.6.0循环 API 家族成形3.6.0 为core集中补充了循环与数学能力loopFor(seconds, factory)#650按秒数循环执行生成器实现见 flow/loopFor.ts。其语义是生成器会完整执行完一轮即使超时也允许本轮结束因此实际时长可能略长于给定秒数循环结束时会用thread.time(targetTime)把时间校准到目标时刻。loopUntil(event, factory)#624循环直到指定时间事件触发实现上直接委托loopFor(useDuration(event), factory)见 flow/loopUntil.ts。线程暂停thread pausing#639、SignalGenerator链式调用改进#651、fromDegrees方法#622、DEG2RAD/RAD2DEG常量#630、弧线插值辅助方法#640。fromDegrees、DEG2RAD、RAD2DEG等数学实现在 types/Vector.ts 与 utils/math.ts 中可查证。4.6 3.7.0 – 3.9.0导出器、设置与插件钩子3.7.0自定义导出器最终定型#660、meta 字段描述#664、修复 Color 被 tree shaking 误删#666。3.8.0插件新增钩子#679、检查器支持显示数组值#670。3.9.0应用设置application settings#697、Random.gauss高斯分布函数#709、所有入口全量导出#710、新插件钩子#723、修复项目variables#690。Random.gauss可在 scenes/Random.ts 中查证它使随机数生成支持正态分布适合模拟自然抖动。4.7 3.10.0 – 3.11.0路径、向量与音频 HMR3.10.0Path组件#700属于 2d 包、预览坐标显示#737、BBox变换接受PossibleMatrix2D#770、向量rotate与polarLerp方法#756见 types/Vector.ts、引用辅助方法#775。3.11.0音频热更新hot module replacement for audio#793、slideTransition支持Origin参数#801、渲染剩余时间估算#795对应 app/TimeEstimator.ts、防御恶意事件名#819。slideTransition现在的双重重载签名Direction或Origin见 transitions/slideTransition.ts默认方向为Direction.Top、默认时长 0.6 秒实现中通过useScene().getRealSize()计算场景真实尺寸并做双场景平移。五、3.12 – 3.17编辑器、Shader 与渲染管线现代化5.1 3.12.0编辑器大版本3.12.0 主要是 UI 与 2d 能力增强嵌套Txt节点#861、applyState支持补间#859、箭头键控制音频音量#856、实验性特性开关#876、编辑器插件正式引入#879、时间线拖拽 scrubbing#862对应 packages/ui/src/contexts/timeline.tsx。core 侧还补充了与Origins对应的Vector2静态属性#855、获取场景真实尺寸的 API#889、过渡期间场景排序#832以及禁用循环模式下 seek 到时间线开头#823。3.12.1 修复依赖打包#8973.13.0 为纯版本号 bump。5.2 3.14.0WebGL Shader 与内置类型迁移3.14.0 是渲染管线的分水岭引入 WebGL shaders#920并将内置类型转换为 WebGL#929。对应的着色器源码位于 packages/core/shaderscommon.glsl、fragment.glslWebGL 上下文管理在 app/SharedWebGLContext.ts。3.14.1 修复自定义字段克隆与 FPS 正数限制#937。5.3 3.15.0流程控制与向量能力升级3.15.0 亮点集中在 corespawn函数#951并发执行任务见 threading/spawn.ts。它接收ThreadGenerator或生成器函数通过useThread().root.spawn(task)挂到当前线程根部并发运行可用join等待其完成。waitTransition#983空转过渡见 transitions/waitTransition.ts。它在过渡期间将前后场景叠加配合场景内对象动画实现自定义过渡效果默认时长 0.6 秒previousOnTop控制旧场景是否渲染在上层。loop函数改进#952、Vector2类改进#985、矩阵到 OpenGL 转换优化#984、错误日志改进#953。2d 侧新增Code节点#946与代码包围盒辅助#948。3.15.1 优化了帧保存到磁盘的性能#10073.15.2 修复过渡缩放#1017与演示中止时播放状态重置#1016。5.4 3.16.0 – 3.17.2信号效果与收尾修复3.16.0信号数学运算vector signal 的数学操作#1030、信号效果signal effects#1043——新增createEffect/createDeferredEffect等基于依赖追踪的副作用 API位于 packages/core/src/signals修复无效时间事件值处理#1044。3.17.0支持 emoji 补间#1085、强制有效 chroma-js 版本#1086。颜色系统依赖chroma-js这一点可从 packages/core/package.json 的 dependencieschroma-js: 2.4.2得到印证。3.17.22024-12-14修复 rollup 打包顺序问题#4743b92也是当前仓库 core 包的最新版本。六、从 Changelog 反推核心模块地图将 Changelog 中的特性关键词与当前源码对应可以得到motion-canvas/core的功能地图方便按需查阅功能域源码位置对应版本线索信号系统packages/core/src/signals2.0.0 switch to signals3.16.0 signal effects补间与插值packages/core/src/tweening2.5.0 spring2.0.0 命名重构流程控制packages/core/src/flow3.6.0 loopFor/loopUntil3.15.0 loop 改进线程模型packages/core/src/threading3.6.0 thread pausing3.15.0 spawn过渡动画packages/core/src/transitions2.5.0 fadeTransition3.15.0 waitTransition场景与时间事件packages/core/src/scenes2.1.0 useDuration3.12.0 场景排序类型系统packages/core/src/types2.4.0 Matrix2D3.0.0 BBox 更名播放与渲染packages/core/src/app3.0.0 播放架构3.14.0 WebGL插件体系packages/core/src/plugin3.4.0 插件架构meta 字段packages/core/src/meta3.4.0 自动 meta 字段3.7.0 字段描述WebGL 着色器packages/core/shaders3.14.0 webgl shaders七、升级实践建议结合 Changelog 中的破坏性变更与修复记录跨版本升级时可参考以下检查清单3.0 之前升级到 3.x重点处理Text→Txt、Image→Img、Rect→BBox更名将bootstrap改写为Project实例导出场景导入追加?scene参数创建motion-canvas.d.ts类型引用文件并安装vitemotion-canvas/vite-plugin参考 template 与 packages/create 中的模板。3.3 – 3.4 之间关注 tree shaking 行为变化motion-canvas/core在 package.json 中声明了sideEffects: false与插件 API 的引入自定义导出器、meta 字段定义从 3.7.0 起趋于稳定。3.14 之后内置类型逐步迁移到 WebGL涉及渲染结果与 Shader 相关的行为变化createEffect/createDeferredEffect等信号效果 API 从 3.16.0 起可用适合替代手动订阅的副作用写法。每个补丁版本留意 Bug Fixes 中与播放状态3.1.0、3.15.2、渲染范围3.0.0、缓存3.3.0相关的修复这些通常会影响运行时行为的一致性。结语packages/core/CHANGELOG.md不仅是一份版本记录更是理解 Motion Canvas 架构演进的路线图从 2.x 的信号与缓存奠基到 3.0.0 的命名与项目结构大重构再到 3.14.0 的 WebGL 渲染管线与 3.16.0 的信号效果每一次特性条目都可以在 packages/core/src 的对应模块中找到实现落点。将 Changelog 与源码、测试如 types/Vector.test.ts、tweening/interpolationFunctions.test.ts对照阅读是掌握该项目核心机制最有效的路径。赞分享图形学音视频前端【免费下载链接】motion-canvasVisualize Your Ideas With Code项目地址https://gitcode.com/gh_mirrors/mo/motion-canvas点击查看免费下载相关推荐Jellyfin专属FFmpeg增强版jellyfin-ffmpeg如何彻底提升媒体播放体验Jellyfin专属FFmpeg增强版jellyfin ffmpeg如何彻底提升媒体播放体验 jellyfin ffmpeg是专为Jellyfin媒体服务器音视频视频处理音频处理图像处理flutter_svg 版本演进与 2.x 架构重构深度解析从 CHANGELOG 看 SVG 渲染能力变迁flutter_svg 版本演进与 2.x 架构重构深度解析从 CHANGELOG 看 SVG 渲染能力变迁 flutter_svg 是 Flutter 生态跨平台移动开发UI组件开发工具async 库版本演进全解析从 v1.0.0 到 v3.2.x 的架构变迁与升级迁移指南async 库版本演进全解析从 v1.0.0 到 v3.2.x 的架构变迁与升级迁移指南 导读 本文以本仓库根目录下的 CHANGELOG.md https:异步编程后端上一篇二进制优化终极指南用DEAP遗传算法解决组合优化难题下一篇从零开始学习MrDoc新手必看的10个实用技巧创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表