| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <head> |
| 3 <meta name="viewport" content="width=device-width, height=device-height, user-sc
alable=no"> |
| 4 <script src="polymer.min.js"></script> |
| 5 <script src="web-animations.js"></script> |
| 6 |
| 7 <body> |
| 8 <div style="display: -webkit-flex; -webkit-flex-flow: column; width: 200px"> |
| 9 <ink-button>Here</ink-button> |
| 10 <ink-button class="click-me">Are</ink-button> |
| 11 <ink-button>Some</ink-button> |
| 12 <ink-button>Buttons.</ink-button> |
| 13 <ink-button duration="5">This one is slow.</ink-button> |
| 14 <div/> |
| 15 |
| 16 <polymer-element name="ink-button" attributes="duration" touch-action="none"> |
| 17 <template> |
| 18 <style> |
| 19 :host { |
| 20 display: inline-block; |
| 21 position: relative; |
| 22 -webkit-user-select: none; |
| 23 background: white; |
| 24 color: white; |
| 25 margin: 5px; |
| 26 -webkit-transform-origin: 50% 50%; |
| 27 } |
| 28 |
| 29 .layer { |
| 30 height: 100%; |
| 31 width: 100%; |
| 32 position: absolute; |
| 33 } |
| 34 |
| 35 #focus { |
| 36 border: solid #4285F4 -2px; |
| 37 background: #4285F4; |
| 38 border-radius: 1.5px; |
| 39 } |
| 40 |
| 41 #blur { |
| 42 border: solid #56ADFF -2px; |
| 43 background: #56ADFF; |
| 44 border-radius: 1.5px; |
| 45 } |
| 46 |
| 47 .active { |
| 48 z-index: 1; |
| 49 } |
| 50 |
| 51 #content { |
| 52 position: relative; |
| 53 margin: 10px; |
| 54 z-index: 2; |
| 55 -webkit-transform-origin: 50% 50%; |
| 56 text-align: center; |
| 57 text-transform: uppercase; |
| 58 } |
| 59 </style> |
| 60 <div id="focus" class="layer"></div> |
| 61 <div id="blur" class="layer"></div> |
| 62 <div id="content"> |
| 63 <content></content> |
| 64 </div> |
| 65 </template> |
| 66 </polymer-element> |
| 67 |
| 68 <script> |
| 69 (function() { |
| 70 function composite(target, timing) { |
| 71 return new Animation(target, [ |
| 72 {transform: 'translateZ(0)'}, |
| 73 {transform: 'translateZ(0)'} |
| 74 ], timing); |
| 75 } |
| 76 |
| 77 function transform(target, frames, timing) { |
| 78 return new Animation(target, frames.map(function(t) { return {transform: t}; }
), timing); |
| 79 } |
| 80 |
| 81 function clip(target, params, timing) { |
| 82 return new Animation(target, {sample: function(t) { |
| 83 target.style.webkitClipPath = 'circle(' + |
| 84 params.x + 'px, ' + |
| 85 params.y + 'px, ' + |
| 86 (t * params.radius) + 'px)'; |
| 87 }}, timing); |
| 88 } |
| 89 |
| 90 Polymer('ink-button', { |
| 91 _down: false, |
| 92 duration: '0.5', |
| 93 ready: function() { |
| 94 this.addEventListener('click', this.click.bind(this)); |
| 95 this.addEventListener('pointerdown', this.pointerDown.bind(this)); |
| 96 this.addEventListener('pointerup', this.pointerUp.bind(this)); |
| 97 this.addEventListener('pointerout', this.pointerUp.bind(this)); |
| 98 }, |
| 99 reset: function() { |
| 100 this._player && (this._player.source = null); |
| 101 this.$.focus.style.webkitClipPath = 'initial'; |
| 102 this.$.blur.style.webkitClipPath = 'initial'; |
| 103 }, |
| 104 click: function(e) { |
| 105 var e = {x: this.offsetLeft + this.clientLeft + 0.5 * this.clientWidth, |
| 106 y: this.offsetTop + this.clientTop + 0.5 * this.clientHeight}; |
| 107 this.pointerDown(e); |
| 108 this.pointerUp(e); |
| 109 }, |
| 110 pointerDown: function(e) { |
| 111 this.$.focus.classList.add('active'); |
| 112 this.$.blur.classList.remove('active'); |
| 113 this._down = true; |
| 114 |
| 115 var target = this.$.focus; |
| 116 |
| 117 var x = e.x - this.clientLeft - this.offsetLeft; |
| 118 var y = e.y - this.clientTop - this.offsetTop; |
| 119 |
| 120 var width = target.clientWidth; |
| 121 var targetRadius = Math.max(x, width - x) + target.clientHeight; |
| 122 var duration = Number(this.duration); |
| 123 |
| 124 this.reset(); |
| 125 this._player = document.timeline.play(new ParGroup([ |
| 126 composite(this.$.content, duration), |
| 127 clip(target, {x: x, y: y, radius: targetRadius}, duration), |
| 128 transform(this, ['scale(1)', 'scale(1.1)'], duration), |
| 129 ], {easing: 'ease-out', fill: 'forwards'})); |
| 130 }, |
| 131 pointerUp: function(e) { |
| 132 if (!this._down) { |
| 133 return; |
| 134 } |
| 135 this._down = false; |
| 136 |
| 137 this.$.focus.classList.remove('active'); |
| 138 this.$.blur.classList.add('active'); |
| 139 |
| 140 var target = this.$.blur; |
| 141 |
| 142 var x = e.x - this.clientLeft - this.offsetLeft; |
| 143 var y = e.y - this.clientTop - this.offsetTop; |
| 144 |
| 145 var width = target.clientWidth; |
| 146 var targetRadius = Math.max(x, width - x) + target.clientHeight; |
| 147 var duration = Number(this.duration); |
| 148 |
| 149 var transformDuration = duration * 0.25; |
| 150 var transformElapsed = (duration - (this._player ? this._player.currentTime
: 0)) * 0.25; |
| 151 transformElapsed = Math.max(transformElapsed, 0); |
| 152 |
| 153 this.reset(); |
| 154 this._player = document.timeline.play(new ParGroup([ |
| 155 composite(this.$.content, duration), |
| 156 clip(target, {x: x, y: y, radius: targetRadius}, |
| 157 {duration: duration, easing: 'ease-out'}), |
| 158 transform(this, ['scale(1.1)', 'scale(1)'], |
| 159 {delay: -transformElapsed, duration: transformDuration, easing: 'lin
ear'}), |
| 160 ], {fill: 'none'})); |
| 161 }, |
| 162 }); |
| 163 |
| 164 })(); |
| 165 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 117833002:
telemetry: extend key_silk_cases.json (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src