feat: support animation scale in FAB, Snackbar and Banner (#1593)

Author: Noemi Rozpara

src/components/Banner.tsx

@@ -147,15 +147,17 @@ class Banner extends React.Component<Props, State> {
   };
 
   private show = () => {
+    const { scale } = this.props.theme.animation;
     Animated.timing(this.state.position, {
-      duration: 250,
+      duration: 250 * scale,
       toValue: 1,
     }).start();
   };
 
   private hide = () => {
+    const { scale } = this.props.theme.animation;
     Animated.timing(this.state.position, {
-      duration: 200,
+      duration: 200 * scale,
       toValue: 0,
     }).start();
   };

src/components/FAB/FAB.tsx

@@ -110,20 +110,21 @@ class FAB extends React.Component<Props, State> {
   };
 
   componentDidUpdate(prevProps: Props) {
+    const { scale } = this.props.theme.animation;
     if (this.props.visible === prevProps.visible) {
       return;
     }
 
     if (this.props.visible) {
       Animated.timing(this.state.visibility, {
         toValue: 1,
-        duration: 200,
+        duration: 200 * scale,
         useNativeDriver: true,
       }).start();
     } else {
       Animated.timing(this.state.visibility, {
         toValue: 0,
-        duration: 150,
+        duration: 150 * scale,
         useNativeDriver: true,
       }).start();
     }

src/components/FAB/FABGroup.tsx

@@ -152,20 +152,21 @@ class FABGroup extends React.Component<Props, State> {
       return;
     }
 
+    const { scale } = this.props.theme.animation;
     if (this.props.open) {
       Animated.parallel([
         Animated.timing(this.state.backdrop, {
           toValue: 1,
-          duration: 250,
+          duration: 250 * scale,
           useNativeDriver: true,
         }),
         Animated.stagger(
-          50,
+          50 * scale,
           this.state.animations
             .map(animation =>
               Animated.timing(animation, {
                 toValue: 1,
-                duration: 150,
+                duration: 150 * scale,
                 useNativeDriver: true,
               })
             )
@@ -176,13 +177,13 @@ class FABGroup extends React.Component<Props, State> {
       Animated.parallel([
         Animated.timing(this.state.backdrop, {
           toValue: 0,
-          duration: 200,
+          duration: 200 * scale,
           useNativeDriver: true,
         }),
         ...this.state.animations.map(animation =>
           Animated.timing(animation, {
             toValue: 0,
-            duration: 150,
+            duration: 150 * scale,
             useNativeDriver: true,
           })
         ),

src/components/Snackbar.tsx

@@ -166,9 +166,10 @@ class Snackbar extends React.Component<Props, State> {
     this.setState({
       hidden: false,
     });
+    const { scale } = this.props.theme.animation;
     Animated.timing(this.state.opacity, {
       toValue: 1,
-      duration: 200,
+      duration: 200 * scale,
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
@@ -188,10 +189,10 @@ class Snackbar extends React.Component<Props, State> {
     if (this.hideTimeout) {
       clearTimeout(this.hideTimeout);
     }
-
+    const { scale } = this.props.theme.animation;
     Animated.timing(this.state.opacity, {
       toValue: 0,
-      duration: 100,
+      duration: 100 * scale,
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {