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

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



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

问题：我不确定如何设置现有路径到新坐标的一端的动画。因此，关于动画路径有很多问题，但是似乎没有一个问题可以解决如何为一条简单的路径动画化一个新坐标的问题-在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);
});

最佳答案

您只需输入一个新的“ path”属性作为动画即可。因此，只需修改终点...这样，悬停功能就会像这样更改。

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);
});

关于javascript - 拉斐尔中的动画路径坐标变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22105403/