Alexander Deplov

Animated circles from the center to outside

Animated circles from the center to outside

Code

var bg = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center
})
var innerRadius = 50
var rootGroup = new Group()
for (var i = 1; i < 10; i++) {
    createCircles(5 * i, 30 * i)
}

function moveOutCircle(point) {
    var circle = new Path.Circle({
        radius: 10,
        fillColor: 'blue',
        center: point,
        applyMatrix: false
    })
    circle.onFrame = function(event) {
        var center = view.center
        var outPoint = point
        circle.position.x += point.x
        circle.position.y += point.y
    }
}

function createCircles(max, distanceFromCenter) {
    var angle = 360 / max
    var group = new Group()
    group.applyMatrix = false
    for (var i = 0; i < max; i++) {
        var circle = new Path.Circle({
            radius: 10,
            fillColor: '#1363DF',
            center: [view.center.x, view.center.y + distanceFromCenter],
            parent: group,
            applyMatrix: false
        })
        circle.onFrame = function(event) {
            var scaleAnim = (1.5 + Math.sin(i * 0.1 + event.count * 0.04 - i * 15)) * 0.5
            this.scaling = scaleAnim
            this.fillColor.hue = 20 + i * Math.sin(i + event.time * 2 - i * 30) * 2.2
        }
        circle.rotate(angle * i, view.center)
    }
    rootGroup.addChild(group)
}

function onFrame(event) {
    for (var i = 0; i < rootGroup.children.length; i++) {
        var rows = rootGroup.children[i]
        rows.position.x = view.center.x + Math.sin(event.count * 0.02) * 10 * i
        rows.position.y = view.center.y + Math.cos(event.count * 0.03) * 20
        rows.rotation = Math.sin(i * event.count * 0.001) * 20
    }
}