具有过渡的线性/增量旋转动画

Question

我正在尝试使用D3中的transform属性和过渡方法来旋转SVG形状.这是包含示例的jsfiddle:http://jsfiddle.net/TJd2a/

我正在使用两个按钮,左和右,通过将角度增加45或-45度来旋转矩形.当形状达到180度或-180度时,过渡以相反的方式旋转形状,而不是线性移动到下一个角度.使用控制台日志记录,我发现我的代码生成的角度没有任何问题.它似乎是D3如何处理转换,因为生成的XML没有显示与当前相同的角度(例如,当处于225度时,D3给矩形一个-135的旋转).

根据我从文档中读到和理解的内容,我需要使用自定义Tween,但我不知道从哪里开始使用自定义补间,因为我找不到任何示例特定或类似的示例来帮助我理解它是如何工作的.

Answer 1

正确; 您可以使用自定义补间来更改插补器.D3有一个特殊的变换内插器,但在你的情况下它并没有做正确的事情.(我认为这可能是一个应该修复的错误,所以我提交了问题661.)这是使用interpolateString的示例:

d3.select("rect").transition().attrTween("transform", function(d) {
  return d3.interpolateString(
    "rotate("+ d.a +")",
    "rotate(" + (d.a += 45) + ")"
  );
});