1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10 11<link rel="import" href="../../polymer/polymer.html"> 12<link rel="import" href="../neon-shared-element-animation-behavior.html"> 13<link rel="import" href="../web-animations.html"> 14 15<!-- 16`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either 17a shared element, or a screen position. 18 19If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit` 20animation in the source page and in an `entry` animation in the destination page. Also, define the 21reverse-ripple elements in the `sharedElements` property (not a configuration property, see 22`Polymer.NeonSharedElementAnimatableBehavior`). 23If using a screen position, define the `gesture` property. 24Configuration: 25``` 26{ 27 name: 'reverse-ripple-animation`. 28 id: <shared-element-id>, /* set this or gesture */ 29 gesture: {x: <page-x>, y: <page-y>}, /* set this or id */ 30 timing: <animation-timing>, 31 toPage: <node>, /* define for the destination page */ 32 fromPage: <node>, /* define for the source page */ 33} 34``` 35--> 36 37<script> 38 Polymer({ 39 is: 'reverse-ripple-animation', 40 41 behaviors: [ 42 Polymer.NeonSharedElementAnimationBehavior 43 ], 44 45 configure: function(config) { 46 var shared = this.findSharedElements(config); 47 if (!shared) { 48 return null; 49 } 50 51 var translateX, translateY; 52 var fromRect = shared.from.getBoundingClientRect(); 53 if (config.gesture) { 54 translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2)); 55 translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2)); 56 } else { 57 var toRect = shared.to.getBoundingClientRect(); 58 translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2)); 59 translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2)); 60 } 61 var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; 62 63 var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2); 64 var diameter = Math.sqrt(2 * size * size); 65 var scaleX = diameter / fromRect.width; 66 var scaleY = diameter / fromRect.height; 67 var scale = 'scale(' + scaleX + ',' + scaleY + ')'; 68 69 this._effect = new KeyframeEffect(shared.from, [ 70 {'transform': translate + ' ' + scale}, 71 {'transform': translate + ' scale(0)'} 72 ], this.timingFromConfig(config)); 73 74 this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%'); 75 shared.from.style.borderRadius = '50%'; 76 77 return this._effect; 78 }, 79 80 complete: function() { 81 if (this.sharedElements) { 82 this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', ''); 83 this.sharedElements.from.style.borderRadius = ''; 84 } 85 } 86 }); 87</script> 88