Recreating Google’s Ripple Effect for iOS

Google’s new Material Design UI comes with many new interaction effects. One of them is this sweet touch ripple effect. This tutorial will show you how to make your own recreating of this effect for Titanium.

When designing an app, it’s always a good thing to let your users know that your app have received users input. It could be as simple as changing the color on your button to indicate that button has been activated. Here I’ll show you how to make a simple commonJS module to handle the Google Material Design Ripple Effect for iOS.

Basic thoughts

To make this animation we’ll need a handler that can receive the clicked view, and add the animation on top of it, based on users click position. Now enough talk, lets see some code.

Filename: RippleEffect.js

function create(e){
	// Width and Height of our clicked view.
	// This way we can make the circle big enough to fit the view.
	var rippleWidth = e.source.width*2;
	var rippleHeight = e.source.width*2;
 
	// Our circle that will be scaled up using 2dMartix.
	// We'll position the view at the center of the click position, by using (clickPositin - (clickedViewWidth / 2)).
	var ripple = Ti.UI.createView({
		top:(e.y-(rippleWidth/2)),
		left:(e.x-(rippleWidth/2)),
		width:rippleWidth,
		height:rippleHeight,
		borderRadius:(rippleWidth/2),
		backgroundColor:"rgba(255,255,255,0.40)",
		transform:Titanium.UI.create2DMatrix().scale(0),
		zIndex:999,
		opacity:0
	});
 
	// Add the ripple view inside the clicked view
	e.source.add(ripple);
 
	// Our animation that will set the opasity from 0 to 1, and scale our view to 50% of max size.
	ripple.animate({
		opacity:1,
		transform:Titanium.UI.create2DMatrix().scale(0.5),
		duration:200,
		curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
		},function() {
 
			// When the first animation is finish we'll scale up to 100% while we fade the opacity to 0.
			ripple.animate({
				opacity:0,
				transform:Titanium.UI.create2DMatrix().scale(1),
				duration:200,
				curve:Titanium.UI.ANIMATION_CURVE_EASE_OUT_IN
				},function() {
 
					// At the end we'll remove our ripple view from the clicked view.
					e.source.remove(ripple);
					ripple=null;
				});
		});
};
exports.create = create;

So now that we have a handler, all we need to do is to create our views and attach the click event. In this example I’ve added one extra attribute to our view objects called rippleEffect. That way I can check if the click event should call the Ripple Effect animation. You can also attach the addEventListener to each view if that suits my needs.

Filename: app.js

// First we need to require our commonJS module.
var RippleEffect = require("RippleEffect");
 
// Yeah we need a window :)
	var win = Ti.UI.createWindow({
		backgroundColor:"#000"
	});
 
	// Lets add some views that will get the RippleEffect on click event.
	var redView = Ti.UI.createView({
		width:320,
		height:150,
		backgroundColor:"red",
		top:0,
		left:0,
		rippleEffect:true
	});
 
	var blueView = Ti.UI.createView({
		width:160,
		height:150,
		backgroundColor:"blue",
		top:150,
		left:0,
		rippleEffect:true
	});
 
	var greenView = Ti.UI.createView({
		width:160,
		height:150,
		backgroundColor:"green",
		top:150,
		right:0,
		rippleEffect:true
	});
 
	var purpleView = Ti.UI.createView({
		width:320,
		height:150,
		backgroundColor:"purple",
		top:300,
		left:0,
		rippleEffect:true
	});
 
 
	win.add(redView);
	win.add(blueView);
	win.add(greenView);
	win.add(purpleView);
 
	win.addEventListener("click",function(e){
		if(e.source.rippleEffect){
// Here we'll pass the clicked object to our animation handler.
			RippleEffect.create(e);
		}
	});
 
	win.open();

Conclusion

As you can see the implementation of this effect is pretty simple and straightforward. Now its up to you to create some awesome apps with cool UI feedback.Any suggestion will be welcomed, so don’t hesitate by posting a comment below this article.

Demo

screen_demo