动画路径协调拉斐尔变化 [英] Animating path coordinate changes in Raphael
问题描述
背景:我使用的是拉斐尔创建了一系列&LT的动画边框效果;李>
s的子< A>
元素。这个概念是,悬停之前,块<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会喜欢这个改变。
$(#博客)。悬停(函数(){
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.
$("#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屋!