https://github.com/tralves/nativescript-tweenjs

Use Tween.js in your NativeScript apps.
https://github.com/tralves/nativescript-tweenjs

Last synced: about 2 months ago
JSON representation

Use Tween.js in your NativeScript apps.

• Host: GitHub
• URL: https://github.com/tralves/nativescript-tweenjs
• Owner: tralves
• License: mit
• Created: 2018-10-25T01:22:23.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-07-23T09:16:58.000Z (over 3 years ago)
• Last Synced: 2024-09-23T19:16:07.931Z (4 months ago)
• Language: JavaScript
• Size: 2.16 MB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/nativescript-tweenjs.svg)](https://www.npmjs.com/package/nativescript-tweenjs) [![npm](https://img.shields.io/npm/l/nativescript-tweenjs.svg)](https://www.npmjs.com/package/nativescript-tweenjs) [![npm](https://img.shields.io/npm/dt/nativescript-tweenjs.svg?label=npm%20d%2fls)](https://www.npmjs.com/package/nativescript-tweenjs)

# 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](https://docs.nativescript.org/ui/animation) 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

```bash

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

![Sample1](docs/tweenjs.gif)

## Usage

To use the module you just `require()` it:

```js

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

```

or `import` it:

```js

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

```

### Example (from the [demo app](demo/))

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

- `main-page.xml`

```xml

  

    

  

```

- `main-page.ts`

```typescript

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 = 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](https://github.com/tweenjs/tween.js).