mdpauley/com.mp5systems.rippleeffect

Simulate Google Material's ripple effect on event

com.mp5systems.rippleeffect

Alloy Titanium widget to display Google Material ripple effect. This is completely based on a library from @Saucerdk.

Installation

Via Gittio

gittio install com.mp5systems.rippleeffect

Via Github

Download the latest release and add in your config.json, under dependencies:

"dependencies": {
    "com.mp5systems.rippleeffect": "*"
}

Require

var rippleEffect = Alloy.createWidget('com.mp5systems.rippleeffect');

Usage

Add the rippleEffect property to your element.

"#redView":{
    width: "100%",
    height: 150,
    backgroundColor: "red",
    top: 0,
    left: 0,
    rippleEffect: true
}

// Add Eventlistener to the window
$.index.addEventListener("click",function(e){
    if(e.source.rippleEffect){
        // Here we'll pass the clicked object to our animation handler.
        rippleEffect.create(e);
    }
});