By default RightJS comes with the basic visual effects package. It has one base (abstract) class Fx, which defines the common visual effects interface and is used as the basis for all the other effect classes.
Fx objects handle the following events:
In line with the general events handling convention this means that you can use all the common on, stopObserving etc methods as well as onStart, onFinish, onCancel shortcuts.
All visual effects support the following options:
| Name | Default | Description |
|---|---|---|
| duration | ‘normal’ | the effect duration in ms or a string predefined name |
| transition | ‘Sin’ | the transition algorithm used for the effect |
| queue | true | boolean marker if the effect should be queued |
There are three named durations which an be used in Fx options:
| Name | Value |
|---|---|
| short | 200 ms |
| normal | 400 ms (default) |
| long | 800 ms |
There are several predefined transitions for visual effects. You can use them in options or specify your own function if you need.
| Name | Description |
|---|---|
| Sin | slow at the beginning and the end, but fast in the middle |
| Cos | fast at the beginning and the end, but slow in the middle |
| Exp | slow at the beginning, quickly accelerates to the end |
| Log | fast at the beginning, quickly slows down to the end |
| Lin | a constant speed transition |
The default transition Sin is a good choice in most cases.
initialize, cancel, finish, pause, prepare, render, resume, start
cancel() -> Fx self
Cancels the effect and interrupts the visual effects queue.
finish() -> Fx self
Forces the effect to stop and marks it as a completely finished.
pause() -> Fx self
Puts the effect on pause with the ability to be resumed later.
prepare([....]) -> void
Abstract method which gets called with the same arguments as the start method when the visual effects queue reaches this effect.