动画路径协调拉斐尔变化 [英] Animating path coordinate changes in Raphael

问题描述

背景：我使用的是拉斐尔创建了一系列＆LT的动画边框效果;李＆GT; s的子＆LT; A＆GT; 元素。这个概念是，悬停之前，块<​​code>＆LT;立GT; 元素将有4个90度的拐角边界（见图1）。然后在悬停，每个角落边界将扩大其武器之一迎接下，元素围绕创建一个完整的边界（见图2）。

进度：我已经使用绝对定位的子下方的拉斐尔画布实现角落边界效应（悬停前的样子）＆LT; A＆GT; 元素。

问题：我不能确定如何动画现有路径的一端到一个新的坐标。 SO大约有动画路径的各种问题，但似乎没有解决如何为一个简单的路径一端动画到一个新的坐标 - 有一个简单的办法做到这一点，我在拉斐尔文档忽略了？我试过把坐标动画处理程序中，但它没有任何效果。这里有一个的jsfiddle ，这是我的JS到目前为止（用笔触颜色变化，以确保我有悬停功能右）：

  //阿尼姆前路COORDS
VAR纸=拉斐尔（的document.getElementById（博客），142，46）;
变种btmleftcorner = paper.path（M0 36L0 46L10 46）;
变种btmrightcorner = paper.path（M132 46L142 46L142 36）;
变种toprightcorner = paper.path（M142 10L142 0L132 0）;
变种topleftcorner = paper.path（M10 0L0 0L0 10）;
//路径ATTRS
btmleftcorner.attr（{笔划宽度：2}）
btmrightcorner.attr（{笔划宽度：2}）
toprightcorner.attr（{笔划宽度：2}）
topleftcorner.attr（{笔划宽度：2}）
//路径动画后ATTRS
$（＃博客）。悬停（函数（）{
    btmleftcorner.animate（{中风：红}，300）;
    btmrightcorner.animate（{中风：红}，300）;
    toprightcorner.animate（{中风：红}，300）;
    topleftcorner.animate（{中风：红}，300）;
}，函数（）{
    btmleftcorner.animate（{中风：黑}，300）;
    btmrightcorner.animate（{中风：黑}，300）;
    toprightcorner.animate（{中风：黑}，300）;
    topleftcorner.animate（{中风：黑}，300）;
}）;
 

解决方案

您可以只输入一个新的路径属性的动画来。因此，只要修改终点......所以悬停FUNC会喜欢这个改变。

工作的jsfiddle

  $（＃博客）。悬停（函数（）{
    btmleftcorner.animate（{中风：红，路径为：M0 36L0 46L146 46}，300）;
    btmrightcorner.animate（{中风：红，路径为：M132 46L142 46L142 0}，300）;
    toprightcorner.animate（{中风：红，路径为：M142 10L142 0L132 0 0 0}，300）;
    topleftcorner.animate（{中风：红，路径为：M10 0L0 0L0 46}，300）;
}，函数（）{
    btmleftcorner.animate（{中风：黑，路径为：M0 36L0 46L10 46}，300）;
    btmrightcorner.animate（{中风：黑，路径为：M132 46L142 46L142 36}，300）;
    toprightcorner.animate（{中风：黑，路径为：M142 10L142 0L132 0}，300）;
    topleftcorner.animate（{中风：黑，路径为：M10 0L0 0L0 10}，300）;
}）;
 

Background: I'm using Raphael to create an animated border effect for a series of <li>s with child <a> elements. The concept is that before hover, a block <li> element will have 4 90-degree corner borders (see fig. 1). Then on hover, each corner border will extend one of its arms to meet the next, creating a full border around the element (see fig.2).

Progress: I've achieved the corner borders effect (the look before hover) using a Raphael canvas positioned absolutely beneath the child <a> element.

Problem: I'm unsure how to animate one end of an existing path to a new coordinate. SO has various questions about animating paths, but none seem to address how to animate one end of a simple path to a new coordinate - is there a straightforward way to do this I've overlooked in the Raphael docs? I've tried placing coordinates inside the animation handler but it's had no effect. Here's a jsfiddle, and here's my JS so far (with a stroke color change to make sure I have the hover function right):

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

解决方案

You can just enter a new 'path' attribute to animate to. So just amend the end points...so the hover func would be changed like this.

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

这篇关于动画路径协调拉斐尔变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！