Snap SVG 迭代对象以构建动画属性

Question

我正在寻找一个涉及 Snap SVG 的函数，它允许我传入一个对象或值数组，通过它我可以迭代以构建动画属性。

例如，如果我能通过： [变换：'t100,100'，变换：'r10,10,10']

进入这个：

animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing) {
        var s = Snap.select("#"+ parentSVG),
            theElement = s.select("#"+ element);

        theElement.animate({
           // Iterate over Object.keys(animationValues)
           transform: 't100,100',
           transform: 'r10,10,10'
        }, duration, easing);
    }

Answer 1

您不需要遍历属性数组。您实际上可以将动画值创建为一个对象。

假设您设置了这样的值：

var animationValues = {
    transform: 't100,100',
    transform: 'r10,10,10'
};

然后你可以像这样改变你的动画调用：

animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing) {
    var s = Snap.select("#"+ parentSVG),
        theElement = s.select("#"+ element);

    theElement.animate(animationValues, duration, easing);
};

Snap SVG 迭代对象以构建动画属性

Snap SVG Iterate over Object to build Animate properties

javascript

svg

snap.svg