PaperRipple
Provides all the logic to produce ripple visual effect. Other elements can use it to simulate rippling effect emanating from the point of contact.
Constructor Summary
Public Constructor | ||
public |
constructor(cfg: Object | Element): PaperRipple Initializes a new instance of the |
Member Summary
Public Members | ||
public |
The object wrapper containing all the DOM elements belongs to the current instance. |
|
public |
The object wrapper containing the |
|
public |
The object wrapper containing the waves container belongs to the current instance. |
|
public get |
Determines whether all the waves should start a movement from the center of the container. |
|
public set |
Sets the value that indicates whether all the waves should start a movement from the center of the container. |
|
public |
Gets or sets the initial opacity of the each wave. |
|
public |
Gets or sets how fast (opacity per second) the wave fades out. |
|
public get |
Determines whether all the waves should be re-centered towards the center of the container. |
|
public set |
Sets the value that indicates whether all the waves should be re-centered towards the center of the container. |
|
public get |
Determines whether the ripple should keep animating or not. |
Method Summary
Public Methods | ||
public |
Adds new wave to the list of visual ripples. |
|
public |
Animates all the waves in the list of visual ripples. |
|
public |
downAction(ev: Event | {clientX: Number, clientY: Number} | {x: Number, y: Number}): PaperRipple Produces a ripple-down effect. |
|
public |
removeWave(wave: PaperWave): PaperRipple Removes given wave from the list of visual ripples. |
|
public |
Produces a ripple-up effect. |
Public Constructors
public constructor(cfg: Object | Element): PaperRipple source
Initializes a new instance of the PaperRipple
class with the specified config
object.
Params:
Name | Type | Attribute | Description |
cfg | Object | Element |
|
A configuration object. |
cfg.initialOpacity | Number |
|
The initial opacity of the each wave. |
cfg.opacityDecayVelocity | Number |
|
How fast (opacity per second) the wave fades out. |
cfg.recenters | Boolean |
|
If |
cfg.center | Boolean |
|
If |
cfg.target | Element |
|
Target DOM element as the container for the waves. If target element is not presented, then new one will be created automatically. |
Example:
// Creating the new instance
var ripple = new PaperRipple({ recenters: true });
// Appending it to another DOM element
ripple.$.appendTo(someEl);
// Listening to that element's events and performing ripple effect
someEl.on({
mousedown: function(ev) {
ripple.downAction(ev);
},
mouseup: function() {
ripple.upAction();
}
);
Public Members
public $: Object source
The object wrapper containing all the DOM elements belongs to the current instance.
public $background: Object source
The object wrapper containing the $background
DOM element belongs to the current instance.
public $waves: Object source
The object wrapper containing the waves container belongs to the current instance.
public get center: Boolean: * source
Determines whether all the waves should start a movement from the center of the container.
public set center(newValue: Boolean): void: * source
Sets the value that indicates whether all the waves should start a movement from the center of the container.
Return:
void | Nothing. |
public opacityDecayVelocity: Number source
Gets or sets how fast (opacity per second) the wave fades out.
public get recenters: Boolean: * source
Determines whether all the waves should be re-centered towards the center of the container.
Return:
Boolean | If |
Public Methods
public downAction(ev: Event | {clientX: Number, clientY: Number} | {x: Number, y: Number}): PaperRipple source
Produces a ripple-down effect.
public removeWave(wave: PaperWave): PaperRipple source
Removes given wave from the list of visual ripples.
Params:
Name | Type | Attribute | Description |
wave | PaperWave | The wave to remove. |