javascript - Snap SVG遍历对象以构建Animate属性

我正在尝试编写一个涉及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);
    }

最佳答案

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

给定您这样设置值：

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);
};