OLD | NEW |
(Empty) | |
| 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 + (from
Rect.width / 2)); |
| 23 translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromR
ect.height / 2)); |
| 24 } |
| 25 var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; |
| 26 |
| 27 var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.he
ight + 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 }); |
OLD | NEW |