OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer({ |
| 4 |
| 5 is: 'ripple-animation', |
| 6 |
| 7 behaviors: [ |
| 8 Polymer.NeonSharedElementAnimationBehavior |
| 9 ], |
| 10 |
| 11 configure: function(config, fromPage, toPage) { |
| 12 var shared = this.findSharedElements(config, fromPage, toPage); |
| 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.left + (toRect.height / 2)); |
| 22 } else { |
| 23 var fromRect = shared.from.getBoundingClientRect(); |
| 24 translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (to
Rect.width / 2)); |
| 25 translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.left + (to
Rect.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 |
OLD | NEW |