Pass animation object directly to animation container

phamfoo · phamfoo · commit 0579928f1a62 · 2019-11-29T23:59:06.000+07:00
diff --git a/src/AnimationContainer.tsx b/src/AnimationContainer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Animated } from 'react-native'
 
 export interface Props {
-  animation: () => Animated.CompositeAnimation
+  animation: Animated.CompositeAnimation
 }
 export default class AnimationContainer extends React.Component<Props> {
   animation: Animated.CompositeAnimation
@@ -11,7 +11,7 @@ export default class AnimationContainer extends React.Component<Props> {
     super(props)
 
     const { animation } = this.props
-    this.animation = animation()
+    this.animation = animation
   }
 
   componentDidMount() {
diff --git a/src/Bounce.tsx b/src/Bounce.tsx
@@ -20,18 +20,16 @@ export default class Bounce extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.stagger(
-            1000,
-            this.values.map(value =>
-              anim({
-                duration: 2000,
-                value: value,
-                keyframes: [0, 45, 55, 100],
-              })
-            )
+        animation={Animated.stagger(
+          1000,
+          this.values.map(value =>
+            anim({
+              duration: 2000,
+              value: value,
+              keyframes: [0, 45, 55, 100],
+            })
           )
-        }
+        )}
       >
         <View style={[{ width: size, height: size }, style]} {...rest}>
           {this.values.map((value, index) => (
diff --git a/src/Chase.tsx b/src/Chase.tsx
@@ -21,35 +21,33 @@ export default class Chase extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.parallel([
-            Animated.stagger(
-              100,
-              this.chaseDotValues.map(value =>
-                anim({
-                  duration: 2000,
-                  value: value,
-                  keyframes: [0, 80, 100],
-                })
-              )
-            ),
-            Animated.stagger(
-              100,
-              this.chaseDotBeforeValues.map(value =>
-                anim({
-                  duration: 2000,
-                  value: value,
-                  keyframes: [0, 50, 100],
-                })
-              )
-            ),
-            anim({
-              duration: 2500,
-              easing: Easing.linear,
-              value: this.chase,
-            }),
-          ])
-        }
+        animation={Animated.parallel([
+          Animated.stagger(
+            100,
+            this.chaseDotValues.map(value =>
+              anim({
+                duration: 2000,
+                value: value,
+                keyframes: [0, 80, 100],
+              })
+            )
+          ),
+          Animated.stagger(
+            100,
+            this.chaseDotBeforeValues.map(value =>
+              anim({
+                duration: 2000,
+                value: value,
+                keyframes: [0, 50, 100],
+              })
+            )
+          ),
+          anim({
+            duration: 2500,
+            easing: Easing.linear,
+            value: this.chase,
+          }),
+        ])}
       >
         <Animated.View
           style={[
diff --git a/src/Circle.tsx b/src/Circle.tsx
@@ -19,18 +19,16 @@ export default class Circle extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.stagger(
-            100,
-            this.values.map(value =>
-              anim({
-                duration: 1200,
-                value: value,
-                keyframes: [0, 40, 80, 100],
-              })
-            )
+        animation={Animated.stagger(
+          100,
+          this.values.map(value =>
+            anim({
+              duration: 1200,
+              value: value,
+              keyframes: [0, 40, 80, 100],
+            })
           )
-        }
+        )}
       >
         <View
           style={[
diff --git a/src/CircleFade.tsx b/src/CircleFade.tsx
@@ -19,18 +19,16 @@ export default class CircleFade extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.stagger(
-            100,
-            this.values.map(value =>
-              anim({
-                duration: 1200,
-                value: value,
-                keyframes: [0, 39, 40, 100],
-              })
-            )
+        animation={Animated.stagger(
+          100,
+          this.values.map(value =>
+            anim({
+              duration: 1200,
+              value: value,
+              keyframes: [0, 39, 40, 100],
+            })
           )
-        }
+        )}
       >
         <View
           style={[
diff --git a/src/Flow.tsx b/src/Flow.tsx
@@ -13,19 +13,17 @@ export default class Flow extends React.Component<SpinnerProps> {
 
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.stagger(
-            150,
-            this.values.map(value =>
-              anim({
-                duration: 1400,
-                value: value,
-                easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
-                keyframes: [0, 40, 80, 100],
-              })
-            )
+        animation={Animated.stagger(
+          150,
+          this.values.map(value =>
+            anim({
+              duration: 1400,
+              value: value,
+              easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
+              keyframes: [0, 40, 80, 100],
+            })
           )
-        }
+        )}
       >
         <View
           style={[
diff --git a/src/Fold.tsx b/src/Fold.tsx
@@ -12,19 +12,17 @@ export default class Fold extends React.Component<SpinnerProps> {
     const { size, color, style, ...rest } = this.props
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.parallel(
-            this.values.map((value, index) =>
-              anim({
-                duration: 2400,
-                value: value,
-                keyframes: [0, 10, 25, 75, 90, 100],
-                delay: index * 300,
-                easing: Easing.linear,
-              })
-            )
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
+            anim({
+              duration: 2400,
+              value: value,
+              keyframes: [0, 10, 25, 75, 90, 100],
+              delay: index * 300,
+              easing: Easing.linear,
+            })
           )
-        }
+        )}
       >
         <View
           style={[
diff --git a/src/Grid.tsx b/src/Grid.tsx
@@ -13,18 +13,16 @@ export default class Grid extends React.Component<SpinnerProps> {
     const { size, color, style, ...rest } = this.props
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.parallel(
-            this.values.map((value, index) =>
-              anim({
-                duration: 1300,
-                value: value,
-                keyframes: [0, 35, 70, 100],
-                delay: delays[index],
-              })
-            )
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
+            anim({
+              duration: 1300,
+              value: value,
+              keyframes: [0, 35, 70, 100],
+              delay: delays[index],
+            })
           )
-        }
+        )}
       >
         <View
           style={[
diff --git a/src/Plane.tsx b/src/Plane.tsx
@@ -12,9 +12,11 @@ export default class Plane extends React.Component<SpinnerProps> {
     const { size, color, style, ...rest } = this.props
     return (
       <AnimationContainer
-        animation={() =>
-          anim({ duration: 1200, value: this.value, keyframes: [0, 50, 100] })
-        }
+        animation={anim({
+          duration: 1200,
+          value: this.value,
+          keyframes: [0, 50, 100],
+        })}
       >
         <Animated.View
           style={[
diff --git a/src/Pulse.tsx b/src/Pulse.tsx
@@ -12,13 +12,11 @@ export default class Pulse extends React.Component<SpinnerProps> {
     const { size, color, style, ...rest } = this.props
     return (
       <AnimationContainer
-        animation={() =>
-          anim({
-            duration: 1200,
-            value: this.value,
-            easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
-          })
-        }
+        animation={anim({
+          duration: 1200,
+          value: this.value,
+          easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
+        })}
       >
         <Animated.View
           style={[
diff --git a/src/Swing.tsx b/src/Swing.tsx
@@ -18,21 +18,19 @@ export default class Swing extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.parallel([
-            anim({
-              duration: 2000,
-              value: this.values[0],
-              keyframes: [0, 50, 100],
-            }),
-            anim({
-              duration: 1800,
-              value: this.values[1],
-              easing: Easing.linear,
-              keyframes: [0, 100],
-            }),
-          ])
-        }
+        animation={Animated.parallel([
+          anim({
+            duration: 2000,
+            value: this.values[0],
+            keyframes: [0, 50, 100],
+          }),
+          anim({
+            duration: 1800,
+            value: this.values[1],
+            easing: Easing.linear,
+            keyframes: [0, 100],
+          }),
+        ])}
       >
         <Animated.View
           style={[
diff --git a/src/Wander.tsx b/src/Wander.tsx
@@ -14,13 +14,11 @@ export default class Wander extends React.Component<SpinnerProps> {
 
     return (
       <AnimationContainer
-        animation={() =>
-          anim({
-            duration: 2000,
-            value: this.value,
-            keyframes: [0, 25, 50, 75, 100],
-          })
-        }
+        animation={anim({
+          duration: 2000,
+          value: this.value,
+          keyframes: [0, 25, 50, 75, 100],
+        })}
       >
         <View
           style={[
diff --git a/src/Wave.tsx b/src/Wave.tsx
@@ -13,18 +13,16 @@ export default class Wave extends React.Component<SpinnerProps> {
 
     return (
       <AnimationContainer
-        animation={() =>
-          Animated.stagger(
-            100,
-            this.values.map(value =>
-              anim({
-                duration: 1200,
-                value: value,
-                keyframes: [0, 20, 40, 100],
-              })
-            )
+        animation={Animated.stagger(
+          100,
+          this.values.map(value =>
+            anim({
+              duration: 1200,
+              value: value,
+              keyframes: [0, 20, 40, 100],
+            })
           )
-        }
+        )}
       >
         <View
           style={[

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import * as React from 'react'`
`2`	`2`	`import { Animated } from 'react-native'`
`3`	`3`
`4`	`4`	`export interface Props {`
`5`		`- animation: () => Animated.CompositeAnimation`
	`5`	`+ animation: Animated.CompositeAnimation`
`6`	`6`	`}`
`7`	`7`	`export default class AnimationContainer extends React.Component<Props> {`
`8`	`8`	`animation: Animated.CompositeAnimation`
`@@ -11,7 +11,7 @@ export default class AnimationContainer extends React.Component<Props> {`
`11`	`11`	`super(props)`
`12`	`12`
`13`	`13`	`const { animation } = this.props`
`14`		`- this.animation = animation()`
	`14`	`+ this.animation = animation`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`componentDidMount() {`