循环2个数组，并将它们的值和输出匹配到javascript中的一个新数组中

正如标题所示，我正在尝试创建一个可以为我构建css动画的函数

我在函数中接受3个参数：

• Name=您将称之为动画的内容
• 步骤=动画应采取的步骤（即：[“0%”、“50%”、“100%”）
• stepProperties=要添加到步骤中的css属性

然后，我想获取这些参数并将它们彼此“匹配”（步骤[0]和步骤属性[0]应该一起进行，等等）

然后我想将conjoined和matched参数推送到一个名为keyframeProperties的新数组中，例如：

 createAnimation("testAnimation", ["0%", "25%", "50%", "75%", "100%"], ["background: blue","background: red","background: yellow","background: purple","background: green"]);

我希望在循环之后，keyframeProperties现在等于：

keyframeProperties["0%{background: blue}","25%{background: red}","50%{background: yellow}","75%{background: purple}","100%{background: green}"]

这是我目前的代码：

var createAnimation =  function(name, steps, stepProperties) {
         //set up a new array which will hold our properties to insert into the animation
         var keyframeProperties = [];
         //loop over the steps and the step properties and push them into the keyframeProperties array in their right format
         for (var i = 0; i < steps.length; i++) {
             for (var j = 0; j < stepProperties.length; j++) {
                  keyframeProperties.push(steps[i] + "{" + stepProperties[j] + "}");
             }
        }
        var animation = '@keyframes ' + name + '{' + 
                                keyframeProperties +
                            '}';
         alert(animation);
}

var createAnimation=函数（名称、步骤、步骤属性）{
//设置一个新数组，该数组将保存要插入动画的属性
var keyframeProperties=[]；
//循环步骤和步骤属性，并以正确的格式将它们推入keyframeProperties数组
对于（var i=0；i

我希望这一切都有意义

---

--SD

您的团队已接近于自行解决此问题。 我刚刚删除了嵌套for循环并做了一些其他小修改，请询问是否有不清楚的地方

var createAnimation=函数（名称、步骤、步骤属性）{
//设置一个新数组，该数组将保存要插入动画的属性
var keyframeProperties=[]；
//循环步骤和步骤属性，并以正确的格式将它们推入keyframeProperties数组
对于（var i=0；i
您已经接近自行解决此问题。
我刚刚删除了嵌套for循环并做了一些其他小修改，请询问是否有不清楚的地方


var createAnimation=函数（名称、步骤、步骤属性）{
//设置一个新数组，该数组将保存要插入动画的属性
var keyframeProperties=[]；
//循环步骤和步骤属性，并以正确的格式将它们推入keyframeProperties数组
对于（var i=0；i
这里是对该函数的另一种理解，它有一个稍微不同的API。该例程采用三个参数：1）动画名称，2）要设置动画的属性对象和属性值，以及3）[可选]动画步骤

示例：

A.一个或多个动画属性

buildAnimation（“闪烁”，“不透明度”：[0,1]}）

buildAnimation（“淡入”，“不透明度”：[1,0.5,0]，“颜色”：[“#aaa”，“#ccc”，“#eee”]）

B.指定步骤（用于不规则动画）

buildAnimation（“闪烁”，“不透明度”：[1,0,1,0]}[0,50,75,100]）

小提琴：

和源代码：

function arrayRange(from, to, steps) {
    var increment = (to - from) / (steps - 1);
    for(var i = 0, arr = []; i < steps; arr.push(Math.round(i * increment)), i++);
    return arr;
}

function buildAnimation(name, properties, steps) {
    var propertyNames = Object.keys(properties);
    var first = propertyNames[0];
    var length = properties[first].length;
    var animation = "";

    if(typeof steps !== "undefined" && (!Array.isArray(steps) || length !== steps.length)) {
        throw new Error("steps and values array lengths must be equal");
    } else if(typeof steps === "undefined") {
        steps = arrayRange(0, 100, length);
    }

    animation = "@keyframes " + name + "{";
    steps.forEach(function(step, stepIndex) {
        animation += step + "%{";

        propertyNames.forEach(function(property) {
            animation += property + ":" + properties[property][stepIndex] + ";";
        });

        animation += "}";
    });

    return animation += "}";
}

函数数组范围（从、到、步骤）{
var增量=（到-从）/（步骤-1）；
对于（var i=0，arr=[]；i
这是对该函数的另一种理解，它的API略有不同。该例程采用三个参数：1）动画名称，2）要设置动画的属性对象和属性值，以及3）[可选]动画步骤

示例：

A.一个或多个动画属性

buildAnimation（“闪烁”，“不透明度”：[0,1]}）

buildAnimation（“淡入”，“不透明度”：[1,0.5,0]，“颜色”：[“#aaa”，“#ccc”，“#eee”]）

B.指定步骤（用于不规则动画）

buildAnimation（“闪烁”，“不透明度”：[1,0,1,0]}[0,50,75,100]）

<