nazariglez / pixi-tween

pixi-tween is a plugin for Pixi.js v3.0.8 or higher to create tween animations.

pixi-tween

pixi-tween is a plugin for Pixi.js v3.0.8 or higher to create tween animations.

Online examples: Easing, TweenPath

Installation

npm install pixi-tween

Usage

Browserify - Webpack

If you use Browserify or Webpack you can use pixi-tween like this:

var PIXI = require('pixi.js');
var tweenManager = require('pixi-tween'); //pixi-tween is added automatically to the PIXI namespace

//create PIXI renderer
var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

function animate(){
  window.requestAnimationFrame(animate);
  renderer.render(stage);
  PIXI.tweenManager.update();
}
animate();

Prebuilt files

var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

function animate(){
  window.requestAnimationFrame(animate);
  renderer.render(stage);
  PIXI.tweenManager.update();
}
animate();

How it works

This plugin add a new namespace names tween to the PIXI namespace, and this new namespace has 3 new classes Tween, TweenPath and TweenManager, also add an Easing object. And create an instance for TweenManager in PIXI.tweenManager, but all you need is add PIXI.tweenManager.update() in your requestAnimationFrame. You can pass as params for PIXI.tweenManager.update(delta) your own delta time, if you don't pass anything it will be calculated internally, for max accuracy calculating the delta time you can use the AnimationLoop plugin.

When a tween is ended, the instance will kept in the memory and in the tweenManager, but you can prevent this if you set .expire = true in the tween.

Using AnimationLoop

var renderer = new PIXI.autoDetectRenderer(800,600);
document.body.appendChild(renderer.view);

var animationLoop = new PIXI.AnimationLoop(renderer);

//Add a postrender or prerender event to add the tweenManager.update in the raf.
animationLoop.on('postrender', function(){
  PIXI.tweenManager.update(this.delta); //Pass as param the delta time to PIXI.tweenManager.update
});

animationLoop.start();

Events

Tween extends from PIXI.utils.EventEmitter, and emit some events: start, end, repeat, update, stop and pingpong. More info: Node.js Events

• start - callback(): Fired when the tween starts. If the tween has a delay, this event fires when the delay time is ended.
• end - callback(): Fired when the tween is over. If the .loop option it's true, this event never will be fired, and if the tween has an .repeat number, this event will be fired just when all the repeats are done.
• repeat - callback(repeat): Fired at every repeat cycle, if your tween has .repeat=5 this events will be fired 5 times.
• update - callback(elapsedTime): Fired at each frame.
• stop - callback(): Fired only when it's used the .stop() method. It's useful to know when a timer is cancelled.
• pingpong - callback(): If the pingPong option it's true, this events will be fired when the tweens returns back.

Paths

Move an object along a path it's easy with TweenPath. TweenPath use a similar PIXI.Graphics API to create paths, and once it's created our path we just need to add it to a tween with .path = ourPathCreated.

If you need draw your path (useful to debug), PIXI.Graphics has been enhanced with a new method named .drawPath(path). Use it the same way like .drawRectangle, .drawShape, etc...

Examples

See the Examples folder.

API

TweenManager

constructor()

The constructor

.tweens

An array with the tweens created

.update( delta )

The update method, make sure it is in the raf. You can pass a fixed delta time (like 0.016), your own calculated delta, or nothing. (Delta time in seconds not milliseconds).

.removeTween( tween )

Remove a tween from the .tweens array in the next frame.

.addTween( tween )

Normally you want to use .createTween(target) to create a tween, but, you can also create a tween with new PIXI.Tween(target) and add it in the manager with this method.

.createTween( target )

Return a new instance of PIXI.Tween managed by this tweenManager.

.getTweensForTarget( target )

Return an array with all the tweens for the given target.

TweenPath

constructor()

The constructor

.moveTo( x, y )

See PIXI.Graphics#moveTo

.lineTo( x, y )

See PIXI.Graphics#lineTo

.bezierCurveTo( cpX, cpY, cpX2, cpY2, toX, toY )

See PIXI.Graphics#bezierCurveTo

.quadraticCurveTo( cpX, cpY, toX, toY )

See PIXI.Graphics#quadraticCurveTo

.arcTo( x1, y1, x2, y2, radius )

See PIXI.Graphics#arcTo

.arc( cx, cy, radius, startAngle, endAngle, anticlockwise )

See PIXI.Graphics#arc

.drawShape( shape )

See PIXI.Graphics#drawShape

.clear()

Clear the path.

.closed

Set true to close your path.

.length

Get the points number

Tween

constructor( target [,manager] )

The constructor

.target

The object to animate

.manager

The TweenManager who manage this tween

.time

The animation time

.active

Read only, true if a tween is running

.easing

A easing function from PIXI.tween.Easing or a custom easing.

.expire

Set true if you want to delete this instance when the animation it's done.

.repeat

Times to repeat this tween.

.loop

Repeat this tween forever.

.delay

Set a delay time in milliseconds before the timer's count.

.pingPong

Set true to repeat back this tween.

.isStarted

Read only.

.isEnded

Read only.

.path

Set an instance of TweenPath to animate an object along the path.

.pathReverse

Reverse the path.

.addTo( manager )

Add this tween to a manager

.chain( tween )

When this tween it's finished, fire the chained tween.

.start()

Start the tween

.stop()

Stop the tween

.to( object )

Set the params to animate. Example: {x:100, y:100}

.from( object )

Set the params to start the animation. If you don't call .from the the values will be the actual values of the .to object.

.remove()

Remove this tween from the manager.

.clear()

Clear this tween.

.reset()

Reset this tween to the initial state, keeping the data like .time, .delay, etc...

update( delta [,deltaMS] )

The update method, you don't need to use this method, the manager will do this internally.

Easing

See Easing

pixi-tween's Issues

Move online examples

Dropbox has closed the public folder.

Redundant code in elastic easing functions

As far as I can tell, your elastic easing functions could be optimized by removing some redundant code. Note my inserted comments below:

const Easing = {
// snip
  inElastic: function(){
    return function(k){
      let s, a = 0.1, p = 0.4;
      if ( k === 0 ) return 0;
      if ( k === 1 ) return 1;
      // a is always less than 1; just set this stuff above and remove this if/else
      if ( !a || a < 1 ) { a = 1; s = p / 4; }
      else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
      return - ( a * Math.pow( 2, 10 * (k-1) ) * Math.sin( ( (k-1) - s ) * ( 2 * Math.PI ) / p ) );
    };
  },

  outElastic: function(){
    return function(k){
      let s, a = 0.1, p = 0.4;
      if ( k === 0 ) return 0;
      if ( k === 1 ) return 1;
      // a is always less than 1; just set this stuff above and remove this if/else
      if ( !a || a < 1 ) { a = 1; s = p / 4; }
      else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
      return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
    };
  },

  inOutElastic: function(){
    return function(k){
      let s, a = 0.1, p = 0.4;
      if ( k === 0 ) return 0;
      if ( k === 1 ) return 1;
      // a is always less than 1; just set this stuff above and remove this if/else
      if ( !a || a < 1 ) { a = 1; s = p / 4; }
      else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
      k *= 2;
      if ( k < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k - 1 ) ) * Math.sin( ( (k-1) - s ) * ( 2 * Math.PI ) / p ) );
      return a * Math.pow( 2, -10 * ( k - 1 ) ) * Math.sin( ( (k-1) - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
    };
  }
// snip
};

Does it support TS?

I can't find any information.

Tween drawing of path

Does anyone know if it's possible to animate the drawing of the path? Such as, drawing 0% to 100% of the path's length so it can be animated (basically like handwriting drawing animation)

Tweening a Sprites filter properties yields "n is undefined"

Setup:

//using a PIXI.Sprite:
sprite.filters=[new PIXI.filters.BlurFilter()];
//setup a tween for the blur property of the [0]'th filter, at first i tried { filters : [ { blur : 0.2 } ] } to no avail, then i tried:
tween 'from': { alpha: 0, y: 0, "filters[0]": { blur: 0.2 } }
'to':  { alpha: 1, y: -10, "filters[0]": { blur: 0.0 } }

That appears to work, but blows up the console with 'n is undefined' with below stack trace.

at u Line 1:4632 in pixi-tween.js
at u Line 1:4561 in pixi-tween.js
at value Line 1:7858 in pixi-tween.js
at value Line 1:6819 in pixi-tween.js
at value Line 1:9018 in pixi-tween.js

Incompatible with Pixi v4.1

Check this: pixijs/pixijs#3204

The import should be now: import * as PIXI from "pixi.js"

how to setting up a callback function?

how to setting up a callback function?

Chained tweens are always added to manager

I was wondering why the tween count in the manager was rising and noticed that when I was chaining non-expiring tweens, they were added to the manager every time on tween end.

https://github.com/Nazariglez/pixi-tween/blob/master/src/Tween.js#L169

So maybe it should be checked here if the tween has a manager already.

Visible pop at the end of some out animations, e.g. outElastic

For some of the "out" style animations (outElastic) there is very often a visual pop, where the last time step snaps everything into place. This piece of code is probably to blame:

      let t = this._elapsedTime+deltaMS;
      let ended = (t>=time);

      this._elapsedTime = ended ? time : t;
      this._apply(time);

Together with the visual pop I'm seeing, I'm guessing the code is somewhat incorrect. I'm not sure what the deltaMS value is (is it the next natural timestep, or is it time elapsed), but I'll speculate that it is the next natural timestep. If so, we shouldn't immediately set time completed at THIS time, but instead apply just normal (non-ended time) and modify the next timestep so it roughly matches the actual time left.

Instead of digging into the details, I did find a simple workaround that removes the visual pop however, that others also might want to do if the experience the pop. Simply replace this line:

      this._elapsedTime = t;

Basically we disregard the actual end time and just run with whatever time will elapse. I'm not sure why this seems to remove the pop and I haven't dug further into fixing the underlying cause, but at least everything is smooth, worst case with less precision on time elapsed.

Require pixi-tween in browserify return empty object

This code not working. TweenManager is undefined

const tween = require('pixi-tween');
new tween.TweenManager();

TweenPath

Hi, how can I find out the current animation point?

TweenPath doesn’t work with Pixiv5

I don’t think the latest PIXI.Graphics works with TweenPath. I have to hack everything in order for it to work.

Pixi v5 support

Hi!
Pixi-Tween 0.2.0 not working with Pixi.js 5.0.0-rc.3

Uncaught ReferenceError: PIXI is not defined
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at Object. (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at e (pixi-tween.js:formatted:1)
at pixi-tween.js:formatted:1
at Object../node_modules/pixi-tween/build/pixi-tween.js (pixi-tween.js:formatted:1)
at webpack_require (pixi-tween.js:formatted:1)
at Module../src/scripts/app/hints_component/limit_hints.js (pixi-tween.js:formatted:1)

unnecessary

pixi-tween/src/TweenPath.js

Line 130 in e806809

if(distance < this._tmpDistance[i])break;

Tween._from should be updated on start?

Would be nice if the internal _from of the tween would be updated on tween start. If I don't use from() I'd expect the tween to use whatever state the object has on start. Now the state gets stored on createTween().

Or do you disagree?