Skip to content

Commit 5c7a96b

Browse files
devversionandrewseguin
authored andcommitted
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
1 parent 1a67107 commit 5c7a96b

File tree

5 files changed

+13
-18
lines changed

5 files changed

+13
-18
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<md-radio-group [(ngModel)]="rippleSpeed">
2424
<md-radio-button name="demo-ripple-options" value="0.4">Slow</md-radio-button>
2525
<md-radio-button name="demo-ripple-options" value="1">Normal</md-radio-button>
26-
<md-radio-button name="demo-ripple-options" value="2.5">Fast</md-radio-button>
26+
<md-radio-button name="demo-ripple-options" value="2">Fast</md-radio-button>
2727
</md-radio-group>
2828
</section>
2929
<section>

src/lib/checkbox/checkbox.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@
1717
(click)="_onInputClick($event)">
1818
<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-checkbox-ripple"
1919
[mdRippleTrigger]="_getHostElement()"
20-
[mdRippleCentered]="true"
21-
[mdRippleSpeedFactor]="0.3"></div>
20+
[mdRippleCentered]="true"></div>
2221
<div class="mat-checkbox-frame"></div>
2322
<div class="mat-checkbox-background">
2423
<svg version="1.1"

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {ElementRef, NgZone} from '@angular/core';
22
import {ViewportRuler} from '../overlay/position/viewport-ruler';
33

4-
/** Fade-in speed in pixels per second. Can be modified with the speedFactor option. */
5-
export const RIPPLE_SPEED_PX_PER_SECOND = 170;
4+
/** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
5+
export const RIPPLE_FADE_IN_DURATION = 450;
66

7-
/** Fade-out speed for the ripples in milliseconds. This can't be modified by the speedFactor. */
8-
export const RIPPLE_FADE_OUT_DURATION = 600;
7+
/** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
8+
export const RIPPLE_FADE_OUT_DURATION = 400;
99

1010
/**
1111
* Returns the distance from the point (x, y) to the furthest corner of a rectangle.
@@ -81,7 +81,7 @@ export class RippleRenderer {
8181
}
8282

8383
let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
84-
let duration = 1 / (config.speedFactor || 1) * (radius / RIPPLE_SPEED_PX_PER_SECOND);
84+
let duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
8585
let offsetX = pageX - containerRect.left;
8686
let offsetY = pageY - containerRect.top;
8787

@@ -95,7 +95,7 @@ export class RippleRenderer {
9595

9696
// If the color is not set, the default CSS color will be used.
9797
ripple.style.backgroundColor = config.color;
98-
ripple.style.transitionDuration = `${duration}s`;
98+
ripple.style.transitionDuration = `${duration}ms`;
9999

100100
this._containerElement.appendChild(ripple);
101101

@@ -109,7 +109,7 @@ export class RippleRenderer {
109109
// if the mouse is released.
110110
this.runTimeoutOutsideZone(() => {
111111
this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
112-
}, duration * 1000);
112+
}, duration);
113113
}
114114

115115
/** Fades out a ripple element. */

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/
22
import {Component, ViewChild} from '@angular/core';
33
import {MdRipple, MdRippleModule} from './ripple';
44
import {ViewportRuler} from '../overlay/position/viewport-ruler';
5-
import {RIPPLE_FADE_OUT_DURATION, RIPPLE_SPEED_PX_PER_SECOND} from './ripple-renderer';
5+
import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
66

77

88
/** Creates a DOM mouse event. */
@@ -104,11 +104,8 @@ describe('MdRipple', () => {
104104

105105
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
106106

107-
// Determines the diagonal distance of the ripple target.
108-
let diagonal = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH);
109-
110-
// Calculates the duration for fading in the ripple. Also adds the fade-out duration.
111-
tick((diagonal / RIPPLE_SPEED_PX_PER_SECOND * 1000) + RIPPLE_FADE_OUT_DURATION);
107+
// Calculates the duration for fading-in and fading-out the ripple.
108+
tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION);
112109

113110
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
114111
}));

src/lib/radio/radio.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
<div class="mat-radio-inner-circle"></div>
88
<div md-ripple *ngIf="!_isRippleDisabled()" class="mat-radio-ripple"
99
[mdRippleTrigger]="label"
10-
[mdRippleCentered]="true"
11-
[mdRippleSpeedFactor]="0.3"></div>
10+
[mdRippleCentered]="true"></div>
1211
</div>
1312

1413
<input #input class="mat-radio-input cdk-visually-hidden" type="radio"

0 commit comments

Comments
 (0)