如何在ShapeShifter中实现矩形边框路径遍历动画？

核心思路：通过关键帧位移动画+路径吸附实现精准跟随 #

不需要依赖trimPath的描边动画，直接给小矩形做位置+旋转的关键帧动画就能实现你要的效果，具体步骤如下：

• 准备图形资源

  1. 绘制大矩形，右键选择Convert to Path将其转为可编辑路径。
  2. 绘制小矩形，调整尺寸后，拖动到大矩形边框的起始位置（比如左上角）。

• 添加位置关键帧动画
  选中小矩形，打开右侧「Animations」面板：

  1. 点击「Add Animation」，选择position属性。
  2. 按大矩形的四个顶点设置关键帧（时间轴按0%/25%/50%/75%/100%划分）：
     • 0%：小矩形位于大矩形左上角（记录此时的x/y坐标）。
     • 25%：拖动小矩形吸附到大矩形右上角（ShapeShifter会自动对齐路径节点，直接记录坐标）。
     • 50%：吸附到大矩形右下角。
     • 75%：吸附到大矩形左下角。
     • 100%：回到左上角，形成循环。
  3. 将所有关键帧的插值模式设为linear，确保移动速度均匀。

• 同步旋转动画（可选，让小矩形始终贴合边框）
  如果需要小矩形的边始终贴紧大矩形边框，给小矩形添加rotation动画：

  1. 同样按0%/25%/50%/75%/100%设置关键帧：
     • 0%/25%：旋转0°（水平状态）。
     • 25%/50%：旋转90°（垂直向下）。
     • 50%/75%：旋转180°（水平向左）。
     • 75%/100%：旋转270°（垂直向上）。
  2. 旋转动画的插值模式同样设为linear，和位置动画同步。

替代方案：利用trimPath实现伪跟随（适合快速效果） #

如果不想手动设置多个关键帧，可以用trimPath配合遮罩：

1. 给大矩形的路径添加trimPathOffset动画，设置从0到100%的循环动画，时长和你需要的移动周期一致。
2. 创建一个和小矩形尺寸相同的形状作为遮罩，将其位置绑定到trimPath的端点（ShapeShifter的动画面板支持关联属性）。
3. 将小矩形放在遮罩下方，这样遮罩跟随trimPath移动时，小矩形就会呈现沿边框移动的效果。

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