Optimize the performance of all spinners

phamfoo · phamfoo · commit 848883742c37 · 2019-12-04T11:12:25.000+07:00
diff --git a/example/App.tsx b/example/App.tsx
@@ -34,7 +34,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" />
-      {Array(Math.round(spinners.length / 3))
+      {Array(Math.ceil(spinners.length / 3))
         .fill(null)
         .map((_, rowIndex) => (
           <View key={rowIndex} style={styles.row}>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-animated-spinkit",
   "description": "A pure JavaScript port of SpinKit for React Native.",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.0",
   "author": "Tien Pham",
   "main": "lib/commonjs/index.js",
   "license": "MIT",
diff --git a/src/Bounce.tsx b/src/Bounce.tsx
@@ -2,11 +2,27 @@ import * as React from 'react'
 import { Animated, View } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { stagger } from './utils'
 
 export default class Bounce extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  values = createAnimatedValues(2)
+
+  value = new Animated.Value(0)
+  animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
+
+  constructor(props: SpinnerProps) {
+    super(props)
+
+    const { animation, values } = stagger(1000, 2, {
+      duration: 2000,
+      value: this.value,
+      keyframes: [0, 45, 55, 100],
+    })
+
+    this.animation = animation
+    this.values = values
+  }
 
   render() {
     const { size, color, style, ...rest } = this.props
@@ -19,18 +35,7 @@ export default class Bounce extends React.Component<SpinnerProps> {
       opacity: 0.6,
     }
     return (
-      <AnimationContainer
-        animation={Animated.parallel(
-          this.values.map((value, index) =>
-            anim({
-              duration: 2000,
-              value: value,
-              keyframes: [0, 45, 55, 100],
-              delay: index * 1000,
-            })
-          )
-        )}
-      >
+      <AnimationContainer animation={this.animation}>
         <View style={[{ width: size, height: size }, style]} {...rest}>
           {this.values.map((value, index) => (
             <Animated.View
diff --git a/src/Chase.tsx b/src/Chase.tsx
@@ -2,13 +2,54 @@ import * as React from 'react'
 import { Animated, Easing } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { anim, stagger } from './utils'
 
 export default class Chase extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  chaseDotValues = createAnimatedValues(6)
-  chaseDotBeforeValues = createAnimatedValues(6)
+
   chase = new Animated.Value(0)
+  chaseDot = new Animated.Value(0)
+  chaseDotValues: Animated.AnimatedInterpolation[]
+  chaseDotBefore = new Animated.Value(0)
+  chaseDotBeforeValues: Animated.AnimatedInterpolation[]
+  animation: Animated.CompositeAnimation
+
+  constructor(props: SpinnerProps) {
+    super(props)
+
+    const { animation: chaseDotAnimation, values: chaseDotValues } = stagger(
+      100,
+      6,
+      {
+        duration: 2000,
+        value: this.chaseDot,
+        keyframes: [0, 80, 100],
+      }
+    )
+    this.chaseDotValues = chaseDotValues
+
+    const {
+      animation: chaseDotBeforeAnimation,
+      values: chaseDotBeforeValues,
+    } = stagger(100, 6, {
+      duration: 2000,
+      value: this.chaseDot,
+      keyframes: [0, 80, 100],
+    })
+    this.chaseDotBeforeValues = chaseDotBeforeValues
+
+    const chaseAnimation = anim({
+      duration: 2500,
+      easing: Easing.linear,
+      value: this.chase,
+    })
+
+    this.animation = Animated.parallel([
+      chaseAnimation,
+      chaseDotAnimation,
+      chaseDotBeforeAnimation,
+    ])
+  }
 
   render() {
     const { size, color, style, ...rest } = this.props
@@ -20,35 +61,7 @@ export default class Chase extends React.Component<SpinnerProps> {
       borderRadius: size / 8,
     }
     return (
-      <AnimationContainer
-        animation={Animated.parallel([
-          Animated.parallel(
-            this.chaseDotValues.map((value, index) =>
-              anim({
-                duration: 2000,
-                value: value,
-                keyframes: [0, 80, 100],
-                delay: index * 100,
-              })
-            )
-          ),
-          Animated.parallel(
-            this.chaseDotBeforeValues.map((value, index) =>
-              anim({
-                duration: 2000,
-                value: value,
-                keyframes: [0, 50, 100],
-                delay: index * 100,
-              })
-            )
-          ),
-          anim({
-            duration: 2500,
-            easing: Easing.linear,
-            value: this.chase,
-          }),
-        ])}
-      >
+      <AnimationContainer animation={this.animation}>
         <Animated.View
           style={[
             {
diff --git a/src/Circle.tsx b/src/Circle.tsx
@@ -2,11 +2,26 @@ import * as React from 'react'
 import { Animated, View } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { stagger } from './utils'
 
 export default class Circle extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  values = createAnimatedValues(12)
+
+  value = new Animated.Value(0)
+  animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
+
+  constructor(props: SpinnerProps) {
+    super(props)
+    const { animation, values } = stagger(100, 12, {
+      duration: 1200,
+      value: this.value,
+      keyframes: [0, 40, 80, 100],
+    })
+
+    this.animation = animation
+    this.values = values
+  }
 
   render() {
     const { size, color, style, ...rest } = this.props
@@ -17,19 +32,9 @@ export default class Circle extends React.Component<SpinnerProps> {
       backgroundColor: color,
       borderRadius: (size * 0.15) / 2,
     }
+
     return (
-      <AnimationContainer
-        animation={Animated.parallel(
-          this.values.map((value, index) =>
-            anim({
-              duration: 1200,
-              value: value,
-              keyframes: [0, 40, 80, 100],
-              delay: index * 100,
-            })
-          )
-        )}
-      >
+      <AnimationContainer animation={this.animation}>
         <View
           style={[
             {
diff --git a/src/CircleFade.tsx b/src/CircleFade.tsx
@@ -2,11 +2,26 @@ import * as React from 'react'
 import { Animated, View } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { stagger } from './utils'
 
 export default class CircleFade extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  values = createAnimatedValues(12)
+
+  value = new Animated.Value(0)
+  animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
+
+  constructor(props: SpinnerProps) {
+    super(props)
+    const { animation, values } = stagger(100, 12, {
+      duration: 1200,
+      value: this.value,
+      keyframes: [0, 39, 40, 100],
+    })
+
+    this.animation = animation
+    this.values = values
+  }
 
   render() {
     const { size, color, style, ...rest } = this.props
@@ -18,18 +33,7 @@ export default class CircleFade extends React.Component<SpinnerProps> {
       borderRadius: (size * 0.15) / 2,
     }
     return (
-      <AnimationContainer
-        animation={Animated.parallel(
-          this.values.map((value, index) =>
-            anim({
-              duration: 1200,
-              value: value,
-              keyframes: [0, 39, 40, 100],
-              delay: index * 100,
-            })
-          )
-        )}
-      >
+      <AnimationContainer animation={this.animation}>
         <View
           style={[
             {
diff --git a/src/Flow.tsx b/src/Flow.tsx
@@ -2,29 +2,33 @@ import * as React from 'react'
 import { Animated, Easing, View } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { stagger } from './utils'
 
 export default class Flow extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  values = createAnimatedValues(3)
+
+  value = new Animated.Value(0)
+  animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
+
+  constructor(props: SpinnerProps) {
+    super(props)
+    const { animation, values } = stagger(150, 3, {
+      duration: 1400,
+      value: this.value,
+      easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
+      keyframes: [0, 40, 80, 100],
+    })
+
+    this.animation = animation
+    this.values = values
+  }
 
   render() {
     const { size, color, style, ...rest } = this.props
 
     return (
-      <AnimationContainer
-        animation={Animated.parallel(
-          this.values.map((value, index) =>
-            anim({
-              duration: 1400,
-              value: value,
-              easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
-              keyframes: [0, 40, 80, 100],
-              delay: index * 150,
-            })
-          )
-        )}
-      >
+      <AnimationContainer animation={this.animation}>
         <View
           style={[
             {
diff --git a/src/Fold.tsx b/src/Fold.tsx
@@ -2,28 +2,31 @@ import * as React from 'react'
 import { Animated, Easing, View } from 'react-native'
 import { SpinnerProps, defaultProps } from './SpinnerProps'
 import AnimationContainer from './AnimationContainer'
-import { anim, createAnimatedValues } from './utils'
+import { stagger } from './utils'
 
 export default class Fold extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
-  values = createAnimatedValues(4)
 
+  value = new Animated.Value(0)
+  animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
+
+  constructor(props: SpinnerProps) {
+    super(props)
+    const { animation, values } = stagger(300, 4, {
+      duration: 2400,
+      value: this.value,
+      keyframes: [0, 10, 25, 75, 90, 100],
+      easing: Easing.linear,
+    })
+
+    this.animation = animation
+    this.values = values
+  }
   render() {
     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,
-            })
-          )
-        )}
-      >
+      <AnimationContainer animation={this.animation}>
         <View
           style={[
             {
diff --git a/src/Grid.tsx b/src/Grid.tsx
diff --git a/src/Swing.tsx b/src/Swing.tsx
diff --git a/src/Wave.tsx b/src/Wave.tsx
diff --git a/src/utils.ts b/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-animated-spinkit",`
`3`	`3`	`"description": "A pure JavaScript port of SpinKit for React Native.",`
`4`		`- "version": "1.2.0",`
	`4`	`+ "version": "1.3.0-beta.0",`
`5`	`5`	`"author": "Tien Pham",`
`6`	`6`	`"main": "lib/commonjs/index.js",`
`7`	`7`	`"license": "MIT",`