g-shake: configurable shake animation

Polymer · Apr 25, 2013 · 9344922 · 9344922
1 parent 66474fe
commit 9344922
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 1 deletion.
diff --git a/components/animation/g-animation.html b/components/animation/g-animation.html
@@ -34,6 +34,12 @@
          * @type HTMLElement|Node
          */
         target: null,
+        /**
+         * ID for the node being animated.
+         * @property targetId
+         * @type String
+         */
+        targetId: null,
         // animation
         /**
          * Animation properties specified as a dictionary of
@@ -88,7 +94,12 @@
          * @property direction
          * @type String
          */
-        direction: null
+        direction: null,
+        /**
+         * @property autoplay
+         * @type Boolean
+         */
+        autoplay: false
       },
       ready: function() {
         this.asyncApply();
@@ -150,6 +161,15 @@
       targetChanged: function() {
         this.asyncApply();
       },
+      targetIdChanged: function() {
+        var p = this;
+        while (p && !p.host) {
+          p = p.parentNode;
+        }
+        if (p && this.targetId) {
+          this.target = p.querySelector('#' + this.targetId);
+        }
+      },
       propertiesChanged: function() {
         this.asyncApply();
       },

diff --git a/components/animation/g-shake.html b/components/animation/g-shake.html
@@ -0,0 +1,48 @@
+<link rel="import" href="g-animation.html">
+<element name="g-shake" extends="g-animation" on-click="clickHandler">
+  <script>
+    Toolkit.register(this, {
+      publish: {
+        targetId: '',
+        duration: 0.3,
+        magnitude: '10px',
+        period: 0.1,
+        easing: 'ease-in',
+        autoplay: true
+      },
+      ready: function() {
+        this.super();
+        this.magnitudeChanged();
+        this.periodChanged();
+      },
+      durationChanged: function() {
+        this.super();
+        this.generateProperties();
+      },
+      magnitudeChanged: function() {
+        this.generateProperties();
+      },
+      periodChanged: function() {
+        this.generateProperties();
+      },
+      generateProperties: function() {
+        var transforms = ['translateX(0px)'];
+        if (this.magnitude) {
+          for (var i = 0; i < this.duration / this.period; i++) {
+            transforms.push('translateX(-' + this.magnitude + ')');
+            transforms.push('translateX(' + this.magnitude + ')');
+          }
+          transforms.push('translateX(-' + this.magnitude + ')');
+          transforms.push('translateX(0px)');
+        }
+        this.properties = {
+          transform: transforms
+        };
+      },
+      clickHandler: function() {
+        // for demo
+        this.play();
+      }
+    });
+  </script>
+</element>
diff --git a/workbench/animation/components.html b/workbench/animation/components.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Animation Components</title>
+    <link rel="import" href="../../components/animation/g-bounce.html">
+    <link rel="import" href="../../components/animation/g-shake.html">
+    <script src="../../toolkit.js"></script>
+    <style>
+      body {
+        text-align: center;
+      }
+      div#target {
+        display: inline-block;
+        background-color: #cccccc;
+        border-radius: 5px;
+        padding: 5px 10px;
+        margin: 100px;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target">shake</div>
+    <g-bounce id="bounce" duration="1"></g-bounce>
+    <g-shake id="shake"></g-shake>
+    <script>
+      document.addEventListener('WebComponentsReady', function() {
+        shake.target = target;
+        shake.play();
+      });
+    </script>
+  </body>
+</html>