Cytoscape.js 核心视图动画完全指南：从 `cy.animate()` 平移缩放到动画队列与缓动原理

数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载本指南以 documentation/md/core/animate.md 为核心系统讲解 Cytoscape.js 中针对**核心实例core**的动画 API手动平移pan与缩放zoom、将视口适配到指定元素fit、动画队列queue、缓动函数easing与生命周期控制。读者学完后可以独立编写视口平滑过渡、元素聚焦高亮等交互动画并理解动画在渲染循环中的底层调度机制。一、快速上手两个官方示例cy.animate()是核心core与元素collection共用的动画入口。针对核心实例动画作用的对象是视口viewport——即整个画布的平移量与缩放级别针对元素集合动画作用的则是位置与样式见第五节。示例 1手动平移与缩放cy.animate({ pan: { x: 100, y: 100 }, zoom: 2 }, { duration: 1000 });pan: { x, y }目标平移量单位是模型坐标model co-ordinates。动画期间视口会从当前 pan 平滑移动到{x: 100, y: 100}。zoom: 2目标缩放级别。动画期间缩放值会从当前值平滑过渡到2。第二个参数duration: 1000指定动画时长毫秒。当同时给出pan与zoom时二者在同一段动画内同步插值形成边平移边缩放的组合过渡效果。如果动画目标是zoom或pan在动画的每一帧中视图都会触发pan、zoom、viewport事件方便你监听视口变化详见第四节。示例 2适配Fit到指定元素var j cy.$(#j); cy.animate({ fit: { eles: j, padding: 20 } }, { duration: 1000 });fit.eles要适配到视口内的元素集合可以是单个元素、集合或选择器。fit.padding元素边界与视口边缘之间保留的空白像素。执行后视口会自动计算一个恰好容纳这些元素 边距的平移量与缩放级别并平滑动画到该状态等效于带动画的cy.fit(eles, padding)。二、动画属性properties与参数params详解cy.animate( properties, params )的两个参数在源码中会被合并处理src/define/animation.mjs 中properties util.extend( {}, properties, params )因此以下属性既可以写在第一个对象里也可以写在第二个对象里第二个对象的同名键会覆盖第一个。2.1 视口类属性核心实例专用属性类型说明pan{ x, y }目标平移量模型坐标。若同时指定了panBypanBy会优先被换算为pan当前 pan 偏移量panBy{ x, y }相对当前平移位置的偏移量源码会将其转换为绝对pan见 src/define/animation.mjszoomnumber \| object目标缩放级别。若为普通数值动画期间会受minZoom/maxZoom约束见 src/core/animation/step.mjs若为对象含level与position会先通过getZoomedViewport()换算为最终的 pan/zoomcenter或centre{ eles }将指定元素集合居中源码通过getCenterPan( eles, zoom )换算为pan见 src/define/animation.mjsfit{ eles, padding }将视口适配到元素集合通过getFitViewport( eles, padding )同时换算pan与zoom见 src/define/animation.mjs从源码可以看到这些属性具有优先级覆盖关系panBy覆盖pan→center覆盖pan→fit同时覆盖pan与zoom→ 对象形式的zoom覆盖zoom与可能的pan。写多个互斥属性时后者生效。2.2 通用动画参数参数类型/取值默认值说明durationnumber \| slow \| fast400动画时长毫秒。源码中slow被解析为600fast被解析为200见 src/define/animation.mjsdelaynumber0动画开始前的延迟毫秒数。存在delay时动画在延迟期间不更新任何属性见 src/core/animation/step.mjsqueuebooleantrue是否将动画加入队列在已有动画时排队执行而非立即打断当前动画easingstring \| arraylinear缓动函数名称或形如[cubic-bezier, t1, p1, t2, p2]、[spring, tension, friction]的数组见下文completefunction—动画完成时progress 1触发的回调stepfunction—动画每一帧更新后触发的回调形如step( now )framefunction—每一帧动画被应用前触发的回调完整的缓动函数清单定义在 src/core/animation/easings.mjs包括linear、ease、ease-in、ease-out、ease-in-out以及 sine/quad/cubic/quart/quint/expo/circ 系列的ease-in-*、ease-out-*、ease-in-out-*变体还有带参的spring与cubic-bezier。缓动函数在解析时复用了样式系统对transition-timing-function的解析逻辑见 src/core/animation/step.mjs。带参缓动示例// 弹簧效果tension250, friction30默认时长参与弹簧生成 cy.animate({ pan: { x: 200, y: 0 } }, { duration: 1000, easing: [spring, 250, 30] }); // 自定义三次贝塞尔曲线 cy.animate({ zoom: 1.5 }, { duration: 800, easing: [cubic-bezier, 0.1, 0.7, 0.1, 1] });三、动画队列与生命周期控制3.1 队列行为cy.animate()默认将动画排队执行如果当前已有动画在播放新动画会进入队列待当前动画完成后再播放。这一行为由 src/define/animation.mjs 中的判断ele.animated() (properties.queue undefined || properties.queue)决定——即只有当前正处于动画中时才排队若当前空闲则立即播放。若希望新动画立刻打断当前动画可显式传入queue: false。3.2 手动控制核心实例同样拥有与元素集合一致的动画控制方法定义于 src/core/animation/index.mjscy.stop( clearQueue, jumpToEnd )停止当前动画。clearQueue为真时同时清空队列中尚未播放的动画jumpToEnd为真时动画直接跳到终点源码将其duration置 0下一帧即完成否则立即从当前位置终止。停止后源码会主动调用cy.notify(draw)触发重绘见 src/define/animation.mjs。cy.clearQueue()仅清空队列不影响正在播放的动画。cy.animated()返回当前是否存在正在播放的动画。cy.delay( time, complete )创建一个仅起等待作用的占位动画常用于编排动画序列的节奏其内部实现为一次duration与delay均为time的animate调用见 src/define/animation.mjs。此外通过cy.animation( properties, params )可以创建但不立即播放的Animation对象之后手动调用其play()、pause()、progress()、reverse()、promise()等方法精细控制。这些方法各自的详细说明见 documentation/md/animation/play.md、documentation/md/animation/pause.md、documentation/md/animation/reverse.md、documentation/md/animation/progress.md 与 documentation/md/animation/promise.md。组合示例——缩放聚焦并等待完成var ani cy.animation({ zoom: 2, center: { eles: cy.$(#j) } }, { duration: 1200, easing: ease-in-out }); ani.play().promise(complete).then(function(){ console.log(缩放聚焦动画已完成); });四、视口动画期间的监听事件当动画正在更新pan或zoom时每一帧都会触发相应事件见 src/core/animation/step.mjs平移更新时触发pan缩放更新时触发zoom缩放值同时被钳制在minZoom与maxZoom之间二者任一发生即触发viewport。因此你可以在动画进行中实时响应视口变化例如同步更新画布外的比例尺或坐标指示器cy.on(viewport, function(){ document.querySelector(#status).textContent pan: cy.pan().x.toFixed(1) , cy.pan().y.toFixed(1) | zoom: cy.zoom().toFixed(3); }); cy.animate({ pan: { x: 300, y: 150 }, zoom: 1.8 }, { duration: 2000 });五、延伸元素集合的 animate与 core 的差异虽然本指南聚焦核心实例但同一 API 也作用于元素集合src/collection/animation.mjs 同样导出了animate/animation/animated/clearQueue/delay/stop。两者在 src/define/animation.mjs 中共享同一实现差异在于属性解释元素动画支持position目标位置、renderedPosition以渲染坐标指定位置源码会借助当前 zoom/pan 反算为模型坐标见 src/define/animation.mjs、style/css目标样式见 documentation/md/collection/animate.md元素处于locked()状态时位置动画不会生效见 src/core/animation/step.mjs样式动画在每帧通过style.overrideBypass()以 bypass 方式写入动画结束后样式值会保留在目标值上见 src/core/animation/step.mjs。典型用法——节点移动并改变样式cy.$(#a).animate({ position: { x: 200, y: 200 }, style: { background-color: #ff0000 } }, { duration: 800, easing: ease-out });六、底层原理动画循环与逐帧调度理解cy.animate()的底层调度有助于写出更流畅的交互动画注册到动画池调用animate()时每个目标都会创建Animation实例src/animation.mjs记录起始状态startPan/startZoom/startPosition与目标状态然后通过hook()加入目标的当前动画列表或队列并注册到核心的动画池cy.addToAnimationPool()见 src/core/animation/index.mjs。无样式headless环境下动画池会被跳过以节省开销。动画循环startAnimationLoop()决定调度方式——若渲染器存在且实现了beforeRender则把逐帧步骤挂到渲染器的beforeRender钩子上与绘制同步执行否则如 headless 环境退化为基于requestAnimationFrame的自循环见 src/core/animation/index.mjs。逐帧推进每一帧stepAll()遍历动画池当前列表为空时从队列取出下一个动画src/core/animation/step-all.mjs首次运行通过startAnimation( ele, ani, now, isCore )计算startTimesrc/core/animation/start.mjs随后step()依据(now - startTime) / duration计算进度百分比用缓动函数对 pan/zoom 插值并写入视口src/core/animation/step.mjs动画结束后从当前列表移除并触发complete回调同时cy.notify(draw)通知渲染器重绘src/core/animation/step-all.mjs。由此可以推导出几个实用结论动画进度由时钟时间差驱动因此浏览器标签页最小化时动画不会累积帧数恢复后依然与真实时间同步duration: 0时进度直接置 1动画瞬间完成可用于无动画的即时跳转多个元素/核心同时动画时共享同一个循环性能开销集中在一轮stepAll内。七、相关资源本文依据的核心文档documentation/md/core/animate.md核心动画实现src/core/animation/index.mjs、src/core/animation/step-all.mjs、src/core/animation/step.mjs、src/core/animation/easings.mjs动画与元素动画的公共定义src/define/animation.mjs、src/animation.mjs、src/collection/animation.mjs元素动画文档documentation/md/collection/animate.md动画对象各方法文档见 documentation/md/animation/ 目录下的play.md、pause.md、stop.md、reverse.md、progress.md、apply.md、promise.md官方演示动画交互的完整示例documentation/demos/animated-bfs/BFS 遍历动画、documentation/demos/performance-tuning/大规模图渲染与动画调优赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐Cytoscape.js 动画延迟指南用 delay() 编排元素与核心视图的动画时序Cytoscape.js 动画延迟指南用 delay 编排元素与核心视图的动画时序 Cytoscape.js 是用于图可视化与分析的 Graph theory数据可视化Cytoscape.js 动画系统完全指南元素动画与视口动画的 API、控制方法与底层渲染原理Cytoscape.js 动画系统完全指南元素动画与视口动画的 API、控制方法与底层渲染原理 动画Animation是 Cytoscape.js 中让图数据可视化ATLauncher终极指南如何快速安装和管理Minecraft模组包ATLauncher终极指南如何快速安装和管理Minecraft模组包 想要体验Minecraft的无限可能但被复杂的模组安装过程困扰ATLauncher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考