补间形状位置使其平滑地跟随光标而不是跳跃？

Question

如何使用带补间的移动功能使白色矩形连续平滑地跟随光标位置？

到目前为止我得到的东西不能正常工作——矩形位置只是偶尔更新！

https://jsfiddle.net/jamesgreig/gaxrteoc/73/

var width = 1200
var height = 800
var draw = SVG('drawing').size(width, height)

var building = draw.rect(1200, 800).fill('https://www.dropbox.com/s/pidx5gd1cmt3kyx/mcw_elevation_small.jpg?raw=1')

var rect1 = draw.rect(300,80).fill('#FFF')
rect1.center(width/2, height/2)

var mask2 = draw.mask().add(rect1)
building.maskWith(mask2)

///////

var xPos = 300;
var yPos = 600;

onmousemove = function(e){
 xPos = e.clientX
 yPos = e.clientY
  console.log(xPos+' , '+yPos)
}

/////

function update(dt) {
  // move the rectangle towards the cursor 
  rect1.animate(300).move(xPos - 300, yPos - 80)
}

///////

var lastTime, animFrame;

function callback(ms) {
  // we get passed a timestamp in milliseconds
  // we use it to determine how much time has passed since the last call

  if (lastTime) {
    update((ms-lastTime)/1000) // call update and pass delta time in seconds
  }

  lastTime = ms
  animFrame = requestAnimationFrame(callback)
}

callback()

Answer 1

TL;DR

Don't use animations at all (solution 2) or use the new svg.js v3 controllers (solution 3)

当您对一个元素多次调用 animate() 时，动画会被链接起来。您每 requestAnimationFrame 调用一次动画，这意味着您每 16 毫秒链接一个新动画。该 ofc 看起来很不对劲，因为所有动画都是依次播放的。

您的问题有多种解决方案：

也许是最简单的但也许不是你想要的（即使你这么认为）

svg.js v2

在调用 animate 之前停止动画。在您的情况下，您需要 stop(finishAnimation=false, clearQueue=true)。下一次调用 animate 应该将新动画加入队列并立即播放

svg.js v3

in svg.js v3 animate() returns 一个运行ner 被安排在元素动画时间轴上。在再次 animate() 之前，出于性能原因，您应该先从时间轴中删除运行ner：

var runner = el.animate()
// later
runner.unschedule()

但是，这不是必需的。然后您可以使用 animate(duration, delay, when) 的新语法安排新的动画。你想要animate(300, 0, 'now')。这将运行立即显示新动画

也许是您想要但未曾搜索过的解决方案

根本不要动画。您想在示例中突出显示建筑物的某个区域。只需将矩形直接绑定到您的鼠标位置即可：

SVG.on(document, 'mousemove', (e) => {
  // This function converts the mouse coordinates
  // into the space of the draw element. No other math required :)
  const {x, y} = draw.point(e.clientX, e.clientY)
  rect.center(x, y)
})

最酷和最新的解决方案 - 但也许您还是想考虑第二种解决方案

svg.js v3 带有一种称为声明性动画的新型动画。控制器负责始终将动画带到您想要的位置，使鼠标跟随真实的 breeze.

// Spring() creates a new controller behaving like a physical spring
// You can pass 2 parameters: new SVG.Spring(settleTime, overshoot)
// So if you want jiggling increase the overwhoot (0-20% is useful)
const runner = rect1.animate(new SVG.Spring())

// This part is similar to the second solution
SVG.on(document, 'mousemove', (e) => {
  const {x, y} = draw.point(e.clientX, e.clientY)
  runner.center(x, y)
})

有关 svg.js v3 的更多信息，twitter 是最好的来源 atm，因为代码示例每天都会发布，直到圣诞节：https://twitter.com/svg_js

补间形状位置使其平滑地跟随光标而不是跳跃？

Tween shape position so it smoothly follows cursor instead of jumping?

animation

svg.js

TL;DR