DEPRECATED: This plugin is no longer necessary!

Since version 6.3.0 NativeScript has a native requestAnimationFrame, so this plugin is no longer needed. tween.js will work out of the box.

nativescript-tweenjs

This plugin returns a working TWEEN object and creates a bunch of polyfills so you can use tweenjs in your NativeScript app.

Tween.js will tween variable, which you can then attach to ANY UI attribute.

NOTE: NativeScript's declarative and imperative animations will always be more performant. Use Tween.js sparingly and only if you need to tween a paramenter not available in the current NativeScript APIs.

Installation

NativeScript 4.x

tns plugin add nativescript-tweenjs

License

This is released under the MIT License, meaning you are free to include this in any type of program.

Sample Snapshot

Usage

To use the module you just require() it:

var TWEEN = require('nativescript-tweenjs').TWEEN;

or import it:

import { TWEEN } from 'nativescript-tweenjs');

Example (from the demo app)

In this example we will tween a label's text and its height.

• main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page"
  xmlns:ui="nativescript-tweenjs">
  <StackLayout class="p-20">
    <Label text="{{ message }}" height="{{ bungee }}" class="t-20 text-center c-black bg-primary" textWrap="true"/>
  </StackLayout>
</Page>

• main-page.ts

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { HelloWorldModel } from './main-view-model';
import { TWEEN } from 'nativescript-tweenjs';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
  // Get the event sender
  let page = <pages.Page>args.object;
  page.bindingContext = new HelloWorldModel();

  var tween = new TWEEN.Tween({ x: 50 })
    .to({ x: 400 }, 5000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(object => {
      page.bindingContext.set('message', Math.round(object.x));
      page.bindingContext.set('bungee', object.x);
    })
    .start();
}

For more information on how to use tween.js, see the tween.js documentation.