Javascript 基于半径周围位置的CSS动画

我试图以一种“爆炸”的方式为下图所示的圆设置动画，以便它们将当前位置保留在视图端口之外

问题是，我需要它们从当前位置以线性位置移动，以便在“爆炸”后隐藏它们

这些圆是使用jQuery根据半径和计数生成的，我可以使用以下公式在for循环中捕捉它们：

function explodeFields() {
    var fields = $('.field');
    fields.each(function() {
        self = $(this);
        console.log(self.attr('id'));
    });
}

我需要所有字段根据其当前位置向视口移动。因此，例如标记为“1”的字段应水平移动到屏幕右侧，而上部圆圈中的字段“13”应向上移动，并在“爆炸”时略微向右移动

谢谢你的帮助！ 谢谢

编辑 我正在使用一个名为movejs的库，它可以帮助css转换等。。。如果可能的话，我会很感激使用CSS来实现这一点。 这是DOM中元素的外观：

2

编辑2 这是JS：

 function distributeFields(radius, name) {
        var radius = radius;
        var fields = $('.field-'+ name), container = $('#container'),
            width = container.width(), height = container.height(),
            angle = 0, step = (2*Math.PI) / fields.length;
        fields.each(function() {
            var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
            var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
            if(window.console) {
                console.log($(this).text(), x, y);
            }
            $(this).css({
                left: x + 'px',
                top: y + 'px',
                '-o-transform': 'rotate(' + angle + 'deg)',
                '-moz-transform': 'rotate(' + angle + 'deg)',
                '-webkit-transform': 'rotate(' + angle + 'deg)',
                'transform': 'rotate(' + angle + 'deg)'
            });
            angle += step;
        });        
    }
    
    function explodeFields() {
        var fields = $('.field');
        fields.each(function() {
            self = $(this);
            $(self).addClass('move');
        });
    }

和CSS：

#container { 
    width: 600px; 
    height: 600px; 
    border: 1px solid #000; 
    position: relative; 
}

#center { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 250px; 
    top: 250px; 
    background: #000;
    @include border-radius(50%);
}

.field { 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    background: #f00; 
    @include border-radius(50%);
    @include transform(translateX(50px));
}

.move {
    @include animation-name(move);
    @include animation-duration(3s);
}

@include keyframes(move) {
    0% {
        @include transform(translateX(50px));
    }
    100% {
        @include transform(translateX(200px));
    }
}

---

动画应该可以使用纯CSS实现。但是要设置它并触发动画，我假设可以使用JS

如果是这样的话，解决这个问题的一种方法就是使用一个元素（“循环包装器”），并将一个循环元素作为子元素。圆圈水平向右移动。通过复制“圆形包装器”并旋转每个包装器，您可以得到您所描述的东西

JavaScript:

for (var i = 0; i < 10; i += 1) {
    var ang = (i / 10) * 360;
    $('<div/>')
        .addClass('circle-wrapper')
        .append($('<div/>').addClass('red-circle'))
        .css({
           transform: 'rotate(' + ang + 'deg)'
        })
        .appendTo($('body'));
}

// trigger anim
$('button').click(function () {
    $('.red-circle').addClass('move');
});

---

在这个例子中，圆形包装器被赋予了一个宽度和一个边框，以便更容易理解发生了什么。此外，该按钮将只触发动画一次（因为移动类未被删除）。

我将在控制台样式->动画名称：移动中获取这些值；动画持续时间：3s；使用删除线，就像我添加类时没有应用它们一样。你知道为什么会这样吗？没有任何内容覆盖这些值。另外，请查看我的编辑，因为我无法更改DOM的结构。这可能是因为缺少浏览器供应商前缀（-webkit，-moz，-ms）。我没有全部添加它们，它在Chrome中对我有效。好吧，我不知道你不能更改DOM。我认为应该可以为每个字段内部提供正确的transorm，然后添加一个额外的css类。每个内场的旋转必须根据它自身和黑圈之间的位置来计算。我计算过了，它们都向同一个方向移动。请检查我的编辑：）

.black-circle {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 100%;
    left: 250px;
    top: 150px;
}
.circle-wrapper {
    transform-origin: 10px 10px;
    position: absolute;
    left: 260px;
    top: 160px;
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.red-circle {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 100%;
    transform: translateX(50px);
}
.move {
    animation-name: move;
    animation-duration: 3s;
}
@keyframes move {
    0% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(200px);
    }
}