Fx is the module that provides effects and tweening functions, as well as wrappers for eficient timer based animations like animationTime
and requestAnimationFrame
wrappers.
The main constructor function for the Fx class. Use this to create a new animation effect.
var fx = new PhiloGL.Fx(options);
Creating a simple animation instance that transitions an objects height value from a value to another one. In this example we also use PhiloGL.Fx.compute
method to to linear interpolation (lerp).
var obj = {}, from = 10, to = 20;
var fx = new PhiloGL.Fx({
duration: 1500,
transition: PhiloGL.Fx.Transition.Back.easeOut,
onCompute: function(delta) {
obj.height = PhiloGL.Fx.compute(from, to, delta);
},
onComplete: function() {
alert("completed!");
}
});
In order to trigger/start the animation we call the start
method on the animation instance fx
.
fx.start([options]);
this.opt
inside the onCompute
and onComplete
methods.Creating a simple animation instance that transitions an objects height value from a value to another one. In this example we also use PhiloGL.Fx.compute
method to to linear interpolation (lerp).
var obj = {};
//create a Fx instance
var fx = new PhiloGL.Fx({
duration: 1500,
transition: PhiloGL.Fx.Transition.Back.easeOut,
onCompute: function(delta) {
//access `from` and `to` from the options object
var from = this.opt.from,
to = this.opt.to;
obj.height = PhiloGL.Fx.compute(from, to, delta);
},
onComplete: function() {
alert("completed!");
}
});
//start the animation with custom `from` and `to` properties.
fx.start({
from: 10,
to: 20
});
This method should be called at each frame to compute a new step for the animation. If the animation is over then this method will not have any effect on the fx
instance.
fx.step();
Creating a simple animation instance that transitions an object’s height from a value to another one. In this example we also use PhiloGL.Fx.compute
method to do linear interpolation (lerp).
var obj = {};
//create a Fx instance
var fx = new PhiloGL.Fx({
duration: 1500,
transition: PhiloGL.Fx.Transition.Back.easeOut,
onCompute: function(delta) {
//access from and to from the options object
var from = this.opt.from,
to = this.opt.to;
obj.height = PhiloGL.Fx.compute(from, to, delta);
},
onComplete: function() {
alert("completed!");
}
});
//start the animation with custom `from` and `to` properties.
fx.start({
from: 10,
to: 20
});
//call the animation at 60 frames per second
setInterval(function() {
fx.step();
}, 1000 / 60);
When using Fx.requestAnimationFrame
there’s no need to use this method, since an internal queue that calls animations steps is used automatically. The only methods generally used are then the Fx
constructor and the start
method.
Fx.compute
is a static method that performs a linear number interpolation (lerp) for a given delta value.
PhiloGL.Fx.compute(from, to, delta);
Creating a simple animation instance that transitions an object’s height from a value to another one. We use PhiloGL.Fx.compute
to interpolate between two number values.
var obj = {};
//create a Fx instance
var fx = new PhiloGL.Fx({
duration: 1500,
transition: PhiloGL.Fx.Transition.Back.easeOut,
onCompute: function(delta) {
//access from and to from the options object
var from = this.opt.from,
to = this.opt.to;
obj.height = PhiloGL.Fx.compute(from, to, delta);
},
onComplete: function() {
alert("completed!");
}
});
Fx.animationTime
is a static method that performs (if possible) high performance interface to Date.now
or new Date.getTime()
. You can read more about animationTime
here.
PhiloGL.Fx.animationTime();
Log the number of milliseconds passed since the beginning of the interval.
var start = PhiloGL.Fx.animationTime();
setInterval(function() {
console.log(PhiloGL.Fx.animationTime() - start);
}, 1000 / 60);
Fx.requestAnimationFrame
is a static method that receives a callback to be executed when the next frame for an animation is ready. In most cases this method is recommended over simple setTimeout
s because of various reasons exposed in the Mozilla and Chrome articles. Since this is a cross-browser method, when requestAnimationFrame
is not natively implemented in the browser the Framework will fallback to setTimeout
instead.
PhiloGL.Fx.requestAnimationFrame(callback);
Log the number of milliseconds passed since the beginning of the animation.
var Fx = PhiloGL.Fx,
start = Fx.animationTime();
Fx.requestAnimationFrame(function callback() {
console.log(Fx.animationTime() - start);
Fx.requestAnimationFrame(callback);
});
An object containing multiple easing functions. Each easing function (except for linear
) has easeIn
, easeOut
and easeInOut
properties. The easing and transition equations are slightly based on Robert Penner’s equations. We’ve taken the same convention as in the MooTools JavaScript Framework http://mootools.net. Copyright © 2006-2011 Valerio Proietti, http://mad4milk.net/. MIT license http://mootools.net/license.txt.
PhiloGL.Fx.Transition.Quart.easeInOut;
Create a new animation object that has a Quart.easeInOut
transition.
var fx = new PhiloGL.Fx({
duration: 1500,
transition: PhiloGL.Fx.Transition.Back.easeOut,
onCompute: function(delta) {
obj.height = PhiloGL.Fx.compute(from, to, delta);
},
onComplete: function() {
alert("completed!");
}
});
The possible objects for transitions are described below.
Displays a linear transition.
Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.
Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.
Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
p^6
.Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.
Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.
Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.
Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.
Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut