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 |