[英]Snap.svg animate
I'm brand-new to JS, but am trying to pick up snap.svg. 我是JS的新手,但我想拿起snap.svg。 I'm trying to animate a circle that was created with snap, but I can't seem to get more than one thing to happen at a time.
我试图用快照创建一个圆形动画,但我似乎无法一次发生多个事情。 Right now, the circle changes color when it's 'moused over,' but I'd like it to 'pulsate' [change back and forth colors while the user is on the page.
现在,圆圈在“被碾过”时会改变颜色,但我希望它能够“搏动”[当用户在页面上时来回改变颜色。 Any idea on how to do that?
有关如何做到这一点的任何想法?
you have to use the callback of the animate
function to call the animation again, example: 你必须使用
animate
函数的回调再次调用动画,例如:
fiddle: http://jsfiddle.net/LCxD7/11/ 小提琴: http : //jsfiddle.net/LCxD7/11/
var paper = Snap('svg');
var circle = paper.circle(10,10,10);
var states = [{
fill: '#bada55',
cx: 10,
cy: 10
}, {
fill: '#55bada',
cx: 100
}, {
fill: '#ba55da',
cy: 100
}, {
fill: '#000000',
cx: 10
}];
(function animateCircle(el, i) {
el.animate(states[i], 1000, function() {
animateCircle(el, ++i in states ? i : 0);
})
})(circle, 0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.