fix(ripple): different durations for ripple elements (#3136)

* No longer uses a `PX_PER_SECOND` variable to calculate the fade-in duration of a ripple element.
* Now ripple elements always have the same `transitionDuration`, which ensures that ripples are faster on bigger elements and slower on smaller elements.

Fixes #3109

src/demo-app/ripple/ripple-demo.html

@@ -23,7 +23,7 @@
     <md-radio-group [(ngModel)]="rippleSpeed">
       <md-radio-button name="demo-ripple-options" value="0.4">Slow</md-radio-button>
       <md-radio-button name="demo-ripple-options" value="1">Normal</md-radio-button>
-      <md-radio-button name="demo-ripple-options" value="2.5">Fast</md-radio-button>
+      <md-radio-button name="demo-ripple-options" value="2">Fast</md-radio-button>
     </md-radio-group>
   </section>
   <section>

src/lib/checkbox/checkbox.html

@@ -17,8 +17,7 @@
            (click)="_onInputClick($event)">
     <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-checkbox-ripple"
          [mdRippleTrigger]="_getHostElement()"
-         [mdRippleCentered]="true"
-         [mdRippleSpeedFactor]="0.3"></div>
+         [mdRippleCentered]="true"></div>
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">
       <svg version="1.1"

src/lib/core/ripple/ripple-renderer.ts

@@ -1,11 +1,11 @@
 import {ElementRef, NgZone} from '@angular/core';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 
-/** Fade-in speed in pixels per second. Can be modified with the speedFactor option. */
-export const RIPPLE_SPEED_PX_PER_SECOND = 170;
+/** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
+export const RIPPLE_FADE_IN_DURATION = 450;
 
-/** Fade-out speed for the ripples in milliseconds. This can't be modified by the speedFactor. */
-export const RIPPLE_FADE_OUT_DURATION = 600;
+/** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
+export const RIPPLE_FADE_OUT_DURATION = 400;
 
 /**
  * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
@@ -81,7 +81,7 @@ export class RippleRenderer {
     }
 
     let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
-    let duration = 1 / (config.speedFactor || 1) * (radius / RIPPLE_SPEED_PX_PER_SECOND);
+    let duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
     let offsetX = pageX - containerRect.left;
     let offsetY = pageY - containerRect.top;
 
@@ -95,7 +95,7 @@ export class RippleRenderer {
 
     // If the color is not set, the default CSS color will be used.
     ripple.style.backgroundColor = config.color;
-    ripple.style.transitionDuration = `${duration}s`;
+    ripple.style.transitionDuration = `${duration}ms`;
 
     this._containerElement.appendChild(ripple);
 
@@ -109,7 +109,7 @@ export class RippleRenderer {
     // if the mouse is released.
     this.runTimeoutOutsideZone(() => {
       this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
-    }, duration * 1000);
+    }, duration);
   }
 
   /** Fades out a ripple element. */

src/lib/core/ripple/ripple.spec.ts

@@ -2,7 +2,7 @@ import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/
 import {Component, ViewChild} from '@angular/core';
 import {MdRipple, MdRippleModule} from './ripple';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
-import {RIPPLE_FADE_OUT_DURATION, RIPPLE_SPEED_PX_PER_SECOND} from './ripple-renderer';
+import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
 
 
 /** Creates a DOM mouse event. */
@@ -104,11 +104,8 @@ describe('MdRipple', () => {
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
 
-      // Determines the diagonal distance of the ripple target.
-      let diagonal = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH);
-
-      // Calculates the duration for fading in the ripple. Also adds the fade-out duration.
-      tick((diagonal / RIPPLE_SPEED_PX_PER_SECOND * 1000) + RIPPLE_FADE_OUT_DURATION);
+      // Calculates the duration for fading-in and fading-out the ripple.
+      tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION);
 
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));

src/lib/radio/radio.html

@@ -7,8 +7,7 @@
     <div class="mat-radio-inner-circle"></div>
     <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-radio-ripple"
          [mdRippleTrigger]="label"
-         [mdRippleCentered]="true"
-         [mdRippleSpeedFactor]="0.3"></div>
+         [mdRippleCentered]="true"></div>
   </div>
 
   <input #input class="mat-radio-input cdk-visually-hidden" type="radio"