Update material-ripple animation to match new spec.

- Overall duration reduced from 418ms to 300ms.
- Ripple opacity increased from 14% to 16%.
- 4 discrete steps in animation instead of 5.

PiperOrigin-RevId: 186534602

Author: zacharydenton

lib/css/material/const/_color.scss

@@ -44,7 +44,7 @@ $mat-dark-opacity-light: .7;
 $mat-dark-opacity-lighter: .5;
 $mat-dark-opacity-lightest: .3;
 
-$mat-ripple-opacity: .14;
+$mat-ripple-opacity: .16;
 $mat-divider-opacity: .12;
 
 /// Semi-transparent black/white text as used in most material specs.

lib/material_ripple/material_ripple.dart

@@ -168,16 +168,16 @@ class MaterialRippleComponent implements OnDestroy {
     // dart2js would otherwise wait to initialize them until they are used.
     _ripplePool ??= new List<DivElement>(_maxRipples);
     _opacityTiming ??= {
-      'duration': 418.0,
+      'duration': 300.0,
     };
     _opacityKeyframes ??= [
       {'opacity': _minOpacity},
-      {'opacity': _maxOpacity, 'offset': 0.2},
-      {'opacity': _maxOpacity, 'offset': 0.4},
+      {'opacity': _maxOpacity, 'offset': 0.25},
+      {'opacity': _maxOpacity, 'offset': 0.5},
       {'opacity': _minOpacity},
     ];
     _transformTiming ??= {
-      'duration': 333.0,
+      'duration': 225.0,
       'easing': 'cubic-bezier(0.4, 0.0, 0.2, 1)',
     };
     // This is className = instead of classes.add because classes.add compiles

lib/material_ripple/material_ripple.scss

@@ -38,7 +38,7 @@ material-ripple {
   opacity: $min-ripple-opacity;
 
   &.fallback {
-    animation: __acx-ripple $mat-transition-slow linear;
+    animation: __acx-ripple $mat-transition-mobile linear;
     transform: translateZ(0);
   }
 }
@@ -49,7 +49,7 @@ material-ripple {
     transform: translateZ(0) scale($min-ripple-size / $ripple-size);
   }
 
-  20%, 40% {
+  25%, 50% {
     opacity: $max-ripple-opacity;
   }
 

lib/utils/color/material.dart

@@ -27,7 +27,7 @@ const darkOpacityLight = 0.7;
 const darkOpacityLighter = 0.5;
 const darkOpacityLightest = 0.3;
 
-const rippleOpacity = 0.14;
+const rippleOpacity = 0.16;
 const dividerOpacity = 0.12;
 
 /// SemiTransparent black/white text as used in most material specs.