Transition Animation module
is a set of components and functions that
allows the developer to create complexes animations.
This study do not aim to replace CSS Animations.
Its goal is to proposes:
- enough expressivity to allow fine tuning animations
- to animate any kind of component's property (an array, a string, ...)
- be compatible with ViniSketch PAR and SEQ scheduling
- be compatible with ViniSketch Dataflow
- be optimised to run on a mobile devices
The module is based on tree main classes:
- Chronometer; a periodical signal (tick) generator
- Pace; implements a function in the range [0,1] to [0,1]. Useful to implement for instance an EaseIn transformation
- Trajectory; an component with one input in, and any number of outputs, for transforming an input [0,1] into the value of a component's property
The object model and APIs were strongly influenced by this public work.
Simple example
The next graph shows how to animate the size of a view.
- first you create a Chronometer that will control the animation duration
- and you create a trajectory based on Vector2D class.
- then you connect the chronometer to the trajectory and the trajectory to the view
// elements for your animation
var chrono = new vs.ext.fx.Chronometer ({repeat: 10, duration: 3000}).init ();
var traj = new vs.ext.fx.Vector2D ({values: [[100, 100], [220, 50], [100, 100]]}).init ();
var view = new vs.ui.View ({id: "my_view"}).init ();
// connect your components within the default dataflow
chrono
.connect ("tick").to (traj, "tick")
.connect ("out").to (view, "size");
// build the default dataflow
this.buildDataflow ();
// start the animation
chrono.start ();
The helper "vs.ext.fx.createTransition" allows to create a full animation
with only one call.
Attach an animation to a property
This demo shows how to instrument a component property.
On the property change, the value is animated along a trajectory.
Write (or copy) a text into the textarea.
On blur event the text is animated.
// options for the animation
var options = {
trajectory: new StringTrajectory ().init (),
duration: 1000
};
vs.ext.fx.attachTransition (this.label /* component */, "text" /* property name */, options);
Disk
This demo shows how to use PAR or SEQ to mix animations
This demo is based on the Zanimo demo Circles: https://zanimo.us/
Credits @peutetre Zanimo
Click on following buttons to pause, start or reconfigure the animation.
- Pause
- Start
- SEQ Animation
- PAR Animation
Newton's cradle
This simple demo shows a Newton's cradle, with 2 sequential animations,
and a pace that simulates the physics.
Click on following buttons to pause or start the animation.
Thinglist
This more complex demo simulates the Thinglist application.
List items opening and the settings menu are animated.