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

Linear/Incremental rotation animation with transition

本文关键字：旋转 动画 线性      更新时间：2023-09-26

我正在尝试使用 D3 中的转换属性和过渡方法让 SVG 形状旋转。下面是包含示例的 jsfiddle：http://jsfiddle.net/TJd2a/

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

根据我从文档中阅读和理解的内容，我需要使用自定义补间，但我不确定从哪里开始自定义补间，因为我找不到任何特定于或类似示例的示例来帮助我了解它的工作原理。

正确;您可以使用自定义补间来更改插值器。D3 有一个用于转换的特殊插值器，但它在您的情况下没有做正确的事情。（我认为这可能是一个应该修复的错误，所以我提交了问题 661。下面是一个改用插值字符串的示例：

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