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

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