Skip to content
M. Klatte edited this page Jan 25, 2015 · 2 revisions

This library implements the ripple effect on google's material design buttons.

Requirements
"AnimLib" as AnimLib

File
Ripple.Script.txt

A demo is available at the manialink zockaml?demo=ripple.

Usage

Creating the markup

Since Maniascript doesn't have the possibility to add DOM elements dynamically, we have to do a bit on our own:

<frame id="btn1">
	<quad style="Bgs1InRace" class="ripple_button" substyle="BgTitlePage" sizen="30 10" scriptevents="1" />
	<label style="TextCardMedium" textcolor="333" class="ripple_label" scale="0.8" sizen="30 10" posn="15 -5 2" halign="center" valign="center" text="Ripple Me" />
	<quad style="Icons64x64_1" class="ripple_drop" substyle="GenericButton" opacity="0.3" colorize="3Bf" posn="0 0 1" />
</frame>

You can style your button all you like but the things to notice are:

  • There is a quad with class ripple_button. It determines the bounding box for the ripple effect.
  • This quad has scriptevents activated.
  • There is a quad with class ripple_drop. It is the image that will be dropped onto the button.
  • Make sure this quad covers the bounding box.
  • You can use anything as shape but I suggest using a round style/image.
  • You want to place it above the button quad.
  • Every other content on the button is optional.

The Maniascript

main() {
	Ripple_Create("btn1"); // The Id of the frame
	while(True) {
		yield;
		Ripple_EventLoop();
	}
}

API

Boolean Ripple_Create(Text _FrameId)

Called once to apply the ripple effect to a prepared frame.
param Text _FrameId The Id of the frame containing the Button elements.
returns Boolean False if the required elements were not found in the frame.

Boolean Ripple_Clip(Text _FrameId)

Can be called after repostioning the button frame or resizing the button.
param Text _FrameId The Id of the frame containing the Button elements.
returns Boolean False if the required elements were not found in the frame.

Void Ripple_EventLoop()

Called once in the main loop. Takes care of everything to display the effect.

You can’t perform that action at this time.