| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> | 8 --> |
| 9 | 9 |
| 10 <!-- | 10 <!-- |
| (...skipping 26 matching lines...) Expand all Loading... |
| 37 | 37 |
| 38 Use CSS color property to style the ripple: | 38 Use CSS color property to style the ripple: |
| 39 | 39 |
| 40 paper-ripple { | 40 paper-ripple { |
| 41 color: #4285f4; | 41 color: #4285f4; |
| 42 } | 42 } |
| 43 | 43 |
| 44 Note that CSS color property is inherited so it is not required to set it on | 44 Note that CSS color property is inherited so it is not required to set it on |
| 45 the `paper-ripple` element directly. | 45 the `paper-ripple` element directly. |
| 46 | 46 |
| 47 Apply `recenteringTouch` class to make the recentering rippling effect. | 47 By default, the ripple is centered on the point of contact. Apply `recenteringT
ouch` |
| 48 class to have the ripple grow toward the center of its container. |
| 48 | 49 |
| 49 <paper-ripple class="recenteringTouch"></paper-ripple> | 50 <paper-ripple class="recenteringTouch"></paper-ripple> |
| 50 | 51 |
| 51 Apply `circle` class to make the rippling effect within a circle. | 52 Apply `circle` class to make the rippling effect within a circle. |
| 52 | 53 |
| 53 <paper-ripple class="circle"></paper-ripple> | 54 <paper-ripple class="circle"></paper-ripple> |
| 54 | 55 |
| 55 @group Paper Elements | 56 @group Paper Elements |
| 56 @element paper-ripple | 57 @element paper-ripple |
| 57 @homepage github.io | 58 @homepage github.io |
| 58 --> | 59 --> |
| 59 | 60 |
| 61 <!-- |
| 62 Fired when the animation finishes. This is useful if you want to wait until the
ripple |
| 63 animation finishes to perform some action. |
| 64 |
| 65 @event core-transitionend |
| 66 @param {Object} detail |
| 67 @param {Object} detail.node The animated node |
| 68 --> |
| 69 |
| 60 <link rel="import" href="../polymer/polymer.html" > | 70 <link rel="import" href="../polymer/polymer.html" > |
| 61 | 71 |
| 62 <polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelo
city"> | 72 <polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelo
city"> |
| 63 <template> | 73 <template> |
| 64 | 74 |
| 65 <style> | 75 <style> |
| 66 | 76 |
| 67 :host { | 77 :host { |
| 68 display: block; | 78 display: block; |
| 69 position: relative; | 79 position: relative; |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 114 </template> | 124 </template> |
| 115 <script> | 125 <script> |
| 116 | 126 |
| 117 (function() { | 127 (function() { |
| 118 | 128 |
| 119 var waveMaxRadius = 150; | 129 var waveMaxRadius = 150; |
| 120 // | 130 // |
| 121 // INK EQUATIONS | 131 // INK EQUATIONS |
| 122 // | 132 // |
| 123 function waveRadiusFn(touchDownMs, touchUpMs, anim) { | 133 function waveRadiusFn(touchDownMs, touchUpMs, anim) { |
| 124 // Convert from ms to s. | 134 // Convert from ms to s |
| 125 var touchDown = touchDownMs / 1000; | 135 var touchDown = touchDownMs / 1000; |
| 126 var touchUp = touchUpMs / 1000; | 136 var touchUp = touchUpMs / 1000; |
| 127 var totalElapsed = touchDown + touchUp; | 137 var totalElapsed = touchDown + touchUp; |
| 128 var ww = anim.width, hh = anim.height; | 138 var ww = anim.width, hh = anim.height; |
| 129 // use diagonal size of container to avoid floating point math sadness | 139 // use diagonal size of container to avoid floating point math sadness |
| 130 var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1
.1 + 5; | 140 var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1
.1 + 5; |
| 131 var duration = 1.1 - .2 * (waveRadius / waveMaxRadius); | 141 var duration = 1.1 - .2 * (waveRadius / waveMaxRadius); |
| 132 var tt = (totalElapsed / duration); | 142 var tt = (totalElapsed / duration); |
| 133 | 143 |
| 134 var size = waveRadius * (1 - Math.pow(80, -tt)); | 144 var size = waveRadius * (1 - Math.pow(80, -tt)); |
| (...skipping 323 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 458 this.fire('core-transitionend'); | 468 this.fire('core-transitionend'); |
| 459 } | 469 } |
| 460 } | 470 } |
| 461 | 471 |
| 462 }); | 472 }); |
| 463 | 473 |
| 464 })(); | 474 })(); |
| 465 | 475 |
| 466 </script> | 476 </script> |
| 467 </polymer-element> | 477 </polymer-element> |
| OLD | NEW |