third_party/polymer/components/core-animation/demo.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <!DOCTYPE html>
  10 <html>
  11 <head>
  12
  13   <meta charset="utf-8">
  14   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  15   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  16
  17   <title>core-animation</title>
  18
  19   <script src="../webcomponentsjs/webcomponents.js"></script>
  20
  21   <link href="../font-roboto/roboto.html" rel="import">
  22   <link href="../core-icon/core-icon.html" rel="import">
  23   <link href="../core-icons/core-icons.html" rel="import">
  24
  25   <link href="core-animation.html" rel="import">
  26   <link href="core-animation-group.html" rel="import">
  27
  28   <style shim-shadowdom>
  29
  30     body {
  31       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  32       font-size: 14px;
  33       margin: 0;
  34       padding: 24px;
  35       -webkit-tap-highlight-color: rgba(0,0,0,0);
  36       -webkit-touch-callout: none;
  37     }
  38
  39     section {
  40       padding: 20px 0;
  41     }
  42
  43     section > div {
  44       padding: 14px;
  45       font-size: 16px;
  46     }
  47
  48     html /deep/ core-icon {
  49       height: 48px;
  50       width: 48px;
  51     }
  52
  53     #target {
  54       display: inline-block;
  55       font-size: 32px;
  56       -webkit-transform: translateZ(0);
  57       transform: translateZ(0);
  58     }
  59
  60   </style>
  61
  62 </head>
  63 <body unresolved onclick="clickAction(event);">
  64
  65   <section>
  66
  67     <div>
  68       <div id="target" layout horizontal center>
  69         <core-icon icon="polymer"></core-icon>
  70         <span>polymer</span>
  71       </div>
  72     </div>
  73
  74     <button>
  75       opacity
  76       <core-animation id="raw" duration="1000">
  77         <core-animation-keyframe>
  78           <core-animation-prop name="opacity" value="1">
  79           </core-animation-prop>
  80         </core-animation-keyframe>
  81         <core-animation-keyframe>
  82           <core-animation-prop name="opacity" value="0.3">
  83           </core-animation-prop>
  84         </core-animation-keyframe>
  85         <core-animation-keyframe>
  86           <core-animation-prop name="opacity" value="1">
  87           </core-animation-prop>
  88         </core-animation-keyframe>
  89       </core-animation>
  90     </button>
  91
  92     <button>
  93       group: opacity + scale
  94       <core-animation-group type="seq">
  95         <core-animation duration="300">
  96           <core-animation-keyframe>
  97             <core-animation-prop name="opacity" value="1">
  98             </core-animation-prop>
  99           </core-animation-keyframe>
 100           <core-animation-keyframe>
 101             <core-animation-prop name="opacity" value="0.3">
 102             </core-animation-prop>
 103           </core-animation-keyframe>
 104           <core-animation-keyframe>
 105             <core-animation-prop name="opacity" value="1">
 106             </core-animation-prop>
 107           </core-animation-keyframe>
 108         </core-animation>
 109         <core-animation duration="300">
 110           <core-animation-keyframe>
 111             <core-animation-prop name="transform" value="scale(1)">
 112             </core-animation-prop>
 113           </core-animation-keyframe>
 114           <core-animation-keyframe>
 115             <core-animation-prop name="transform" value="scale(1.2)">
 116             </core-animation-prop>
 117           </core-animation-keyframe>
 118           <core-animation-keyframe>
 119             <core-animation-prop name="transform" value="scale(1)">
 120             </core-animation-prop>
 121           </core-animation-keyframe>
 122         </core-animation>
 123       </core-animation-group>
 124     </button>
 125
 126     <button>
 127       infinite duration
 128       <core-animation duration="1000" iterations="Infinity" direction="alternate">
 129         <core-animation-keyframe>
 130           <core-animation-prop name="opacity" value="1">
 131           </core-animation-prop>
 132         </core-animation-keyframe>
 133         <core-animation-keyframe>
 134           <core-animation-prop name="opacity" value="0.3">
 135           </core-animation-prop>
 136         </core-animation-keyframe>
 137       </core-animation>
 138     </button>
 139
 140     <button>
 141       custom effect
 142       <core-animation id="custom-animation" duration="500"></core-animation>
 143     </button>
 144
 145   </section>
 146
 147   <script>
 148     var player;
 149
 150     document.body.addEventListener('core-animation-finish', function(e) {
 151       console.log('core-animation-finish');
 152       if (player) {
 153         player.cancel();
 154         player = null;
 155         target.querySelector('span').textContent = 'polymer';
 156       }
 157     });
 158
 159     var customAnimationFn = function(timeFraction, target) {
 160       // var colors = [
 161       //   '#db4437',
 162       //   '#ff9800',
 163       //   '#ffeb3b',
 164       //   '#0f9d58',
 165       //   '#4285f4',
 166       //   '#3f51b5',
 167       //   '#9c27b0'
 168       // ];
 169       target.querySelector('span').textContent = timeFraction;
 170     };
 171
 172
 173     function clickAction(e) {
 174       var t = e.target;
 175       if (e.target.localName !== 'button') {
 176         return;
 177       }
 178
 179       if (player) {
 180         player.cancel();
 181       }
 182
 183       var a = t.querySelector('core-animation,core-animation-group');
 184       if (a.id === 'custom-animation') {
 185         a.customEffect = customAnimationFn;
 186       }
 187
 188       a.target = document.getElementById('target');
 189       player = a.play();
 190     }
 191   </script>
 192 </body>
 193 </html>