-
Notifications
You must be signed in to change notification settings - Fork 1
2. API reference
Anton Kosykh edited this page Jan 18, 2018
·
6 revisions
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)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
updateevent.
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 pausedtween.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 tweensEvents are provided by nanoevents
tween.on(eventName, cb)-
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
Some events have 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)
Whenever tween.start() is called
None
Whenever tween.stop() is called
None
Whenever tween.play() is called
-
meta- object with meta info
Whenever tween.pause() is called
-
meta- object with meta info
- 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))
-
progress- progress of tween with applied converters (if no converters - returns number from 0 to 1) -
meta- object with meta info
Whenever one iteration of repeating tween is completed
-
ticks- count of repeats remaining -
meta- object with meta info
Whenever tween is completed
None