问题的根本原因在于 Anime.js 函数的默认设置不允许动画反转，除非动画已经完成。因此，需要手动更改设置来实现 hover 动画的逆转效果。

下面是一个代码示例：

HTML 代码：

JavaScript 代码：

// 引入 Anime.js 库 const anime = require("animejs");

// 配置 Anime.js 默认设置 anime.default.duration = 1000; anime.default.easing = "linear"; anime.default.direction = "alternate"; anime.default.loop = true;

// 获取 SVG 路径 const svgPath = document.querySelector("#morph path");

// 定义 hover 时的动画效果 svgPath.addEventListener("mouseenter", function() { anime.remove(svgPath); anime({ targets: svgPath, d: "M 10 10 H 90 V 90 H 10 L 10 90 Z", easing: "easeOutQuad", duration: 800 }); });

svgPath.addEventListener("mouseleave", function() { anime.remove(svgPath); anime({ targets: svgPath, d: "M 10 10 H 90 V 90 H 10 L 10 10 Z", easing: "easeOutQuad", duration: 800 }); });

在该示例中，我们先配置了 Anime.js 的默认设置，然后使用 mouseenter 和 mouseleave 事件来定义 hover 时的动画效果。我们调用 remove() 函数来删除之前创建的动画实例并生成一个新的动画。在动画的目标中，我们使用路径变形的目标值。这样，可以在鼠标移入和移出 svg 路径时，漂亮地反向执行动画效果。