├── .gitignore ├── .project ├── .settings └── com.aptana.editor.common.prefs ├── CHANGELOG.txt ├── LICENSE ├── LICENSE.txt ├── README ├── Resources ├── KS_nav_ui.png ├── KS_nav_views.png ├── app.js ├── iphone │ ├── Default-568h@2x.png │ ├── Default-667h@2x.png │ ├── Default-Landscape-736h@3x.png │ ├── Default-Landscape.png │ ├── Default-Landscape@2x.png │ ├── Default-Portrait-736h@3x.png │ ├── Default-Portrait.png │ ├── Default-Portrait@2x.png │ ├── Default.png │ ├── Default@2x.png │ └── appicon.png └── lib │ └── Ti.RippleEffect.js ├── manifest └── tiapp.xml /.gitignore: -------------------------------------------------------------------------------- 1 | /build/ -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | Ti.RippleEffect 4 | 5 | 6 | 7 | 8 | 9 | com.appcelerator.titanium.core.builder 10 | 11 | 12 | 13 | 14 | com.aptana.ide.core.unifiedBuilder 15 | 16 | 17 | 18 | 19 | 20 | com.appcelerator.titanium.mobile.nature 21 | com.aptana.projects.webnature 22 | 23 | 24 | -------------------------------------------------------------------------------- /.settings/com.aptana.editor.common.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | selectUserAgents=com.appcelerator.titanium.mobile.nature\:iphone 3 | -------------------------------------------------------------------------------- /CHANGELOG.txt: -------------------------------------------------------------------------------- 1 | Place your change log text here. This file will be incorporated with your app at package time. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2008-2013 Appcelerator, Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | (or the full text of the license is below) 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | 18 | 19 | Apache License 20 | Version 2.0, January 2004 21 | http://www.apache.org/licenses/ 22 | 23 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 24 | 25 | 1. Definitions. 26 | 27 | "License" shall mean the terms and conditions for use, reproduction, 28 | and distribution as defined by Sections 1 through 9 of this document. 29 | 30 | "Licensor" shall mean the copyright owner or entity authorized by 31 | the copyright owner that is granting the License. 32 | 33 | "Legal Entity" shall mean the union of the acting entity and all 34 | other entities that control, are controlled by, or are under common 35 | control with that entity. For the purposes of this definition, 36 | "control" means (i) the power, direct or indirect, to cause the 37 | direction or management of such entity, whether by contract or 38 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 39 | outstanding shares, or (iii) beneficial ownership of such entity. 40 | 41 | "You" (or "Your") shall mean an individual or Legal Entity 42 | exercising permissions granted by this License. 43 | 44 | "Source" form shall mean the preferred form for making modifications, 45 | including but not limited to software source code, documentation 46 | source, and configuration files. 47 | 48 | "Object" form shall mean any form resulting from mechanical 49 | transformation or translation of a Source form, including but 50 | not limited to compiled object code, generated documentation, 51 | and conversions to other media types. 52 | 53 | "Work" shall mean the work of authorship, whether in Source or 54 | Object form, made available under the License, as indicated by a 55 | copyright notice that is included in or attached to the work 56 | (an example is provided in the Appendix below). 57 | 58 | "Derivative Works" shall mean any work, whether in Source or Object 59 | form, that is based on (or derived from) the Work and for which the 60 | editorial revisions, annotations, elaborations, or other modifications 61 | represent, as a whole, an original work of authorship. For the purposes 62 | of this License, Derivative Works shall not include works that remain 63 | separable from, or merely link (or bind by name) to the interfaces of, 64 | the Work and Derivative Works thereof. 65 | 66 | "Contribution" shall mean any work of authorship, including 67 | the original version of the Work and any modifications or additions 68 | to that Work or Derivative Works thereof, that is intentionally 69 | submitted to Licensor for inclusion in the Work by the copyright owner 70 | or by an individual or Legal Entity authorized to submit on behalf of 71 | the copyright owner. For the purposes of this definition, "submitted" 72 | means any form of electronic, verbal, or written communication sent 73 | to the Licensor or its representatives, including but not limited to 74 | communication on electronic mailing lists, source code control systems, 75 | and issue tracking systems that are managed by, or on behalf of, the 76 | Licensor for the purpose of discussing and improving the Work, but 77 | excluding communication that is conspicuously marked or otherwise 78 | designated in writing by the copyright owner as "Not a Contribution." 79 | 80 | "Contributor" shall mean Licensor and any individual or Legal Entity 81 | on behalf of whom a Contribution has been received by Licensor and 82 | subsequently incorporated within the Work. 83 | 84 | 2. Grant of Copyright License. Subject to the terms and conditions of 85 | this License, each Contributor hereby grants to You a perpetual, 86 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 87 | copyright license to reproduce, prepare Derivative Works of, 88 | publicly display, publicly perform, sublicense, and distribute the 89 | Work and such Derivative Works in Source or Object form. 90 | 91 | 3. Grant of Patent License. Subject to the terms and conditions of 92 | this License, each Contributor hereby grants to You a perpetual, 93 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 94 | (except as stated in this section) patent license to make, have made, 95 | use, offer to sell, sell, import, and otherwise transfer the Work, 96 | where such license applies only to those patent claims licensable 97 | by such Contributor that are necessarily infringed by their 98 | Contribution(s) alone or by combination of their Contribution(s) 99 | with the Work to which such Contribution(s) was submitted. If You 100 | institute patent litigation against any entity (including a 101 | cross-claim or counterclaim in a lawsuit) alleging that the Work 102 | or a Contribution incorporated within the Work constitutes direct 103 | or contributory patent infringement, then any patent licenses 104 | granted to You under this License for that Work shall terminate 105 | as of the date such litigation is filed. 106 | 107 | 4. Redistribution. You may reproduce and distribute copies of the 108 | Work or Derivative Works thereof in any medium, with or without 109 | modifications, and in Source or Object form, provided that You 110 | meet the following conditions: 111 | 112 | (a) You must give any other recipients of the Work or 113 | Derivative Works a copy of this License; and 114 | 115 | (b) You must cause any modified files to carry prominent notices 116 | stating that You changed the files; and 117 | 118 | (c) You must retain, in the Source form of any Derivative Works 119 | that You distribute, all copyright, patent, trademark, and 120 | attribution notices from the Source form of the Work, 121 | excluding those notices that do not pertain to any part of 122 | the Derivative Works; and 123 | 124 | (d) If the Work includes a "NOTICE" text file as part of its 125 | distribution, then any Derivative Works that You distribute must 126 | include a readable copy of the attribution notices contained 127 | within such NOTICE file, excluding those notices that do not 128 | pertain to any part of the Derivative Works, in at least one 129 | of the following places: within a NOTICE text file distributed 130 | as part of the Derivative Works; within the Source form or 131 | documentation, if provided along with the Derivative Works; or, 132 | within a display generated by the Derivative Works, if and 133 | wherever such third-party notices normally appear. The contents 134 | of the NOTICE file are for informational purposes only and 135 | do not modify the License. You may add Your own attribution 136 | notices within Derivative Works that You distribute, alongside 137 | or as an addendum to the NOTICE text from the Work, provided 138 | that such additional attribution notices cannot be construed 139 | as modifying the License. 140 | 141 | You may add Your own copyright statement to Your modifications and 142 | may provide additional or different license terms and conditions 143 | for use, reproduction, or distribution of Your modifications, or 144 | for any such Derivative Works as a whole, provided Your use, 145 | reproduction, and distribution of the Work otherwise complies with 146 | the conditions stated in this License. 147 | 148 | 5. Submission of Contributions. Unless You explicitly state otherwise, 149 | any Contribution intentionally submitted for inclusion in the Work 150 | by You to the Licensor shall be under the terms and conditions of 151 | this License, without any additional terms or conditions. 152 | Notwithstanding the above, nothing herein shall supersede or modify 153 | the terms of any separate license agreement you may have executed 154 | with Licensor regarding such Contributions. 155 | 156 | 6. Trademarks. This License does not grant permission to use the trade 157 | names, trademarks, service marks, or product names of the Licensor, 158 | except as required for reasonable and customary use in describing the 159 | origin of the Work and reproducing the content of the NOTICE file. 160 | 161 | 7. Disclaimer of Warranty. Unless required by applicable law or 162 | agreed to in writing, Licensor provides the Work (and each 163 | Contributor provides its Contributions) on an "AS IS" BASIS, 164 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 165 | implied, including, without limitation, any warranties or conditions 166 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 167 | PARTICULAR PURPOSE. You are solely responsible for determining the 168 | appropriateness of using or redistributing the Work and assume any 169 | risks associated with Your exercise of permissions under this License. 170 | 171 | 8. Limitation of Liability. In no event and under no legal theory, 172 | whether in tort (including negligence), contract, or otherwise, 173 | unless required by applicable law (such as deliberate and grossly 174 | negligent acts) or agreed to in writing, shall any Contributor be 175 | liable to You for damages, including any direct, indirect, special, 176 | incidental, or consequential damages of any character arising as a 177 | result of this License or out of the use or inability to use the 178 | Work (including but not limited to damages for loss of goodwill, 179 | work stoppage, computer failure or malfunction, or any and all 180 | other commercial damages or losses), even if such Contributor 181 | has been advised of the possibility of such damages. 182 | 183 | 9. Accepting Warranty or Additional Liability. While redistributing 184 | the Work or Derivative Works thereof, You may choose to offer, 185 | and charge a fee for, acceptance of support, warranty, indemnity, 186 | or other liability obligations and/or rights consistent with this 187 | License. However, in accepting such obligations, You may act only 188 | on Your own behalf and on Your sole responsibility, not on behalf 189 | of any other Contributor, and only if You agree to indemnify, 190 | defend, and hold each Contributor harmless for any liability 191 | incurred by, or claims asserted against, such Contributor by reason 192 | of your accepting any such warranty or additional liability. 193 | 194 | END OF TERMS AND CONDITIONS 195 | 196 | APPENDIX: How to apply the Apache License to your work. 197 | 198 | To apply the Apache License to your work, attach the following 199 | boilerplate notice, with the fields enclosed by brackets "[]" 200 | replaced with your own identifying information. (Don't include 201 | the brackets!) The text should be enclosed in the appropriate 202 | comment syntax for the file format. We also recommend that a 203 | file or class name and description of purpose be included on the 204 | same "printed page" as the copyright notice for easier 205 | identification within third-party archives. 206 | 207 | Copyright [yyyy] [name of copyright owner] 208 | 209 | Licensed under the Apache License, Version 2.0 (the "License"); 210 | you may not use this file except in compliance with the License. 211 | You may obtain a copy of the License at 212 | 213 | http://www.apache.org/licenses/LICENSE-2.0 214 | 215 | Unless required by applicable law or agreed to in writing, software 216 | distributed under the License is distributed on an "AS IS" BASIS, 217 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 218 | See the License for the specific language governing permissions and 219 | limitations under the License. 220 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Place your license text here. This file will be incorporated with your app at package time. -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | Check http://www.saucer.dk/recreating-googles-ripple-effect-for-ios/ for more info about this commonJS module for Appcelerators Titanium. -------------------------------------------------------------------------------- /Resources/KS_nav_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/KS_nav_ui.png -------------------------------------------------------------------------------- /Resources/KS_nav_views.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/KS_nav_views.png -------------------------------------------------------------------------------- /Resources/app.js: -------------------------------------------------------------------------------- 1 | // First we need to require our commonJS module. 2 | var RippleEffect = require("/lib/Ti.RippleEffect"); 3 | 4 | // Yeah we need a window :) 5 | var win = Ti.UI.createWindow({ 6 | backgroundColor:"#000" 7 | }); 8 | 9 | // Lets add some views that will get the RippleEffect on click event. 10 | var redView = Ti.UI.createView({ 11 | width:320, 12 | height:150, 13 | backgroundColor:"red", 14 | top:0, 15 | left:0, 16 | rippleEffect:true 17 | }); 18 | 19 | var blueView = Ti.UI.createView({ 20 | width:160, 21 | height:150, 22 | backgroundColor:"blue", 23 | top:150, 24 | left:0, 25 | rippleEffect:true 26 | }); 27 | 28 | var greenView = Ti.UI.createView({ 29 | width:160, 30 | height:150, 31 | backgroundColor:"green", 32 | top:150, 33 | right:0, 34 | rippleEffect:true 35 | }); 36 | 37 | var purpleView = Ti.UI.createView({ 38 | width:320, 39 | height:150, 40 | backgroundColor:"purple", 41 | top:300, 42 | left:0, 43 | rippleEffect:true 44 | }); 45 | 46 | 47 | win.add(redView); 48 | win.add(blueView); 49 | win.add(greenView); 50 | win.add(purpleView); 51 | 52 | win.addEventListener("click",function(e){ 53 | if(e.source.rippleEffect){ 54 | // Here we'll pass the clicked object to our animation handler. 55 | RippleEffect.create(e); 56 | } 57 | }); 58 | 59 | win.open(); -------------------------------------------------------------------------------- /Resources/iphone/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-568h@2x.png -------------------------------------------------------------------------------- /Resources/iphone/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-667h@2x.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Landscape-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Landscape-736h@3x.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Landscape.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Landscape@2x.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Portrait-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Portrait-736h@3x.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Portrait.png -------------------------------------------------------------------------------- /Resources/iphone/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default-Portrait@2x.png -------------------------------------------------------------------------------- /Resources/iphone/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default.png -------------------------------------------------------------------------------- /Resources/iphone/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/Default@2x.png -------------------------------------------------------------------------------- /Resources/iphone/appicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lukic/Ti.RippleEffect/75fa31f36128db22ee69a93164fd82c159943337/Resources/iphone/appicon.png -------------------------------------------------------------------------------- /Resources/lib/Ti.RippleEffect.js: -------------------------------------------------------------------------------- 1 | function create(e, callback){ 2 | // Width and Height of our clicked view. 3 | // This way we can make the circle big enough to fit the view. 4 | var rippleWidth = e.source.toImage().width*2; 5 | var rippleHeight = e.source.toImage().width*2; 6 | 7 | // Our circle that will be scaled up using 2dMartix. 8 | // We'll position the view at the center of the click position, by using (clickPositin - (clickedViewWidth / 2)). 9 | var ripple = Ti.UI.createView({ 10 | top:(e.y-(rippleWidth/2)), 11 | left:(e.x-(rippleWidth/2)), 12 | width:rippleWidth, 13 | height:rippleHeight, 14 | borderRadius:(rippleWidth/2), 15 | backgroundColor:"rgba(255,255,255,0.40)", 16 | transform:Titanium.UI.create2DMatrix().scale(0), 17 | zIndex:999, 18 | opacity:0 19 | }); 20 | 21 | // Add the ripple view inside the clicked view 22 | e.source.add(ripple); 23 | 24 | // Our animation that will set the opasity from 0 to 1, and scale our view to 50% of max size. 25 | ripple.animate({ 26 | opacity:1, 27 | transform:Titanium.UI.create2DMatrix().scale(0.5), 28 | duration:200, 29 | curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT 30 | },function() { 31 | 32 | // When the first animation is finish we'll scale up to 100% while we fade the opacity to 0. 33 | ripple.animate({ 34 | opacity:0, 35 | transform:Titanium.UI.create2DMatrix().scale(1), 36 | duration:200, 37 | curve:Titanium.UI.ANIMATION_CURVE_EASE_OUT_IN 38 | },function() { 39 | 40 | // At the end we'll remove our ripple view from the clicked view. 41 | e.source.remove(ripple); 42 | ripple=null; 43 | if(callback) 44 | callback(); 45 | }); 46 | }); 47 | }; 48 | exports.create = create; 49 | -------------------------------------------------------------------------------- /manifest: -------------------------------------------------------------------------------- 1 | #appname: Ti.RippleEffect 2 | #publisher: Lukic 3 | #url: http:// 4 | #image: appicon.png 5 | #appid: nu.lukic.RippleEffect 6 | #desc: undefined 7 | #type: mobile 8 | #guid: 10bee17c-5228-4601-ada0-bf6edd51f722 9 | -------------------------------------------------------------------------------- /tiapp.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | nu.lukic.RippleEffect 4 | Ti.RippleEffect 5 | 1.0.1 6 | Lukic 7 | http:// 8 | 9 | 2014 by Lukic 10 | appicon.png 11 | false 12 | false 13 | true 14 | 10bee17c-5228-4601-ada0-bf6edd51f722 15 | dp 16 | 17 | 18 | 19 | UISupportedInterfaceOrientations~iphone 20 | 21 | UIInterfaceOrientationPortrait 22 | 23 | UISupportedInterfaceOrientations~ipad 24 | 25 | UIInterfaceOrientationPortrait 26 | UIInterfaceOrientationPortraitUpsideDown 27 | UIInterfaceOrientationLandscapeLeft 28 | UIInterfaceOrientationLandscapeRight 29 | 30 | UIRequiresPersistentWiFi 31 | 32 | UIPrerenderedIcon 33 | 34 | UIStatusBarHidden 35 | 36 | UIStatusBarStyle 37 | UIStatusBarStyleDefault 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | true 46 | true 47 | 48 | default 49 | 50 | 51 | 52 | false 53 | false 54 | false 55 | true 56 | false 57 | 58 | 3.4.1.GA 59 | 60 | --------------------------------------------------------------------------------