Refactor Circle & Pie to use animated values directly for better perf

oblador · oblador · commit 671ec1efe565 · 2016-12-04T18:59:02.000+01:00
diff --git a/Circle.js b/Circle.js
@@ -4,25 +4,47 @@ import React, {
 } from 'react';
 
 import {
+  Animated,
   ART,
+  StyleSheet,
   Text,
   View,
 } from 'react-native';
 
 import Arc from './Shapes/Arc';
+import withAnimation from './withAnimation';
 
-export default class ProgressCircle extends Component {
+const CIRCLE = Math.PI * 2;
+
+const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface);
+const AnimatedArc = Animated.createAnimatedComponent(Arc);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    overflow: 'hidden',
+  },
+});
+
+export class ProgressCircle extends Component {
   static propTypes = {
+    animated: PropTypes.bool,
     borderColor: PropTypes.string,
     borderWidth: PropTypes.number,
     color: PropTypes.string,
+    children: React.PropTypes.node,
     direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
     formatText: PropTypes.func,
     indeterminate: PropTypes.bool,
-    progress: PropTypes.number,
+    progress: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.instanceOf(Animated.Value),
+    ]),
+    rotation: PropTypes.instanceOf(Animated.Value),
     showsText: PropTypes.bool,
     size: PropTypes.number,
-    textStyle: PropTypes.any,
+    style: View.propTypes.style,
+    textStyle: Text.propTypes.style,
     thickness: PropTypes.number,
     unfilledColor: PropTypes.string,
   };
@@ -31,15 +53,33 @@ export default class ProgressCircle extends Component {
     borderWidth: 1,
     color: 'rgba(0, 122, 255, 1)',
     direction: 'clockwise',
-    formatText: progress => Math.round(progress * 100) + '%',
+    formatText: progress => `${Math.round(progress * 100)}%`,
     progress: 0,
     showsText: false,
     size: 40,
     thickness: 3,
   };
 
+  constructor(props, context) {
+    super(props, context);
+
+    this.progressValue = 0;
+  }
+
+  componentWillMount() {
+    if (this.props.animated) {
+      this.props.progress.addListener((event) => {
+        this.progressValue = event.value;
+        if (this.props.showsText || this.progressValue === 1) {
+          this.forceUpdate();
+        }
+      });
+    }
+  }
+
   render() {
-    let {
+    const {
+      animated,
       borderColor,
       borderWidth,
       color,
@@ -48,73 +88,107 @@ export default class ProgressCircle extends Component {
       formatText,
       indeterminate,
       progress,
+      rotation,
       showsText,
       size,
+      style,
       textStyle,
       thickness,
       unfilledColor,
-      ...restProps,
+      ...restProps
     } = this.props;
 
-    borderWidth = borderWidth || (indeterminate ? 1 : 0);
+    const border = borderWidth || (indeterminate ? 1 : 0);
 
-    const radius = size / 2 - borderWidth;
+    const radius = (size / 2) - border;
     const offset = {
-      top: borderWidth,
-      left: borderWidth,
+      top: border,
+      left: border,
     };
-    const textOffset = borderWidth + thickness;
-    const textSize = size - textOffset * 2;
+    const textOffset = border + thickness;
+    const textSize = size - (textOffset * 2);
+
+    const Surface = rotation ? AnimatedSurface : ART.Surface;
+    const Shape = animated ? AnimatedArc : Arc;
+    const progressValue = animated ? this.progressValue : progress;
+    const angle = animated ? Animated.multiply(progress, CIRCLE) : progress * CIRCLE;
 
     return (
-      <View {...restProps}>
-        <ART.Surface
+      <View style={[styles.container, style]} {...restProps}>
+        <Surface
           width={size}
-          height={size}>
-          {unfilledColor && progress !== 1 ? (<Arc
-            radius={radius}
-            offset={offset}
-            startAngle={progress * 2 * Math.PI}
-            endAngle={2 * Math.PI}
-            direction={direction}
-            stroke={unfilledColor}
-            strokeWidth={thickness} />) : false}
-          {!indeterminate && progress ? (<Arc
-            radius={radius}
-            offset={offset}
-            startAngle={0}
-            endAngle={progress * 2 * Math.PI}
-            direction={direction}
-            stroke={color}
-            strokeWidth={thickness} />) : false}
-          {borderWidth ?
-            (<Arc
+          height={size}
+          style={{
+            transform: [{
+              rotate: indeterminate && rotation
+                ? rotation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0deg', '360deg'],
+                })
+                : '0deg',
+            }],
+          }}
+        >
+          {unfilledColor && progressValue !== 1 ? (
+            <Shape
+              radius={radius}
+              offset={offset}
+              startAngle={angle}
+              endAngle={CIRCLE}
+              direction={direction}
+              stroke={unfilledColor}
+              strokeWidth={thickness}
+            />
+          ) : false}
+          {!indeterminate ? (
+            <Shape
+              radius={radius}
+              offset={offset}
+              startAngle={0}
+              endAngle={angle}
+              direction={direction}
+              stroke={color}
+              strokeWidth={thickness}
+            />
+          ) : false}
+          {border ? (
+            <Arc
               radius={size / 2}
               startAngle={0}
               endAngle={(indeterminate ? 1.8 : 2) * Math.PI}
               stroke={borderColor || color}
-              strokeWidth={borderWidth} />) : false}
-        </ART.Surface>
-        {!indeterminate && progress && showsText ? (
-          <View style={{
-            position: 'absolute',
-            left: textOffset,
-            top: textOffset,
-            width: textSize,
-            height: textSize,
-            borderRadius: textSize / 2,
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}>
-            <Text style={[{
-              color: color,
-              fontSize: textSize / 4.5,
-              fontWeight: '300',
-            }, textStyle]}>{formatText(progress)}</Text>
+              strokeWidth={border}
+            />
+          ) : false}
+        </Surface>
+        {!indeterminate && showsText ? (
+          <View
+            style={{
+              position: 'absolute',
+              left: textOffset,
+              top: textOffset,
+              width: textSize,
+              height: textSize,
+              borderRadius: textSize / 2,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Text
+              style={[{
+                color,
+                fontSize: textSize / 4.5,
+                fontWeight: '300',
+              }, textStyle]}
+            >
+              {formatText(progressValue)}
+            </Text>
           </View>
         ) : false}
         {children}
       </View>
     );
   }
 }
+
+export default withAnimation(ProgressCircle);
diff --git a/Pie.js b/Pie.js
@@ -4,20 +4,42 @@ import React, {
 } from 'react';
 
 import {
+  Animated,
   ART,
+  StyleSheet,
   View,
 } from 'react-native';
 
 import Circle from './Shapes/Circle';
 import Sector from './Shapes/Sector';
+import withAnimation from './withAnimation';
 
-export default class ProgressPie extends Component {
+const CIRCLE = Math.PI * 2;
+
+const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface);
+const AnimatedSector = Animated.createAnimatedComponent(Sector);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    overflow: 'hidden',
+  },
+});
+
+export class ProgressPie extends Component {
   static propTypes = {
+    animated: PropTypes.bool,
     borderColor: PropTypes.string,
     borderWidth: PropTypes.number,
     color: PropTypes.string,
-    progress: PropTypes.number,
+    children: PropTypes.node,
+    progress: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.instanceOf(Animated.Value),
+    ]),
+    rotation: PropTypes.instanceOf(Animated.Value),
     size: PropTypes.number,
+    style: View.propTypes.style,
     unfilledColor: PropTypes.string,
   };
 
@@ -30,46 +52,69 @@ export default class ProgressPie extends Component {
 
   render() {
     const {
-      progress,
-      size,
+      animated,
+      borderColor,
       borderWidth,
+      children,
       color,
-      borderColor,
+      progress,
+      rotation,
+      size,
+      style,
       unfilledColor,
-      indeterminate,
-      children,
-      ...restProps,
+      ...restProps
     } = this.props;
 
-    const angle = progress * Math.PI * 2;
-    const radius = size / 2 - borderWidth;
+
+    const Surface = rotation ? AnimatedSurface : ART.Surface;
+    const Shape = animated ? AnimatedSector : Sector;
+
+    const angle = animated ? Animated.multiply(progress, CIRCLE) : progress * CIRCLE;
+    const radius = (size / 2) - borderWidth;
     const offset = {
       top: borderWidth,
       left: borderWidth,
     };
 
     return (
-      <View {...restProps}>
-        <ART.Surface
+      <View style={[styles.container, style]} {...restProps}>
+        <Surface
           width={size}
-          height={size}>
-          {unfilledColor ? (<Circle
-            radius={radius}
-            offset={offset}
-            fill={unfilledColor} />) : false}
-          {angle ? (<Sector
+          height={size}
+          style={rotation ? {
+            transform: [{
+              rotate: rotation.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '360deg'],
+              }),
+            }],
+          } : undefined}
+        >
+          {unfilledColor ? (
+            <Circle
+              radius={radius}
+              offset={offset}
+              fill={unfilledColor}
+            />
+          ) : false}
+          <Shape
             radius={radius}
             angle={angle}
             offset={offset}
-            fill={color} />) : false}
-          {borderWidth ?
-            (<Circle
+            fill={color}
+          />
+          {borderWidth ? (
+            <Circle
               radius={size / 2}
               stroke={borderColor || color}
-              strokeWidth={borderWidth} />) : false}
-        </ART.Surface>
+              strokeWidth={borderWidth}
+            />
+          ) : false}
+        </Surface>
         {children}
       </View>
     );
   }
 }
+
+export default withAnimation(ProgressPie, 0.2);
diff --git a/index.js b/index.js
@@ -1,8 +1,4 @@
-import ProgressCircle from './Circle';
-import ProgressPie from './Pie';
-import makeAnimatable from './makeAnimatable';
-
 export { default as Bar } from './Bar';
-export const Circle = makeAnimatable(ProgressCircle);
+export { default as Circle } from './Circle';
 export { default as CircleSnail } from './CircleSnail';
-export const Pie = makeAnimatable(ProgressPie, 0.2);
+export { default as Pie } from './Pie';
diff --git a/withAnimation.js b/withAnimation.js
