Raphael 中的动画路径坐标变化

Question

背景：我正在使用 Raphael 为一系列带有子 <a> 元素的 <li>s 创建动画边框效果。这个概念是，在悬停之前，块<li> 元素将有 4 个 90 度角边框（见图 1）。然后在悬停时，每个角边框将延伸其一个臂与下一个臂相遇，在元素周围创建一个完整的边框（见图 2）。

进度：我已经使用绝对位于子 <a> 元素下方的 Raphael 画布实现了角边框效果（悬停前的外观）。

问题：我不确定如何将现有路径的一端动画化到新坐标。 SO有关于动画路径的各种问题，但似乎没有一个解决如何将简单路径的一端动画化到新坐标 - 有没有一种直接的方法可以做到这一点我在拉斐尔文档中忽略了？我尝试在动画处理程序中放置坐标，但没有效果。这是jsfiddle，这是我到目前为止的 JS（更改了笔触颜色以确保我拥有正确的悬停功能）：

//path coords before anim
var paper = Raphael(document.getElementById("blog"), 142, 46);
var btmleftcorner = paper.path("M0 36L0 46L10 46");
var btmrightcorner = paper.path("M132 46L142 46L142 36");
var toprightcorner = paper.path("M142 10L142 0L132 0");
var topleftcorner = paper.path("M10 0L0 0L0 10");
//path attrs
btmleftcorner.attr({"stroke-width": "2"})
btmrightcorner.attr({"stroke-width": "2"})
toprightcorner.attr({"stroke-width": "2"})
topleftcorner.attr({"stroke-width": "2"})
//path attrs after anim
$("#blog").hover(function () {
    btmleftcorner.animate({"stroke": "red"}, 300);
    btmrightcorner.animate({"stroke": "red"}, 300);
    toprightcorner.animate({"stroke": "red"}, 300);
    topleftcorner.animate({"stroke": "red"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black"}, 300);
    btmrightcorner.animate({"stroke": "black"}, 300);
    toprightcorner.animate({"stroke": "black"}, 300);
    topleftcorner.animate({"stroke": "black"}, 300);
});

Answer 1

您可以输入一个新的“路径”属性来制作动画。所以只需修改端点......所以悬停功能会像这样改变。

working jsfiddle

$("#blog").hover(function () {
    btmleftcorner.animate({"stroke": "red", path: "M0 36L0 46L146 46" }, 300);
    btmrightcorner.animate({"stroke": "red", path: "M132 46L142 46L142 0"}, 300);
    toprightcorner.animate({"stroke": "red", path: "M142 10L142 0L132 0 0 0"}, 300);
    topleftcorner.animate({"stroke": "red", path: "M10 0L0 0L0 46"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black", path: "M0 36L0 46L10 46"}, 300);
    btmrightcorner.animate({"stroke": "black", path: "M132 46L142 46L142 36"}, 300);
    toprightcorner.animate({"stroke": "black", path: "M142 10L142 0L132 0"}, 300);
    topleftcorner.animate({"stroke": "black", path: "M10 0L0 0L0 10"}, 300);
});