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 |