3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
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">
16 `<ripple-animation>` scales and transform an element such that it appears to ripple from either
17 a shared element, or from a screen position, to full screen.
19 If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
20 animation in the source page and in an `entry` animation in the destination page. Also, define the
21 hero elements in the `sharedElements` property (not a configuration property, see
22 `Polymer.NeonSharedElementAnimatableBehavior`).
24 If using a screen position, define the `gesture` property.
29 name: 'ripple-animation`.
30 id: <shared-element-id>, /* set this or gesture */
31 gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
32 timing: <animation-timing>,
33 toPage: <node>, /* define for the destination page */
34 fromPage: <node>, /* define for the source page */
43 is
: 'ripple-animation',
46 Polymer
.NeonSharedElementAnimationBehavior
49 configure: function(config
, fromPage
, toPage
) {
50 var shared
= this.findSharedElements(config
, fromPage
, toPage
);
55 var translateX
, translateY
;
56 var toRect
= shared
.to
.getBoundingClientRect();
58 translateX
= config
.gesture
.x
- (toRect
.left
+ (toRect
.width
/ 2));
59 translateY
= config
.gesture
.y
- (toRect
.left
+ (toRect
.height
/ 2));
61 var fromRect
= shared
.from.getBoundingClientRect();
62 translateX
= (fromRect
.left
+ (fromRect
.width
/ 2)) - (toRect
.left
+ (toRect
.width
/ 2));
63 translateY
= (fromRect
.top
+ (fromRect
.height
/ 2)) - (toRect
.left
+ (toRect
.height
/ 2));
65 var translate
= 'translate(' + translateX
+ 'px,' + translateY
+ 'px)';
67 var size
= Math
.max(toRect
.width
+ Math
.abs(translateX
) * 2, toRect
.height
+ Math
.abs(translateY
) * 2);
68 var diameter
= Math
.sqrt(2 * size
* size
);
69 var scaleX
= diameter
/ toRect
.width
;
70 var scaleY
= diameter
/ toRect
.height
;
71 var scale
= 'scale(' + scaleX
+ ',' + scaleY
+ ')';
73 this.setPrefixedProperty(shared
.to
, 'transformOrigin', '50% 50%');
74 shared
.to
.style
.borderRadius
= '50%';
76 this._effect
= new KeyframeEffect(shared
.to
, [
77 {'transform': translate
+ ' scale(0)'},
78 {'transform': translate
+ ' ' + scale
}
79 ], this.timingFromConfig(config
));
83 complete: function() {
84 if (this.sharedElements
) {
85 this.setPrefixedProperty(this.sharedElements
.to
, 'transformOrigin', '');
86 this.sharedElements
.to
.style
.borderRadius
= '';