tina

TINA

Tweening and INterpolations for Animation

Warning: Still in beta version!

Animation library to easily create customisable tweens, timelines, sequences and other playable components.

• Easy to use, friendly API
• Easy to debug
• High performance
• Open source and MIT License
• A consequent library of easing and interpolation methods
• A variety of components such as Timeline, Sequence and Recorder
• High flexibility (tween parameters can easily be modified after creation and even when they are running)
• Running options: delay, iterations, persist (speed, and pingpong coming soon)
• High customizability (possibility to use custom easing and interpolation functions and playable components)
• Good synchronisation between tweens
• Possibility to alter objects while they are tweening (enabled by relative tweening)
• No rounding errors on classical tweens (the last property value is guaranteed to be reached)
• Managed loss of focus of the page (user changes tab or minimise the application)
• Creation and removal of tweens within the callback of another tween will not result in any unwanted side effect

How to use

Include tina's build in your html using either the minified library or the unminified version.

<script src="tina.min.js"></script>

API

Existing playable components are: Tween, Timeline, Sequence, Timer, Ticker, Recorder, Delay. The following is a non-exhaustive list of possibilities offered by the API.

Tween

To create and start a tween (it will be automatically updated):

	var myObject = { x: 0 };
	var propertiesToTween = ['x'];
	var duration = 2; // in seconds
	var myTween = new TINA.Tween(myObject, propertiesToTween)
		.to(duration, { x: 1 })
		.start();

To create and start a tween without affecting it to a variable:

	TINA.Tween(myObject, ['x'])
		.to(duration, { x: 1 })
		.start();

To tween an array:

	var myArray = [0, 1, 0];
	var myTween = new TINA.Tween(myArray)
		.to(duration, [0, 2, 1])
		.start();

To tween several properties:

	var myTween = new TINA.Tween(myObject, ['x', 'y'])
		.to(duration, { x: 1, y: 0 })
		.start();

To chain several transitions:

	var myTween = new TINA.Tween(myObject, ['x'])
		.to(duration1, { x: 1 })
		.to(duration2, { x: 2 })
		.start();

To ease the tweening:

	var myObject = { x: 0 };
	var easingParameter = 2;

	var myTween = new TINA.Tween(myObject, ['x'])
		.to(duration, { x: 1 }, 'elasticInOut', easingParameter)
		.start();
	// or
	var myTween = new TINA.Tween(myObject, ['x'])
		.to(duration, { x: 1 }, TINA.easing.elasticInOut, easingParameter)
		.start();

To use interpolation functions:

	var myObject = { abc: 'Hello' };

	var myTween = new TINA.Tween(myObject, ['abc'])
		.to(duration, { abc: 'World' })
		.interpolations({ abc: 'string' })
		.start();
	// or
	var myTween = new TINA.Tween(myObject, ['abc'])
		.to(duration, { abc: 'World' })
		.interpolations({ abc: TINA.interpolation.string })
		.start();

To start tweening after a given delay:

	var myTween = new TINA.Tween(myObject, ['x']).to(duration, { x: 1 }).delay(1);

To add callbacks on specific events:

	var myTween = new TINA.Tween(myObject, ['x'])
		.to(duration, { x: 1 })
		.onStart(function () {
			console.log('Tweening will now start');
		})
		.onUpdate(function (time, dt) {
			console.log('My object at time', time, 'is', myObject);
		})
		.onComplete(function () {
			console.log('Tweening is complete');
		})
		.delay(1);

Timeline

Timelines are used to play tweens in parallel. To create a timeline:

	var timePosTweenA = 0;
	var timePosTweenB = 2;
	var myTimeline = new TINA.Timeline()
		.add(timePosTweenA, myTweenA)
		.add(timePosTweenB, myTweenB)
		.start();

Sequence

Sequences are used to chain tweens. To create a sequence:

 	// 1 second delay between the end of myTweenB and the start of myTweenC
	var mySequence = new TINA.Sequence()
		.add(myTweenA)
		.add(myTweenB)
		.addDelay(1)
		.add(myTweenC)
		.start();

Delay

To create a delay:

	var myDelay = new TINA.Delay(duration);

Delays can be used as a setTimeout that would be synchronised with all the other tweens. It can also be used to apply some treatment to objects for a given duration. For example, moving a particle for a fixed duration and then destroy it:

	var particleSpeedX = 5;
	var particleSpeedY = 0;
	var myParticle = new Particle();
	var myDelay = new TINA.Delay(duration)
		.onUpdate(function (time, dt) {
			myParticle.x += particleSpeedX * dt;
			myParticle.y += particleSpeedY * dt;

			particleSpeedX *= Math.pow(0.9, dt);
			particleSpeedY += gravity * dt;
		})
		.onComplete(function () {
			myParticle.destroy()
		});

Tweener

A tweener is responsible for tweening playable components. The tweener can be either a timer or a ticker.

If no tweener is specified, any started playable will be tweened by the default tweener.

	// myTween will be tweened by the default tweener
	var myTween = new TINA.Tween(myObject, ['x'])
		.to(1, { x: 5 })
		.start();

To manually specify a tweener for a playable component:

	// myTween will be tweened by myTweener
	var myTween = new TINA.Tween(myObject, ['x'])
		.to(1, { x: 5 })
		.tweener(myTweener)
		.start();

To specify the default tweener for every tween:

	// I choose a timer as my default tweener
	var myTimer = new TINA.Timer().useAsDefault();
	// myTween will be attached to myTimer and will take 0.5 seconds to tween
	var myTween = new TINA.Tween(myObject, ['x']).to(0.5, { x: 5 }).start();

Timer

At every update its internal time is increased by a fixed proportion of the time elapsed since the previous update. To create a default timer that will update automatically:

	var myTimer = new TINA.Timer().useAsDefault().start();

To create a timer and update it manually:

	var myTimer = new TINA.Timer().useAsDefault();
	TINA.add(myTimer);

	function update() {
	 	TINA.update();
	 	requestAnimationFrame(update);
	}

	requestAnimationFrame(update);

It is possible to specify the speed at which time will elapse for the timer. This flexbility allows the user to use units that he is comfortable with. It could be 1 unit per second, 24 u/s, 60 u/s or 1000 u/s (or even 237.6 u/s if you come from another planet).

By default the timer goes at a speed of 1 unit per second. Every second, the time will increase by the given tups:

	var tups = 60; // Time units per second
	var myTimer = new TINA.Timer(tups);

Effect of different values for the tups:

	var myTimer1 = new TINA.Timer(1);
	var myTimer60 = new TINA.Timer(60);
	var myTimer1000 = new TINA.Timer(1000);

	// The following will tween myObject in 10 seconds
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTimer1);

	// The following will tween myObject in 1 / 6 seconds
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTimer60);

	// The following will tween myObject in 0.01 seconds
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTimer1000);

Ticker

At every update its internal time is increased by a fixed amount.

To create a ticker with automatic updates:

	var myTicker = new TINA.Ticker().useAsDefault().start();

To create a ticker and update it manually:

	var myTicker = new TINA.Ticker().useAsDefault();
	TINA.add(new TINA.Ticker());

	function update() {
	 	TINA.update();
	 	requestAnimationFrame(update);
	}

	requestAnimationFrame(update);

Similarly to a timer it is possible to specify how fast the time goes for a ticker. At every update the time will increase by the given tupt:

	var tupt = 2; // Time units per tick/update
	var myTicker = new TINA.Ticker(tupt);

Effect of different values for the tupt:

	var myTicker01 = new TINA.Ticker(0.1);
	var myTicker1 = new TINA.Ticker(1);
	var myTicker10 = new TINA.Ticker(10);

	// The following will tween myObject in 100 updates
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTicker01);

	// The following will tween myObject in 10 updates
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTicker1);

	// The following will tween myObject in 1 update
	TINA.Tween(myObject, ['x']).to(10, { x: 1 }).tweener(myTicker10);

TINA's update callback

In the case when tweeners automatically update, TINA can be used as the main loop of the application.

	// t is the total time elapsed since TINA started
	// dt is the time elapsed since the previous update of TINA
	// both durations are in milliseconds
	TINA.onUpdate(function (t, dt) {
		// At this point,
		// all my tweens are up to date
		// for the current iteration
		myGameLogic.update(t, dt);
		myPhysics.update(dt);
		myRenderer.update();
		...
	});

How to build

You would need to have component and uglify installed:

	npm install -g component
	npm install -g uglifyjs

If component and uglify are already install, use the following command to build:

	component build; mv build/build.js build/tina.js; uglifyjs build/tina.js -o build/tina.min.js

Made in Wizcorp.