我有一个带渐变的箭头:
var g = field.gradient("l(0, 1, 2, 1)#fff-#5C5C5C");
var arrow = field.path(Snap.format("M390 385 L335 335 L410 355 Q375 355 390 385")).attr({fill: g, opacity: 0.5, cursor: 'pointer'});
我想要产生一种效果,即渐变正在像波浪一样改变/移动......
这是我想要的Flash页面:http://www.888poker.com/poker-client/euromania_popup.htm?isftd=1&origcid=123456
答案 0 :(得分:7)
您可以尝试设置渐变动画,例如......
s = Snap(400, 620);
var g = s.gradient("l(0, 1, 2, 1)#5C5C5C-#fff-#5C5C5C");
var arrow = s.path(Snap.format("M390 385 L335 335 L410 355 Q375 355 390 385")).attr({fill: g, opacity: 0.5, cursor: 'pointer'});
function anim () {
g.attr({ x1: 0, y1: 1, x2: 2, y2: 1 });
g.animate({ x1: 0, y1: 100, x2: 0, y2: 100 }, 2000, mina.linear, anim);
};
anim();
答案 1 :(得分:0)
伊恩的链接是在正确的轨道上。您可以使用渐变的百分比访问颜色停止位置的数组,并使用以下代码单独设置它们的动画:
// 1st color stop moves to 25% from the end over 1000ms
g.selectAll("*")[0].animate({offset: 0.25}, 1000)
// 2nd color stop moves to the 50% point over 500ms
g.selectAll("*")[0].animate({offset: 0.50}, 500)
// 3rd color stop moves to 75% from the end over 300ms
g.selectAll("*")[0].animate({offset: 0.75}, 300)