SVG.js 如何实现元素往返位置动画循环？新手技术问询

嘿，刚接触SVG.js的话，这个往返循环动画其实超容易实现！我给你分享两种实用方案，你可以根据自己的需求来选：

这种方式逻辑很直观：先让元素移动到目标位置，动画结束后再让它原路返回，最后把这个往返过程设置成无限循环。

// 先创建SVG画布
const draw = SVG().addTo('body').size(300, 200)

// 生成一个要做动画的矩形（你也可以换成其他元素）
const movingRect = draw.rect(50, 50).fill('#ff6347').move(20, 75)

// 第一步：定义"移动到目标位置"的动画（1秒完成）
const moveToTarget = movingRect.animate(1000).move(230, 75)

// 第一步动画结束后，执行返回动画并设置循环
moveToTarget.after(() => {
  // 回到初始位置的动画，loop(true)表示无限循环
  movingRect.animate(1000).move(20, 75).loop(true)
})

如果你想一次性定义完整的往返路径，用SVG.js的关键帧动画会更省心，代码也更紧凑：

const draw = SVG().addTo('body').size(300, 200)
const movingRect = draw.rect(50, 50).fill('#ff6347').move(20, 75)

// 用关键帧定义整个往返过程，直接设置循环
movingRect.animate({
  duration: 2000, // 整个往返过程耗时2秒
  loop: true,     // 开启无限循环
  ease: 'linear'  // 匀速运动，可选换成'in-out'实现缓动效果
}).keyframes({
  0: { x: 20 },   // 动画开始时的初始位置
  50: { x: 230 }, // 动画进行到50%（1秒时）到达目标位置
  100: { x: 20 }  // 动画结束时回到初始位置
})

小提示 #

• 如果你不需要无限循环，把loop: true换成具体数字就行，比如loop: 3就是循环3次
• 除了x轴移动，你也可以在关键帧里添加y轴、透明度、缩放等属性，实现更复杂的动画
• 调整ease参数可以改变动画的节奏，比如'ease-in-out'会让动画的开始和结束阶段更平缓

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