Home Reference Source Test Repository
public class | source

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

Initializes a new instance of the PaperRipple class with the specified config object.

Member Summary

Public Members
public

The object wrapper containing all the DOM elements belongs to the current instance.

public

The object wrapper containing the $background DOM element belongs to the current instance.

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

center(newValue: Boolean): void: *

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

recenters(newValue: Boolean): void: *

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

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:

NameTypeAttributeDescription
cfg Object | Element
  • optional
  • default: {}

A configuration object.

cfg.initialOpacity Number
  • optional
  • default: 0.25

The initial opacity of the each wave.

cfg.opacityDecayVelocity Number
  • optional
  • default: 0.8

How fast (opacity per second) the wave fades out.

cfg.recenters Boolean
  • optional
  • default: false

If true, waves will exhibit a gravitational pull towards the center of their container as they fade away.

cfg.center Boolean
  • optional
  • default: false

If true, waves will center inside its container.

cfg.target Element
  • optional
  • default: null

Target DOM element as the container for the waves. If target element is not presented, then new one will be created automatically.

Return:

PaperRipple

The new instance of a class.

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.

Return:

Boolean

If true, waves will center inside its 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 initialOpacity: Number source

Gets or sets the initial opacity of the each wave.

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 true, waves will exhibit a gravitational pull towards the center of the container as they fade away.

public set recenters(newValue: Boolean): void: * source

Sets the value that indicates whether all the waves should be re-centered towards the center of the container.

Return:

void

Nothing.

public get shouldKeepAnimating: Boolean: * source

Determines whether the ripple should keep animating or not.

Return:

Boolean

true, if so, otherwise false.

Public Methods

public addWave(): PaperWave source

Adds new wave to the list of visual ripples.

Return:

PaperWave

Current instance for method chaining.

public animate(): PaperRipple source

Animates all the waves in the list of visual ripples.

Return:

PaperRipple

Current instance for method chaining.

public downAction(ev: Event | {clientX: Number, clientY: Number} | {x: Number, y: Number}): PaperRipple source

Produces a ripple-down effect.

Params:

NameTypeAttributeDescription
ev Event | {clientX: Number, clientY: Number} | {x: Number, y: Number}
  • optional
  • default: null

Object containing coordinates of the point of contact.

Return:

PaperRipple

Current instance for method chaining.

public removeWave(wave: PaperWave): PaperRipple source

Removes given wave from the list of visual ripples.

Params:

NameTypeAttributeDescription
wave PaperWave

The wave to remove.

Return:

PaperRipple

Current instance for method chaining.

public upAction(): PaperRipple source

Produces a ripple-up effect.

Return:

PaperRipple

Current instance for method chaining.