feat(ripple): smooths out ripple animations

Closes #1750.
angular · Mar 4, 2015 · ac47ca6 · ac47ca6
1 parent 23cfecc
commit ac47ca6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/src/core/services/ripple/ripple.js b/src/core/services/ripple/ripple.js
@@ -32,7 +32,7 @@ function InkRippleService($window, $timeout) {
 
   function attachButtonBehavior(scope, element, options) {
     return attach(scope, element, angular.extend({
-      isFAB: element.hasClass('md-fab'),
+      fullRipple: true,
       isMenuItem: element.hasClass('md-menu-item'),
       center: false,
       dimBackground: true
@@ -51,7 +51,8 @@ function InkRippleService($window, $timeout) {
     return attach(scope, element, angular.extend({
       center: false,
       dimBackground: true,
-      outline: true
+      outline: false,
+      rippleSize: 'full'
     }, options));
   }
 
@@ -67,7 +68,7 @@ function InkRippleService($window, $timeout) {
       mousedownPauseTime: 150,
       dimBackground: false,
       outline: false,
-      isFAB: false,
+      fullRipple: true,
       isMenuItem: false,
       fitRipple: false
     }, options);
@@ -86,10 +87,10 @@ function InkRippleService($window, $timeout) {
 
     switch (rippleSizeSetting) {
       case 'full':
-        options.isFAB = true;
+        options.fullRipple = true;
         break;
       case 'partial':
-        options.isFAB = false;
+        options.fullRipple = false;
         break;
     }
 
@@ -283,7 +284,7 @@ function InkRippleService($window, $timeout) {
           height = Math.max(top, height - top);
           size = 2 * Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
         } else {
-          multiplier = options.isFAB ? 1.1 : 0.8;
+          multiplier = options.fullRipple ? 1.1 : 0.8;
           size = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) * multiplier;
           if (options.fitRipple) {
             size = Math.min(height, width, size);
@@ -299,7 +300,7 @@ function InkRippleService($window, $timeout) {
        * @param {number} the left cursor offset
        * @param {number} the top cursor offset
        *
-       * @returns {{backgroundColor: *, width: string, height: string, marginLeft: string, marginTop: string}}
+       * @returns {{backgroundColor: string, borderColor: string, width: string, height: string}}
        */
       function getRippleCss(size, left, top) {
         var rect,
@@ -335,7 +336,7 @@ function InkRippleService($window, $timeout) {
          * @returns {string} rgb color
          */
         function rgbaToRGB(color) {
-          return color.replace('rgba', 'rgb').replace(/,[^\)\,]+\)/, ')');
+          return color.replace('rgba', 'rgb').replace(/,[^\),]+\)/, ')');
         }
       }
     }
@@ -347,10 +348,10 @@ function InkRippleService($window, $timeout) {
     function onPressDown(ev) {
       if (!isRippleAllowed()) return;
 
-      var ripple = createRipple(ev.pointer.x, ev.pointer.y);
+      createRipple(ev.pointer.x, ev.pointer.y);
       isHeld = true;
     }
-    function onPressUp(ev) {
+    function onPressUp() {
       isHeld = false;
       var ripple = ripples[ ripples.length - 1 ];
       $timeout(function () { updateElement(ripple); }, 0, false);

diff --git a/src/core/style/structure.scss b/src/core/style/structure.scss
@@ -203,14 +203,16 @@ input {
   opacity: 0;
   border-radius: 50%;
   &.md-ripple-placed {
-    transition: left 0.9s $swift-ease-out-timing-function,
-                top 0.9s $swift-ease-out-timing-function,
-                margin 0.65s $swift-ease-out-timing-function,
-                border 0.65s $swift-ease-out-timing-function,
-                width 0.65s $swift-ease-out-timing-function,
-                height 0.65s $swift-ease-out-timing-function,
-                opacity 0.65s $swift-ease-out-timing-function,
-                transform 0.65s $swift-ease-out-timing-function;
+    $positionDuration: 0.9s * 2;
+    $sizeDuration: 0.65s * 2;
+    transition: left $positionDuration $swift-ease-out-timing-function,
+                top $positionDuration $swift-ease-out-timing-function,
+                margin $sizeDuration $swift-ease-out-timing-function,
+                border $sizeDuration $swift-ease-out-timing-function,
+                width $sizeDuration $swift-ease-out-timing-function,
+                height $sizeDuration $swift-ease-out-timing-function,
+                opacity $sizeDuration $swift-ease-out-timing-function,
+                transform $sizeDuration $swift-ease-out-timing-function;
   }
   &.md-ripple-scaled {
     transform: scale(1);
@@ -220,6 +222,7 @@ input {
   }
 }
 
+/*
 md-tab {
   > .md-ripple-container {
     .md-ripple {
@@ -237,6 +240,7 @@ md-tab {
     }
   }
 }
+*/
 
 @function map-to-string($map) {
   $map-str: '{';