CD2H gitForager

Wizcorp/tina.js

Name: tina.js

Owner: Wizcorp

Description: Tweening and INterpolations for Animation

Created: 2015-07-07 12:38:24.0

Updated: 2017-11-25 00:59:05.0

Pushed: 2017-08-02 10:05:45.0

Homepage: null

Size: 583

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

TINA

Tweening and INterpolations for Animation

A comprehensive, high performance, easy to use, open source animation library in JavaScript.

Easy to use (API strongly inspired by Tween.js)
High performance (Competitive with Tweenjs and GSAP, benchmark coming soon)
High flexibility (tween transitions can easily be modified after creation)
High customizability (possibility to use custom easings, interpolations and components)
Play options (delay, iterations, pingpong, persist and speed)
Open source and MIT License (use it as you please)
A consequent library of easing and interpolation methods
A variety of components such as Timeline, Sequence and Recorder (CSSTween coming soon)
Good synchronisation between tweens
Relative tweening enables the possibility to apply several simultaneous tweens on a single property
Nested object tweening enables the possibility to alter nested objects using a single tween
Compatible with Node.js!
Bonus: Creation and removal of tweens within the callback of another tween will not result in any unwanted side effect (infamous bug of other tweening libraries)

Note: Do not hesitate to contribute by reporting issues or by submitting your own components and interpolations.

Warning: Still in beta version! Do not be shy, report issues

How to use

In a browser

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

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

In Node.js

Install TINA using `npm install tina`, then require it:

TINA = require('tina');

JSFiddle examples

API

Existing playable components are: Tween, NestedTween, Timeline, Sequence, Delay, Timer, Ticker, Recorder (CSSTween coming soon). The following is a non-exhaustive list of possibilities offered by TINA.

Tween

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

myObject = { x: 0 };
properties = ['x'];
duration = 500; // in milliseconds
myTween = new TINA.Tween(myObject, properties)
.to({ x: 1 }, duration)
.start();

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

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

To tween an array:

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

To tween several properties:

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

To chain several transitions:

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

To ease the tweening:

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

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

To use interpolation functions:

myObject = { abc: 'Hello' };

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

To start tweening after a given delay:

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

To add callbacks on specific events:

myTween = new TINA.Tween(myObject, ['x'])
.to({ x: 1 }, duration)
.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(1000);

NestedTween

Nested tweens give the ability to tween nested objects using a single tween. A nested tween allows to interpolate between nested objects. To tween a nested tween:

nestedObject = {
position: { x: 0, y: 0 },
alpha: 0


myNestedTween = new TINA.NestedTween(nestedObject, ['position.x', 'position.y', 'alpha'])
{
position: { x: 10, y: 20 },
alpha: 1
00)
rt();

Note: the NestedTween API remains identical to Tween and all the functionalities of Tween are available to the NestedTween component.

Timeline

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

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

Sequence

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

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

Delay

To create a delay:

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:

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

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

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.

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

To manually specify a tweener for a playable component:

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

To specify the default tweener for every tween:

 choose a timer as my default tweener
myTimer = new TINA.Timer().useAsDefault();
yTween will be attached to myTimer
myTween = new TINA.Tween(myObject, ['x'])
.to({ x: 5 }, 1000)
.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:

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

To create a timer and update it manually:

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

tion update() {
TINA.update();
requestAnimationFrame(update);


estAnimationFrame(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 ups`,60 ups`` or `1000 ups(or even ``237.6 ups``` if you come from another planet).

By default the timer goes at a speed of 1000 units per second (milliseconds). Every second, the time will increase by the given `tups`:

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

Effect of different values for the `tups`:

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

he following will tween myObject in 100 seconds
.Tween(myObject, ['x']).to({ x: 1 }, 100).tweener(myTimer1);

he following will tween myObject in 1.667 seconds
.Tween(myObject, ['x']).to({ x: 1 }, 100).tweener(myTimer60);

he following will tween myObject in 0.1 seconds
.Tween(myObject, ['x']).to({ x: 1 }, 100).tweener(myTimer1000);

Ticker

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

To create a ticker with automatic updates:

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

To create a ticker and update it manually:

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

tion update() {
TINA.update();
requestAnimationFrame(update);


estAnimationFrame(update);

By default the ticker goes at a speed of 1 unit per update. But 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`:

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

Effect of different values for the `tupt`:

myTicker1 = new TINA.Ticker(1);
myTicker10 = new TINA.Ticker(10);
myTicker20 = new TINA.Ticker(20);

he following will tween myObject in 100 updates
.Tween(myObject, ['x']).to({ x: 1 }, 100).tweener(myTicker1);

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

he following will tween myObject in 5 updates
.Tween(myObject, ['x']).to({ x: 1 }, 100).tweener(myTicker20);

TINA's update callback

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

 is the total time elapsed since TINA started
t is the time elapsed since TINA's previous update
oth durations are in milliseconds
.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();
...

Made in Wizcorp.

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.