Skip to content

2. API reference

Anton Kosykh edited this page Jan 18, 2018 · 6 revisions

Tweening preferences

import NanoTween from 'nanotween'
import { linear } from 'nanotween/easings'

const tween = NanoTween()
  .duration(10000)    // duration (in ms)
  .repeat(5)          // Repeats count (default - 0. You can pass Infinity for infinite loop)
  .easing(linear)     // Easing function (default - linear. For more info - see "2. Easings")
  .reverse()          // Reverse animation (calling twice returns to normal direction)

Control methods

NanoTween tweening mechanics are simple:

  • progress is a value from 0 to 1
  • Each NanoTween.update(time) increases progress value by (time - prevTime) / tweenDuration
  • Then easing function is applied to progress
  • Result value is emited in update event.
tween.start()        // Start tweening (begins from 0)
tween.stop()         // Stop tweening and go to the end 
tween.play()         // Play tweening from current progress
tween.pause()        // Pause tweening on current progress
tween.reverse()      // Reverse animation direction. Progress always goes 0->1 even if tween is reversed
tween.set(progress)  // Sets progresss (float number from 0 to 1)
tween.complete()     // Complete one tweening step (if it's repeating - it will continue from the next step)
tween.remove()       // Completely removes tween object from queue. Animation progress will be paused

Extension methods

tween.convert(cb)   // Applies callback to progress before emiting update event. Can be stacked
tween.use(enhancer) // Calls enhancer with tween instance. Use it for plugins or reusable tweens

Events

Usage

Events are provided by nanoevents

tween.on(eventName, cb)

Meta info

Some events has meta info. To not copy-paste i will write here what it contains:

  • progress - progress of tween (from 0 to 1)
  • progressMatched - progress after easing function applied
  • value - current value (like progress but with converters applied)
  • remaining - repeats count remaining
  • completed - how many iterations are completed
  • remainingTime - time (in ms) before tweening is completed.
  • completedTime - time (in ms) before tweening start (pauses not included)

Arguments

  • eventName - name of needed event
  • cb - function that will be called with arguments from event You can also add several handlers to the single event

start

Whenever tween.start() is called

Arguments
  • None

stop

Whenever tween.stop() is called

Arguments

  • None

play

Whenever tween.play() is called

Arguments

  • meta - object with meta info

pause

Whenever tween.pause() is called

Arguments

  • meta - object with meta info

update

  • On .set(progress) call
  • On NanoTween.update() call if tween is running (because it calls .set(progress))
  • On .start() (such as .set(0)) and stop (such as .set(1)) call
  • On .complete() call or when tween is finished (because it calls .set(1) and then .set(0))

Arguments

  • progress - progress of tween with applied converters (if no converters - returns number from 0 to 1)
  • meta - object with meta info

step

Whenever one iteration of repeating tween is completed

Arguments

  • ticks - count of repeats remaining
  • meta - object with meta info

complete

Whenever tween is completed

Arguments

  • None

Clone this wiki locally