TL; DR

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

完全不使用动画（解决方案2）或使用新的svg.js v3控制器（解决方案3）

当您多次调用某个元素上的animate()时，动画将被链接。每次requestAnimationFrame都调用动画，这意味着您每隔16毫秒链接一次新动画。因为所有动画都是互相播放的，所以ofc看起来很差。

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

也许是最简单的，但可能不是您想要的（即使您认为如此）

svg.js v2

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

svg.js v3

animate()

返回在元素动画时间轴上安排的跑步者。再次animate()之前，出于性能原因，应先从时间轴中删除跑步者：

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带有一种称为声明性动画的新型动画。控制器负责始终将动画带到您想要的位置，从而使鼠标跟随真正的微风。

// 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

补间形状位置是否平滑地跟随光标而不是跳动？

1 个答案:

TL; DR