svg.js 元素的动画旋转给出了意想不到的结果（可见 "jiggling"）

Question

我正在使用 svg.js 制作骑自行车的人的动画。半完整版本在这里：https://pedalfuriously.neocities.org/。我运行在使用 requestAnimationFrame（而不是 svg.js 内置动画）创建动画期间移动和旋转 svg 元素有点问题。

如果你看一下link，用cadence slider让骑手踩踏板非常快，然后快速翻转slider一路回到零，你可以看到他的低腿 "jiggles" 以断开连接的方式。真正让我着迷的是，腿的位置是根据与曲柄旋转的绝对关系在每一帧中确定的（而不是采用一些增量时间值来确定该帧上的运动）。

我想我已经能够确认是我的代码的哪个方面导致了问题。这是一个没有表现出确切行为的最小示例，但我认为说明了我认为负责任的事情：

var draw = SVG("drawing").viewbox(0, 0, 400, 400)
var origin = {
  x: 70,
  y: 70
}
var length = 60

var blueLine = draw.group()
blueLine.line(0, 0, 0 + length, 0).move(origin.x, origin.y)
  .stroke({
    color: "#00f",
    width: 4
  })
blueLine.angle = 0

var greenLine = draw.group()
greenLine.line(0, 0, 0 + length, 0).move(origin.x, origin.y)
  .stroke({
    color: "#0f0",
    width: 4
  })
greenLine.angle = 0

var previous = 0
var dt = 0
var step = function(timestamp) {
  dt = timestamp - previous
  previous = timestamp
  blueLine.angle += 0.18 * dt
  blueLine.rotate(blueLine.angle, origin.x, origin.y)
  var endX = Math.cos(toRad(blueLine.angle)) * length
  var endY = Math.sin(toRad(blueLine.angle)) * length

  // Comment out this line, and rotation works fine
  greenLine.move(endX, endY)

  greenLine.angle = blueLine.angle - 10

  // Comment out this line, and movement works fine
  greenLine.rotate(greenLine.angle, origin.x, origin.y)

  // But they don't work together. If I both move and rotate 
  // the green line, it goes in this crazy huge arc, rather 
  // than rotating neatly around the end of the blue line 
  // as expected.
  window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)

function toRad(deg) {
  return deg * (Math.PI / 180)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>
<div id="drawing"></div>

我在实际代码中注意到的另一件事是，如果我移动腿的位置，它会改变问题的严重性，甚至完全停止它。如果臀部一直位于自行车前部附近，问题就没有那么严重了。此外，如果我禁用小腿的旋转，则不会出现抖动。在某些位置，小腿会在加载时立即旋转出屏幕，甚至在任何动作开始之前也是如此。

如果我误解了操作元素的工作方式，特别是 svg.js 或一般的 SVG，我希望得到一些指导。

谢谢各位矢量图专家！

这是腿的实际代码。 step() 函数可能是最相关的。不确定是否有帮助：

Rider.Leg = function(foot, front, xOffset, yOffset) {
    var upper = front ? SVGE.upperLeg : SVGE.upperLegBack
    var lower = front ? SVGE.lowerLeg : SVGE.lowerLegBack
    this.foot = foot
    this.draw = foot.draw
    this.geo = {
        upper: {
            x: this.foot.pedal.gear.x + 150,
            y: this.foot.pedal.gear.y - 750,
            length: 396
        },
        lower: {
            length: 390
        }
    }
    this.upper = this.draw.group().svg(upper).move(this.geo.upper.x, this.geo.upper.y)
        .transform({ scale: 0.95, cx: 0, cy: 0 })
    this.lower = this.draw.group().svg(lower).move(this.geo.upper.x, this.geo.upper.y)
}

// Step function does not take in a time argument. Positioning of legs is based only on
// the absolute position of other elements, none of which jiggle.
Rider.Leg.prototype.step = function () {
    var angle = this.pedalAngle() - Math.PI
    var ha = this.scaleneAngle(this.geo.lower.length, this.geo.upper.length, this.pedalDistance())
    var ka = this.scaleneAngle(this.pedalDistance(), this.geo.lower.length, this.geo.upper.length)
    var x = this.geo.upper.length * Math.cos(ha + angle)
    var y = this.geo.upper.length * Math.sin(ha + angle)
    this.upper.rotate(Drive.toDeg(angle + ha), 0, 0)
    this.lower.move(this.geo.upper.x + x, + this.geo.upper.y + y)
    this.lower.rotate(Drive.toDeg(angle + ha + ka - Math.PI), 0, 0)

}

// Gets the distance between the hip joint and the pedal
Rider.Leg.prototype.pedalDistance = function () {
    var pos = this.foot.getPos()
    var xDist = this.geo.upper.x - pos.x
    var yDist = this.geo.upper.y - pos.y
    return Math.hypot(xDist, yDist)
}

// Gets the angle between the hip joint and the pedal 
Rider.Leg.prototype.pedalAngle = function () {
    var pos = this.foot.getPos()
    var xDist = this.geo.upper.x - pos.x
    var yDist = this.geo.upper.y - pos.y
    return Math.atan2(yDist, xDist)
}

Rider.Leg.prototype.scaleneAngle = function (a, b, c) {
    return Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c))
}

Answer 1

当您在群组中调用 move() 时，它在内部表示为翻译。 svg.js 在不改变任何其他变换的情况下找出将对象转换到新位置的疯狂方法。这往往行不通。尤其不是，当你旋转时。

这就是为什么您应该避免这些绝对转换而选择相对转换的原因。只需在每次移动前调用 untransform 并从零开始。然后你可以这样做：

greenLine.transform({x:endX, y:endY, relative: true})

将线移动一定量。那应该会更好。

svg.js 元素的动画旋转给出了意想不到的结果（可见 "jiggling"）

svg.js animated rotation of elements gives unexpected results (visible "jiggling")

javascript

animation

svg

svg.js