2b:null 2c:["$","title",null,{"children":"Path tween | Benbinbin | Observable"}] 31:T1206,{ const d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100"; // 过渡开始时的 source path 原始路径 const d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100"; // 过渡结束时的 target path 目标路径 /** * * 创建 svg 容器 * */ const width = 928; // svg 元素的宽度 const height = 500; // svg 元素的高度 // 返回的是一个包含 svg 元素的选择集 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); /** * * 绘制路径 * */ // 使用元素将线段路径绘制到页面上 svg.append("path") // 通过设置 CSS 的 transform 属性将元素移动到 svg 容器的中间 .attr("transform", "translate(180,150)scale(2,2)") // 只需要路径的描边作为折线，不需要填充，所以属性 fill 设置为 none .attr("fill", "none") // 设置描边颜色，采用 "currentColor" 默认颜色（继承自父元素，这里是黑色） .attr("stroke", "currentColor") .attr("stroke-width", 1.5) // 设置描边宽度 // 通过设置 `` 元素的属性 `d` 绘制出路径的原始形状 .attr("d", d0) // 设置过渡动效（通过更改 `` 的属性 d 实现） // 通过 selection.transition() 创建过渡管理器 // 过渡管理器和选择集类似，有相似的方法，例如为选中的 DOM 元素设置样式属性 // 具体参考官方文档 https://d3js.org/d3-transition // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-transition .transition() .duration(2000) // 设置过渡的时间 // 使用过渡管理器方法 transition.on(typeNames[, listener]) 监听过渡所分发的（自定义）事件，并执行相应的回调操作 listener // 这里监听 `"start"` 事件，它在过渡开始被分发，然后回调函数 repeat() 会被执行 .on("start", function repeat() { // 在回调函数中 this 指向（在过渡管理器所绑定的选择集合中）当前所遍历的元素 // 在这里的过渡管理器所绑定的选择集中只有一个 `` 元素 // 通过方法 d3.active(node[, name]) 获取指定元素的指定名称的执行中的过渡管理器 // 使用过渡管理器方法 `transition.attrTween(attrName[, factory])` 设置元素的属性 `attrName`，可以自定义插值器 `factory` 用于进行插值计算，即计算过渡期间属性 `attrName` 在各个时间点的值 // 这里更改的是 `` 元素的属性 `d`，自定义了插值函数 pathTween() 该函数的具体代码实现可以查看 👇 下一个 cell // 💡 另一类似的方法是 `transition.attr(attrName, value)` 它也是用于设置元素的属性 `attrName`，但直接设置了目标值 `value`（过渡结束时的最终值），而不需要设置过渡期间各个时间点的值（因为 D3 会根据属性值的数据类型，自动调用相应插值器） // 关于方法 `transition.attr()` 和 `transition.attrTween()` 的详细介绍可以参考这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-transition#过渡参数配置 d3.active(this) // 这里的过渡动画的目的将路径形状从 d0 变换为 d1 .attrTween("d", pathTween(d1, 4)) // 然后通过 `transition.transition()` 基于原有的过渡管理器所绑定的选择集合，创建一个新的过渡管理器 // 新的过渡管理器会**继承了原有过渡的名称、时间、缓动函数等配置** // 而且新的过渡会**在前一个过渡结束后开始执行** // 一般通过该方法为同一个选择集合设置一系列**依次执行的过渡动效** .transition() // 同样使用方法 `transition.attrTween()` 设置 `` 元素的属性 `d` // 这里的过渡动画的目的将路径形状从 d1 恢复为 d0 .attrTween("d", pathTween(d0, 4)) // 再使用创建一个过渡管理器（它会接着上一个过渡动画结束时触发） .transition() // 又再一次调用 repeat() 函数 .on("start", repeat); // 函数 repeat() 的作用是先将路径的形成再一次从 d0 切换为 d1，然后再恢复为 d0，最后又递归调用自身，形成循环动画，所以过渡动画的最终效果是路径在 d0 和 d1 形状之间不断切换 }); return svg.node(); }32:T15b1,// 该函数称为插值器工厂函数 interpolator factory，它生成一个插值器 // 💡 D3 在 d3-interpolate 模块提供了一些内置插值器，具体可以查看官方文档 https://d3js.org/d3-interpolate // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-transition#插值器 // 该函数接收两个参数，第一个参数 `d1` 是过渡的目标值/最终值，第二个参数 `precision` 是采样的精度 // 通过采样将路径从贝塞尔曲线转换为分段折线（便于插值计算） function pathTween(d1, precision) { // 返回一个自定义的插值器 return function() { // 函数内的 this 指向（在过渡管理器所绑定的选择集合中）当前所遍历的元素，在这个示例中选择集中只有一个 `` 元素 const path0 = this; // 通过 JS 原生方法 node.cloneNode() 拷贝该 DOM 元素 const path1 = path0.cloneNode(); // 将该 `` 元素的属性 `d` 设置为 `d1`（过渡的目标值/最终值），所以该元素的形状与过渡完成时的路径形状一样 path1.setAttribute("d", d1); // 使用方法 SVGGeometryElement.getTotalLength() 获取 `` 元素的长度（以浮点数表示） const n0 = path0.getTotalLength(); // 过渡起始时路径的总长度 const n1 = path1.getTotalLength(); // 过渡结束时路径的总长度 // Uniform sampling of distance based on specified precision. // 基于给定的精度 precision 对（过渡前）path0 和（过渡后）path1 两个路径进行均匀采样 // 💡 可以得到一系列配对的采样点（它们分别是路径上某一点的起始状态和最终状态） // 💡 然后为**每对采样点（已知起始状态和最终值）构建一个插值器**，用于实现路径切换动画 // 用一个数组 distances 来存储采样点（相对于路径的）位置，每一个元素都表示一个采样点 // 即每个元素/采用点都是一个 0 到 1 的数字，它是采样点到该路径开头的距离与**该路径总长度**的比值（占比） // 💡 使用相对值来表示采样点的位置，以便将采样点进行配对 const distances = [0]; // 第一个采样点是路径的起点 // 对采样的精度/步长进行标准化，使用它进行迭代采样就可以得到采样点的相对（总路径）位置 // 其中 precise 的单位是 px 像素，是采样精度的绝对值 // 通过精度与路径的总长度作比 precise / Math.max(n0, n1) 将精度从绝对值转换为相对值 // 其中路径总长度是基于变换前后最长的路径，以保证在较长的路径上的采样密度（数量）也是足够 const dt = precision / Math.max(n0, n1); // 通过 while 循环进行采用，每次距离增加一个标准化的步长 dt let i = 0; while ((i += dt) < 1) distances.push(i); distances.push(1); // 最后一个采样点是路径的终点 // Compute point-interpolators at each distance. // 遍历数组 distances 为不同的采样点构建一系列的插值器 const points = distances.map((t) => { // t 为当前所遍历的采样点的位置的相对值（与它所在的路径总长度的占比） // 通过 t * n0 或 t * n1 可以求出该采样点距离 path0 或 path1 路径的起点的具体距离 // 再使用 SVG 元素的原生方法 path.getPointAtLength(distance) 可以获取距离路径起点特定距离 distance 的位置的具体信息 // 具体可以参考 https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength // 该方法返回一个 DOMPoint 对象，它表示坐标系中的 2D 或 3D 点，其中属性 x 和 y 分别描述该点的水平坐标和垂直坐标 // 具体可以参考 https://developer.mozilla.org/en-US/docs/Web/API/DOMPoint // 在 path0（过渡开始时的路径）上的采样点作为插值的起始状态 const p0 = path0.getPointAtLength(t * n0); // 在 path1（过渡结束时的路径）上的采样点作为插值的最终状态 const p1 = path1.getPointAtLength(t * n1); // 所以 [p0.0, p0.y] 是插值的起点的坐标值，[p1.x, p1.y] 是插值的终点的坐标值 // 这里使用 D3 所提供的内置通用插值器构造函数 d3.interpolate(a, b) 来构建一个插值器 // 它会根据 b 的值类型自动调用相应的数据类型插值器 // 具体可以参考这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-transition#通用类型插值器 // 这里为每个采样位置构建出一个插值器，然后在过渡期间就可以计算出特定时间点该点运动到什么地方（即它的 x，y 坐标值） return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]); }); // 插值器最后需要返回一个函数，它接受标准时间 t 作为参数（其值的范围是 [0, 1]） // 返回的这个函数会在过渡期间被不断调用，用于生成不同时间点的 `` 元素的属性 `d` 的值 // 当过渡未结束时（标准化时间 t < 1 时），通过调用一系列的插值器 points 计算各个采样点的运动到何处，并使用指令 `L` 将这些点连起来构成一个折线 // 而过渡结束时（标准化时间 t = 1 时），将路径替换为真正的形状 d1（而不再使用采样点模拟生成的近似形状） return (t) => t < 1 ? "M" + points.map((p) => p(t)).join("L") : d1; }; }33:[] 2f:{"id":"a3bdc3d306bbc43a","slug":"path-tween","title":"Path tween","thumbnail":"0b95a8d7facb517df4861603e0b656aa844cc2bd2e5ee5c3d64ca31e0b96f2ac","access_level":"public","create_time":"$D2024-02-16T06:55:08.641Z","update_time":"$D2024-08-28T08:07:03.495Z","view_time":null,"first_public_time":"$D2024-02-16T06:55:08.641Z","fork":{"id":"52ca3d00b7e42137","slug":"path-tween","title":"Path tween","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"f94d12fc57537f9f","slug":"line-chart","title":"Line Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Path tween","cells":[{"id":0,"value":"# Path tween\n路径切换补间动画\n\n该示例演示了如何使用 SVG `` 元素的[属性 `getPointAtLength`](https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength) 对路径进行插值，以创建路径切换的补间动画。\n\n为了便于插值，对（过渡开始时的）source path 原始路径和（过渡结束时的）target path 目标路径进行均匀采样（可配置采样的精度，此处为 4px），在过渡期间将曲线替换为分段的 linear curve 线性曲线（实际是将采样所得的相邻数据点相连，形成一系列的线段）或 *polyline 折线*。过渡完成后，再将 `` 恢复为原始的三次贝塞尔曲线。\n\n这种实现路径切换补间动画的方法通用性很强，它适用于任何类型的路径（无论是曲线还是折线，只要路径可以通过 `` 元素的属性 `d` 来表示即可）。\n\n另外如果要制作**形状切换的补间动画**请参见：[shape tweening](/@benbinbin/shape-tweening)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"