如何使用Haskell Reanimate实现SVG图形的箭头逐段出现动画

核心逻辑是先从加载的SVG树中定位所有箭头元素，再调用Reanimate内置的路径绘制动画能力按顺序拼接效果。

步骤说明 #

• 首先给你的SVG文件里的所有箭头元素添加统一标识，比如加class="arrow"属性，方便后续筛选，避免误选其他图形元素。
• 从嵌入的SVG树中筛选出所有箭头对应的<path>节点。
• 给每个箭头节点添加绘制动画：本质是动态调整路径的描边偏移，实现从无到有绘制的效果，Reanimate已经封装了drawLine函数直接实现这个效果，不需要手动计算路径长度。
• 按你需要的出现顺序拼接所有箭头的动画，设置单段动画时长，最后输出整体动画。

完整代码示例 #

-- 额外需要导入的依赖
import Reanimate
import Reanimate.Svg.Query (queryAll, hasClass)
import Control.Lens ((^.))

anim :: IO ()
anim = do
  doc <- loadSvgFile "test.svg" 
  tree <- case doc of
    Nothing  -> error "Malformed svg"
    Just svg -> return $ embedDocument svg
  -- 筛选所有带arrow类的箭头路径
  let arrows = queryAll (hasClass "arrow") tree
      -- 单个箭头动画时长设为0.5秒，可根据需求调整
      singleArrowDur = 0.5
      -- 生成每个箭头的绘制动画
      arrowAnims = map (drawLine singleArrowDur) arrows
      -- 按顺序拼接动画，最后保留1秒最终静态画面
      fullAnim = foldl andThen (pause 0) arrowAnims `andThen` pause 1
  reanimate $ addStatic (mkBackground "cyan") $ 
    -- 保留SVG其他静态元素不变，仅叠加箭头动画
    addStatic (mkStatic tree) fullAnim

注意事项 #

• 如果你不想修改原SVG文件加class，也可以根据箭头的其他特征筛选，比如描边颜色、id前缀等，调整queryAll的筛选条件即可。
• 要调整箭头出现顺序，只要调整arrows列表的元素顺序就可以。
• 要修改动画的缓动效果，可以给drawLine加缓动函数，比如drawLine singleArrowDur . withTween easeInOutQuad就能得到更自然的变速绘制效果。

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