Alexander Deplov

Animated objects group

Animated objects group

Code

var bordersGroup = []
var padding = 70
var strokeWidth = 3
var star = new Path.Star(view.center + [-padding, 0], 6, 25, 40)
star.smooth({ type: 'geometric', factor: 0.5 })
star.fillColor = 'blue'
star.applyMatrix = false
star.rotate(90)
star.onMouseEnter = function(event){
    this.tweenTo({
        fillColor: 'red'
    }, 200)
    view.element.style.setProperty('cursor', 'pointer')
}
star.onMouseLeave = function(event){
    this.tweenTo({
        fillColor: 'blue'
    }, 200)
    view.element.style.setProperty('cursor', null)
}
var starCircle = new Path.Circle(star.position, 50)
starCircle.strokeColor = 'blue'
starCircle.strokeWidth = strokeWidth
starCircle.applyMatrix = false
starCircle.sendToBack()
bordersGroup.push(starCircle)

    
var circle = new Path.Circle(view.center + [padding,0] , 30)
circle.applyMatrix = false
circle.fillColor = 'blue'
var circleCircle = new Path.Circle(circle.position, 50)
circleCircle.strokeColor = 'blue'
circleCircle.strokeWidth = strokeWidth
circleCircle.applyMatrix = false
bordersGroup.push(circleCircle)


var roundedRect = new Path.Star(view.center + [-padding, padding*2], 4, 20, 44)
roundedRect.smooth({ type: 'continuous', factor: 0.02 })
roundedRect.rotate(45)
roundedRect.applyMatrix = false
roundedRect.fillColor = 'blue'
var roundedRectCirle = new Path.Circle(roundedRect.position, 50)
roundedRectCirle.strokeColor = 'blue'
roundedRectCirle.strokeWidth = strokeWidth
roundedRectCirle.applyMatrix = false
bordersGroup.push(roundedRectCirle)


var rect = new Path.Star(view.center + [padding, padding*2], 4, 35, 30)
rect.fillColor = 'blue'
rect.smooth({type: 'continuous', factor: 0.5})
rect.applyMatrix = false
var rectCirle = new Path.Circle(rect.position, 50)
rectCirle.strokeColor = 'blue'
rectCirle.strokeWidth = strokeWidth
rectCirle.applyMatrix = false
bordersGroup.push(rectCirle)

    
function onFrame(event){
    var scaleAnim = (5 + Math.sin(1 + event.count * 0.05))/5 
    star.scaling = scaleAnim
    star.rotate(1)
    starCircle.scaling = 0.85/scaleAnim

    circle.scaling = scaleAnim
    
    roundedRect.scaling = scaleAnim
    roundedRect.rotate(1.5)
    
    rect.rotate(-1.5)
    rect.scaling = scaleAnim
    rectCirle.scaling = 0.85/scaleAnim
    

}

project.activeLayer.position = view.center