javascript - 如何在 Javascript 中创建动态关键帧规则？

Question

过去几周我一直在尝试以各种方式实现我的想法(我是 Javascript 的新手)并且尝试了很多方法，这是最接近实现的方法。

我的目标

我的目标是创建 100 个移动点(每个点代表一个百分比)以动画形式显示到各自的位置，就像某种进度条，但采用圆形格式。随着百分比变高，相应的点具有更大的半径。我当前的代码是:Full Code

var hundredPointsArray = [];
for (var i = 0; i < 20; i++) {
    hundredPointsArray += '<div class="hundredPoints"></div>';
}

var containerHundredPoints = document.querySelector(".conHundredPoints");
containerHundredPoints.innerHTML = hundredPointsArray;

for (var i = 0; i < hundredPointsArray.length; i++){
    var sheet = document.createElement('style')
    var circle = document.querySelectorAll(".hundredPoints");

    sheet.textContent = "@-webkit-keyframes testA {"
        + "0% {transform:translate(495px, 495px) rotate(45deg) translate("+ -i*4 +"px," 
        + -i*4 +"px);"
        + "background-color:white; box-shadow: 0px 0px 5px #000;}"
        + "100% {transform:translate(495px, 495px) rotate(405deg) translate("+ -i*4 
        + "px, "+ -i*4 +"px);"
        + "background-color:black; box-shadow: 0px 0px 5px #980;}";

    circle[i].appendChild(sheet);
}

我创建了一个数组(20 个 Div 用于测试)，并为每个数组创建并分配了一个关键帧。

问题 是所有点都被分配到循环制作的最后一个关键帧。我尝试先为样式表创建一个数组，然后将 ith<​​ 关键帧分配给 ith<​​ Div，但没有成功。

例如:第一个点的轨道半径为 4 个像素，第二个点的轨道半径为 8 个像素，第十个点的轨道半径为 40 个像素……无论我稍后决定什么单位和大小，这只是增量的示例我有想法。

基本上，无需使用一个调整参数制作 100 个独特的 Div，我希望制作一个循环来快速简单地创建独特的关键帧动画，并将其分配给相应的 Div。

任何帮助或建议将不胜感激，我很乐意填写任何帮助者想知道的任何遗漏的细节。

谢谢。

Answer 1

好的，我认为这段代码可以满足您的需求，我不确定，但如果您需要更多帮助，可以分享您真正想做的事情(最终结果)的图片。

删除这条规则 -webkit-animation-name: 'testA';

.hundredPoints{
    background-color: rgba(255,0,0,0.2);
    position:absolute;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    width:10px;
    height:10px;
    border-radius:100%;
}

为每个点point-(ith)分配一个特定的类。

var hundredPointsArray = [];
for (var i = 0; i < 20; i++) {
    hundredPointsArray += '<div class="hundredPoints point-' + i + '"></div>';
}

var containerHundredPoints = document.querySelector(".conHundredPoints");
containerHundredPoints.innerHTML = hundredPointsArray;

为每个特定点创建一个新的动画关键帧，然后将其分配给之前创建的每个特定类。

for (var i = 0; i < hundredPointsArray.length; i++){
var sheet = document.createElement('style')
var circle = document.querySelectorAll(".hundredPoints");
sheet.textContent = ""+
    ".hundredPoints.point-" + i + " {" +
        "-webkit-animation-name: 'animPoint-" + i + "';" +
    "}" +

    "@-webkit-keyframes animPoint-" + i + " {" +
        "0% { transform:translate(495px, 495px)" +
             "rotate(45deg) translate(" + (-i * 4) + "px," + (-i * 4) + "px);" +
             "background-color:white;" +
             "box-shadow: 0px 0px 5px #000;" +
        "}" +

        "100% { transform:translate(495px, 495px)" +
               "rotate(405deg)" +
               "translate(" + (-i * 4) + "px," + (-i * 4) + "px);" +
               "background-color:black;" +
               "box-shadow: 0px 0px 5px #980;" +
        "}";
    "}";

    circle[i].appendChild(sheet);
}

这是 complete code