拉斐尔的动画路径坐标变化

Question

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

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

问题：我不确定如何将现有路径的一端设置为新坐标的动画。 SO有关于动画路径的各种问题，但似乎都没有解决如何将简单路径的一端设置为新坐标的动画 - 是否有一种直截了当的方式来执行此操作我在Raphael文档中忽略了？我已经尝试在动画处理程序中放置坐标，但它没有任何效果。这是一个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);
});