third_party/polymer/v1_0/components/neon-animation/animations/ripple-animation.html

   1 <!--
   2 @license
   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
   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 `<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.
  18
  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`).
  23
  24 If using a screen position, define the `gesture` property.
  25
  26 Configuration:
  27 ```
  28 {
  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 */
  35 }
  36 ```
  37 -->
  38
  39 <script>
  40
  41   Polymer({
  42
  43     is: 'ripple-animation',
  44
  45     behaviors: [
  46       Polymer.NeonSharedElementAnimationBehavior
  47     ],
  48
  49     configure: function(config) {
  50       var shared = this.findSharedElements(config);
  51       if (!shared) {
  52         return null;
  53       }
  54
  55       var translateX, translateY;
  56       var toRect = shared.to.getBoundingClientRect();
  57       if (config.gesture) {
  58         translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
  59         translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
  60       } else {
  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.top + (toRect.height / 2));
  64       }
  65       var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
  66
  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 + ')';
  72
  73       this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
  74       shared.to.style.borderRadius = '50%';
  75
  76       this._effect = new KeyframeEffect(shared.to, [
  77         {'transform': translate + ' scale(0)'},
  78         {'transform': translate + ' ' + scale}
  79       ], this.timingFromConfig(config));
  80       return this._effect;
  81     },
  82
  83     complete: function() {
  84       if (this.sharedElements) {
  85         this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
  86         this.sharedElements.to.style.borderRadius = '';
  87       }
  88     }
  89
  90   });
  91
  92 </script>