third_party/polymer/v1_0/components-chromium/neon-animation/animations/ripple-animation-extracted.js

   1
   2
   3   Polymer({
   4
   5     is: 'ripple-animation',
   6
   7     behaviors: [
   8       Polymer.NeonSharedElementAnimationBehavior
   9     ],
  10
  11     configure: function(config) {
  12       var shared = this.findSharedElements(config);
  13       if (!shared) {
  14         return null;
  15       }
  16
  17       var translateX, translateY;
  18       var toRect = shared.to.getBoundingClientRect();
  19       if (config.gesture) {
  20         translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
  21         translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
  22       } else {
  23         var fromRect = shared.from.getBoundingClientRect();
  24         translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
  25         translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
  26       }
  27       var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
  28
  29       var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
  30       var diameter = Math.sqrt(2 * size * size);
  31       var scaleX = diameter / toRect.width;
  32       var scaleY = diameter / toRect.height;
  33       var scale = 'scale(' + scaleX + ',' + scaleY + ')';
  34
  35       this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
  36       shared.to.style.borderRadius = '50%';
  37
  38       this._effect = new KeyframeEffect(shared.to, [
  39         {'transform': translate + ' scale(0)'},
  40         {'transform': translate + ' ' + scale}
  41       ], this.timingFromConfig(config));
  42       return this._effect;
  43     },
  44
  45     complete: function() {
  46       if (this.sharedElements) {
  47         this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
  48         this.sharedElements.to.style.borderRadius = '';
  49       }
  50     }
  51
  52   });
  53