如何在Paper.js中实现view.center的tween补间动画

paper.view.center的setter仅在接收到新的Point实例时才会触发视图重定位，直接修改原有Point实例的x/y属性不会触发setter逻辑，因此直接对原有center对象做补间不会产生任何移动效果。

不要直接将paper.view.center实例作为Tween的绑定目标，改用普通JavaScript对象存储动态变化的坐标值，在补间的每帧更新回调中，基于当前坐标创建新的Point实例赋值给paper.view.center即可。
对应代码如下：

// 记录初始视图中心坐标，作为补间起始值
const tweenPos = {
  x: paper.view.center.x,
  y: paper.view.center.y
}

const smoothMove = new TWEEN.Tween(tweenPos)
  .to({ x: 650, y: 270 }, 900)
  .easing(TWEEN.Easing.Cubic.Out)
  .onUpdate(() => {
    // 每帧创建新Point实例赋值，触发视图位置更新
    paper.view.center = new paper.Point(tweenPos.x, tweenPos.y)
  })
  .start()

注意事项 #

• 必须在全局的requestAnimationFrame渲染循环中调用TWEEN.update()，否则补间动画不会逐帧执行
• 该逻辑同样适用于Paper.js中所有需要传入新Point实例才能生效的属性补间场景，比如Shape图形的position属性修改、路径点坐标更新等

内容的提问来源于stack exchange，提问作者itsisaac19