Animation

animateTo():

I2Djs provides easy syntax to perform animation transitions of one or more elements from the current state to the target state in a given duration(ms).

circleNode.animateTo({
    duration: 500,
    loop: Infinity,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});

  • Duration [optional] - The number of milliseconds animation takes place to complete. The default is 0.

  • Ease [optional] - The rate of the animation's change over time. Accepts the predefined values - 'easeOutQuad', 'easeInQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInSin', 'easeOutSin', 'easeInOutSin' 'bounce', 'linear', 'elastic' and custom. Defaults to 'linear'.

  • Loop [optional] - The Number of times animation to be performed. Defaults to 1.

  • Direction [optional] - Animation direction can be controlled based on the following values - 'normal' (forward) , 'reverse' (backward) and 'alternate' (direction changes after every iteration)

  • attr [optional] - target attributes. Every attribute will be animated from the current state to the specified state in the specified duration. Object with attribute (key, value) pairs.

  • Style [optional] - The object to specify the target state of the Style properties. Every style property will be animated from the current state to the specified state in the specified duration. Object with attribute (key, value) pairs.

  • end [optional] - The specified function will be called on completion of the animation.

          circle.animateTo({
               duration : 1000,
               ease : 'easeInOutSin',
               loop : 10,
               direction : 'alternate'
               attr : {
                   r: 100
               },
               style : {
                   opacity: 0
               },
               end: function(){
                   this.remove();
               }
           })

.animatePathTo()

API to perform Path Animations.

Examples: Path Animato

#.createEl({
	el: 'path',
	attr: {
		d: 'M366.2,204.2 c-9.8,0 -15,-5.6 -15,-15.1 V77.2 h-85 v28 h19.5 c9.8,0 8.5,2.1 8.5,11.6 v72.4 c0,9.5 0.5,15.1 -9.3,15.1 H277 h-20.7 c-8.5,0 -14.2,-4.1 -14.2,-12.9 V52.4 c0,-8.5 5.7,-12.3 14.2,-12.3 h18.8 v-28 h-127 v28 h18.1 c8.5,0 9.9,2.1 9.9,8.9 v56.1 h-75 V53.4 c0,-11.5 8.6,-13.3 17,-13.3 h11 v-28 H2.2 v28 h26 c8.5,0 12,2.1 12,7.9 v142.2 c0,8.5 -3.6,13.9 -12,13.9 h-21 v33 h122 v-33 h-11 c-8.5,0 -17,-4.1 -17,-12.2 v-57.8 h75 v58.4 c0,9.1 -1.4,11.6 -9.9,11.6 h-18.1 v33 h122.9 h5.9 h102.2 v-33 H366.2 z'
	},
	style: {
		lineWidth: 10,
		strokeStyle: '#f00000',
		shadowColor: 'black',
		lineCap: 'round'
	}
})
	.animatePathTo({
		duration: 10000,
		loop: 10,
		ease: 'linear',
		direction: 'alternate'
	});

.morphTo()

I2Djs provides a special API to perform Path Morphing. This API is specific to the Path element. It accepts target 'd' attribute value.

Examples: Path Morph Animator

renderer.createEl({
	el: 'path',
	attr: {
		d: 'M100,250 C100,100 400,100 400,250 z'
	},
	style: {
		lineWidth: '3',
		strokeStyle: '#f00000'
	},
	bbox: false
})
	.animateTo({
		duration: 1000,
		loop: 100,
		direction: 'alternate',
		// loop:100,
		attr: {
			d: 'M100,250 C500,66 -1,48 400,250'
		}
	});

#.interrupt()

It interrupts the transition on the context node. Used in case if we need to kill the animation on a specific node. It's a method on Node as well as NodeCollection.

PreviousJoin ActionNextChaining