javascript - 同步过渡以使相邻形状一起移动的惯用方法是什么？

Question

假设我有一个像这样的任意路径:

[##########]

我也有一个这样的圆圈:o

我想将 o 保留在任意路径的顶端，所以它看起来像这样:

[##########]o

(假设o在路径对象的顶部和底部之间垂直居中)并且当路径增大或缩小时，o应始终保持在尖端。

[###############]o

最重要的是，当将变换应用于路径时，变换也应该相应地应用于圆 - 它们在运动时应该同步。

我尝试过将圆圈设为路径标记，但遇到了麻烦

• (a) 使其仅穿过路径的中心
• (b) 让它“粘”在最终位置
  (所有示例都让它围绕路径无限旋转，例如 this 和 this 和 this )

Answer 1

依次调用两个转换函数(每组形状一个)通常就足够了，因为浏览器运行代码所花费的时间远小于动画帧之间的延迟。

<小时/>

但是，如果您的动画足够复杂，两者之间存在明显的滞后，或者如果您正在进行大量会影响两个元素的复杂计算，则可以在一个选择上使用自定义补间函数，并在它选择其他形状并更新它(您需要在“外部”函数中选择它，以便在每次更新时调用的内部函数可以快速重新定位它以匹配新值)。

关于转换，保持协调的最简单方法是将两个元素放在 <g> 中。并改变群体而不是单个元素。

将这些想法放在一起，您可以得到如下所示的转换过程:

d3.selectAll("g.groups").transition().delay(time)
  .attr("transform", function(d,i){ /* Calculate new transform */ })
  .tween("stretch", function(d,i){
      /* Select the sub-elements, do all the calculations
         then create interpolators for both objects */

      var g    = d3.select(this);
      var path = g.select("path");
      var dot  = g.select("circle");

      var newEndPoint = /*** Calculate final position ***/;
      var offset = /*** distance from end point to center of circle ***/;


      var pathInterpolator = d3.interpolateString(
                 path.attr(d), 
                 /*** new path including new end point ***/
          );
      var dotInterpolator = d3.interpolateObject( 
                 {cx=dot.attr("cx"), cy=dot.attr("cy")},
                 {cx=newEndPoint.x + offset, cy=newEndPoint.y}
          );

      return function(t){
          /* the function that updates both objects at each tick */
          path.attr("d", pathInterpolator(t) );
          dot.attr( dotInterpolator(t) );
      };

  });

当然，您的实际计算有多复杂取决于您的“任意路径”的任意程度。也许您需要计算 x 和 y 偏移量以保持圆的位置正确。但这变成了几何问题，而不是同步问题。无论您的路径形状在过渡时做了什么，如果终点是路径数据中的实际点，它将沿直线过渡，与圆坐标的过渡相同。