ludo.svg.easing

circle.animate({
     cx : 100, cy: 100, r: 10
}, {
     duration: 200,
     easing: ludo.svg.easing.outCubic,
     complete: function(){ console.log('finished') }
});

Methods

---

<static> bounce()

bounce easing functions

Source:

• svg/animation.js, line 959

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.bounce
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> bounce()

bounce easing functions

Source:

• svg/animation.js, line 988

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outCirc
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> elastic()

elastic easing functions

Source:

• svg/animation.js, line 1016

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.elastic
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inCirc()

inCirc easing functions
circular easing in - accelerating from zero velocity

Source:

• svg/animation.js, line 868

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inCirc
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inCubic()

inCubic easing functions

Source:

• svg/animation.js, line 436

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inCubic
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inExpo()

inExpo easing functions
exponential easing in - accelerating from zero velocity

Source:

• svg/animation.js, line 780

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inExpo
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutCirc()

inOutCirc easing functions
circular easing in/out - acceleration until halfway, then deceleration

Source:

• svg/animation.js, line 928

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutCirc
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutCubic()

inOutCubic easing functions

Source:

• svg/animation.js, line 493

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutCubic
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutExpo()

inOutExpo easing functions
exponential easing in/out - accelerating until halfway, then decelerating

Source:

• svg/animation.js, line 837

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutExpo
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutQuad()

inOutQuad easing functions

Source:

• svg/animation.js, line 406

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutQuad
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutQuart()

inOutQuart easing functions

Source:

• svg/animation.js, line 580

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutQuart
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inOutQuint()

inOutQuint easing functions

Source:

• svg/animation.js, line 667

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inOutQuint
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inQuad()

inQuad easing functions

Source:

• svg/animation.js, line 350

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inQuad
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inQuart()

inQuart easing functions

Source:

• svg/animation.js, line 523

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inQuart
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inQuint()

inQuint easing functions

Source:

• svg/animation.js, line 610

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inQuint
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> inSine()

inSine easing functions

Source:

• svg/animation.js, line 697

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.inSine
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> linear()

Source:

• svg/animation.js, line 320

Example

var v = new ludo.View({
     renderTo: document.body,
     layout:{
         width:'matchParent', height:'matchParent'
     }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50 });
circle.css('fill', '#ff0000');
svg.append(circle);
circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.linear
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outCirc()

outCirc easing functions
circular easing out - decelerating to zero velocity

Source:

• svg/animation.js, line 898

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outCirc
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outCubic()

outCubic easing functions

Source:

• svg/animation.js, line 464

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outCubic
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outExpo()

outExpo easing functions
exponential easing out - decelerating to zero velocity

Source:

• svg/animation.js, line 808

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outExpo
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outQuad()

outQuad easing functions

Source:

• svg/animation.js, line 378

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outQuad
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outQuart()

outQuart easing functions

Source:

• svg/animation.js, line 551

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outQuart
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outQuint()

outQuint easing functions

Source:

• svg/animation.js, line 638

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outQuint
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outSine()

outSine easing functions
sinusoidal easing in/out - accelerating until halfway, then decelerating

Source:

• svg/animation.js, line 751

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outSine
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});

---

<static> outSine()

outSine easing functions

Source:

• svg/animation.js, line 724

Example

var v = new ludo.View({
     renderTo: document.body, layout:{ width:'matchParent', height:'matchParent'  }
});
var svg = v.svg();

var circle = svg.$('circle', { cx: 100, cy: 100, r: 50, fill: '#ff0000' });
svg.append(circle);

circle.animate({
     cx:300, cy: 200
},{
     easing: ludo.svg.easing.outSine
     duration: 1000,
     complete:function(){
         console.log('completed');
  }
});