ianharrigan / haxeui

IMPORTANT NOTE! This repository is no longer maintained. Please consider the newer version: https://github.com/haxeui/haxeui-core
http://haxeui.org/
392 stars 46 forks source link

Add Touch Ripple Effect as used on Android in Material Design #310

Closed sebthom closed 6 years ago

sebthom commented 8 years ago

https://github.com/codepath/android_guides/wiki/Ripple-Animation

Example: https://github.com/balysv/material-ripple/blob/master/README.md

Programmatic backport for older android devices, which could be used as inspiration: https://github.com/traex/RippleEffect/blob/master/library/src/main/java/com/andexert/library/RippleView.java

JS+SVG Tutorial: http://webdesign.tutsplus.com/tutorials/recreating-the-touch-ripple-effect-as-seen-on-google-design--cms-21655

JS Live Edit: http://codepen.io/Craigtut/pen/dIfzv

JS Libs: https://github.com/blivesta/rippler https://github.com/dennisgaebel/svgripples

The ripple effect on Android is different to the ones implemented by these JS Libraries in that it already starts on mouse/touch down and not only after release, and it only draws the expanding circle in the background of the button/touch area not affecting the color of the text.