捕捉.svg动画

Snap.svg animate

本文关键字：动画 svg 捕捉      更新时间：2023-09-26

我是JS的新手，但正在尝试拿起snap.svg。我正在尝试为使用 snap 创建的圆圈制作动画，但我似乎一次无法发生多件事。现在，圆圈在"鼠标悬停"时会改变颜色，但我希望它"脉动"[当用户在页面上时来回更改颜色。知道如何做到这一点吗？

你必须使用 animate 函数的回调来再次调用动画，示例：

小提琴：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);
相关文章：