Raphaël Reference: Animation



The Animate Method

  • Elements: all
  • Parameters: final attributes of element, time (in ms), easing (see below), callback function
  • Usage: element.animate( { final attributes }, time, easing, callback )
  • Example: A button calls the function animateball, triggering the animation that increases the size of the circle, and changes its color and position. 
    var paper = new Raphael(document.getElementById('my_container'), 200, 200);
var C = paper.circle( 40, 50, 20 ).attr({ 'fill': 'red' })

function animateball() {
	C.animate({ 'cx': 80, 'r': 90, 'fill': 'blue' }, 3000, "bounce" );
	}

  • Example: A button calls the function toSquare, triggering the first animation. On completion, the function toDiamond is called. 
    var paper = new Raphael(document.getElementById('my_container'), 200, 200);
var P = paper.path( "M 60,150 L 160,150 L 105,50 Z" ).attr({ 'fill': 'blue' })

function toSquare() {
	P.animate({ 'path': "M 60,150 L 160,150 L 160,50 L 60,50 Z", 'fill': 'yellow' }, 3000, "linear", toDiamond );
	}

function toDiamond() {
	P.animate({ 'transform': "r45" }, 2000, "elastic" );
	}

Animations as Parameters

  • Elements: all
  • Notes: Creates an animation effect that can be repeatedly applied to several elements
  • Parameters: final attributes of element, time (in ms), easing (see below), callback function
  • Usage: Raphael.animation( { final attributes }, time, easing, callback )
  • Example: Two square are defined, then the same animation sequence is applied to both when the function animateSquares is called by a button. 
    var paper = new Raphael(document.getElementById('my_container'), 200, 200);
var s1 = paper.rect(20,20,30,30).attr({ 'fill': 'red', 'stroke-width': 0 })
var s2 = paper.rect(150,20,30,30).attr({ 'fill': 'blue', 'stroke-width': 0 })
var sAnimation = Raphael.animation({ 'width': 80, 'height': 80, 'fill': 'purple', 'x': 60, 'y': 50 }, 4000, "easeInOut")

function animateSquares() {
	s1.animate( sAnimation );
	s2.animate( sAnimation );
	}

Repeating Animations

  • Elements: all
  • Parameter: number or 'Infinity'
  • Usage: animation.repeat( number )
  • Example: A rectangle that never stops spinning: 
    var paper = new Raphael(document.getElementById('my_container'), 200, 200);
var R = paper.rect( 50,50,40,40 ).attr({ 'fill': 'red', 'stroke-width': 0 })
var keepRotating = Raphael.animation({ 'transform': 'r360' }, 2000 ).repeat( 'Infinity' )

R.animate( keepRotating )

Pausing, Stopping, and Resuming

  • Notes: Pause a moving element, resume from pause, or stop animation (without ability to resume)
  • Usage: element.stop( ), element.pause( ), element.resume( )
  • Example: Two square are defined, then the same animation sequence is applied to both when the function animateSquares is called by a button. 
    var paper = new Raphael(document.getElementById('pauseex'), 200, 200);
var square3 = paper.rect( 50, 50, 100, 100 ).attr({'fill':'green'})
var square3Anim = Raphael.animation( { 'transform': 'r360'}, 1500 ).repeat('Infinity')

function startSquare() { square3.animate( square3Anim ) }
function pauseSquare() { square3.pause() }

On Delay

  • Elements: all
  • Notes: A delay can be applied to an animation passed to the animation method
  • Usage: animation.delay( time )
  • Example: Two square are defined, then the same animation sequence is applied to both when the function animateSquares is called by a button. The animation is delayed by 1.5 seconds for the second square. 
    var paper = new Raphael(document.getElementById('my_container'), 200, 200);
var s1 = paper.rect(20,20,30,30).attr({ 'fill': 'red', 'stroke-width': 0 })
var s2 = paper.rect(150,20,30,30).attr({ 'fill': 'blue', 'stroke-width': 0 })
var sAnimation = Raphael.animation({ 'width': 80, 'height': 80, 'fill': 'purple', 'x': 60, 'y': 50 }, 4000, "easeInOut")

function animateSquares() {
	s1.animate( sAnimation );
	s2.animate( sAnimation.delay( 1500 ) );
	}

Easing Options

  • Elements: all
  • Notes: Changes the style of animation by adjusting the speed of animation at different points
  • Usage: string ('linear', '<', '>', '<>', 'bounce', 'elastic', 'backIn', 'backOut') passed to animate method as parameter
  • Example: All buttons below will move the square to the right over 2 seconds, with a different easing option.