5

澄清。画一个圆圈。我们从一个特定的坐标开始画圆。现在让我们从另一个坐标开始画圆。

我正在使用从 SVG 字形派生的路径数据，然后使用 d3js 补间动画来动画路径之间的变化。

对于此示例，从 1 -> 9,0 开始计数，然后重复。

http://jsfiddle.net/chrisloughnane/HL2ET/

正如您所看到的，有些过渡不如其他过渡好。他们画了一条线来关闭下一条路径的路径。（我猜）当计算新形状时路径的起点和终点相距很远时，就会发生这种情况。当它工作时，它非常好。

任何人都可以为丑陋的线条提出一个可能的解决方案吗？

没有路径数据的代码

svg.append("path")
    .attr("transform", "translate(150,300)scale(.2,-.2)")
  .style("stroke", "red")
  .style("fill", "gray")
  .style("stroke-width", "9")
    .attr("d", d0)
    .call(transition, digits[0], digits[position]);

function transition(path, d0, d1) {
  position++;
  if(position==10)
  {
    position=0;
  }
  path.transition()
      .duration(2000)
      .attrTween("d", pathTween(d1, 4))
      .each("end", function() { d3.select(this).call(transition, d1, digits[position]); });
}

function pathTween(d1, precision) {
  return function() {
    var path0 = this,
        path1 = path0.cloneNode(),
        n0 = path0.getTotalLength(),
        n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

    // Uniform sampling of distance based on specified precision.
    var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
    while ((i += dt) < 1) distances.push(i);
    distances.push(1);

    // Compute point-interpolators at each distance.
    var points = distances.map(function(t) {
      var p0 = path0.getPointAtLength(t * n0),
          p1 = path1.getPointAtLength(t * n1);
      return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
    });

    return function(t) {
      return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
    };
  };
}

不幸的是，它在 chrome mobile 上也失败了，因为http://bl.ocks.org/mbostock/3081153工作正常。

下一步是将这种效果应用于句子。

4

1 回答 1

1

您的示例与 Bostock 示例之间的区别在于，在他的示例中，有一条连续路径，他将其补间为另一条连续路径。

而在您的示例中，可以使用单个连续路径绘制 1、2、3、5、6、7 等数字。但是，为了绘制像 4、6、9 和 0 这样的数字，您需要 2 条路径——一个在另一个之上。而且，对于数字 8，您需要在外部路径之上有 2 条路径。

因此，我的建议是始终在您当前使用的外部路径上保留 2 条路径，并在显示任何特殊数字时为它们提供适当的尺寸。

更多详情请参考图片： 在此处输入图像描述

于 2014-03-25T06:45:27.100 回答