如何在 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 Divs 用于测试），并且为每个数组创建并分配了一个关键帧。

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

例如：第一个点的轨道半径为 4 个像素，第二个点为 8 个像素，第十个点的轨道半径为 40 个像素，等等......我稍后决定的任何单位和大小，这只是一个例子我的增量想法。

基本上，无需使用一个调整参数制作 100 个独特的 Divs，我希望制作一个循环，快速简单地创建一个独特的关键帧动画，并将其分配给它各自的 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)分配一个特定的class。

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

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

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

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

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

How to create dynamic Keyframe rules in Javascript?

javascript

css

animation

keyframe

css-animations