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