Clean up extra animated line points after animation executed

rnmapbox · Mar 3, 2020 · 8be0b97 · 8be0b97
1 parent 7aef798
commit 8be0b97
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 31 deletions.
diff --git a/example/src/examples/AnimatedLine.js b/example/src/examples/AnimatedLine.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import {StyleSheet, Easing, Button} from 'react-native';
+import MapboxGL from '@react-native-mapbox-gl/maps';
+
+import sheet from '../styles/sheet';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+import Bubble from './common/Bubble';
+
+const lon = -73.99255;
+const lat = 40.73581;
+const delta = 0.001;
+
+class AnimatedLine extends React.Component {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      backgroundColor: 'blue',
+      coordinates: [[-73.99155, 40.73581]],
+
+      shape: new MapboxGL.AnimatedLineString({
+        coordinates: [[lon + delta, lat], [lon, lat], [lon, lat + delta]], //  [[lon, lat], [lon + delta, lat + delta]], ///
+      }),
+    };
+  }
+
+  startAnimate2() {
+    setTimeout(() => {
+      this.state.shape
+        .timing({
+          coordinates: [[lon, lat], [lon, lat + delta]],
+          duration: 1000,
+          easing: Easing.linear,
+        })
+        .start();
+    }, 2000);
+    setTimeout(() => {
+      this.state.shape
+        .timing({
+          coordinates: [
+            [lon + delta, lat + delta],
+            [lon + delta, lat + delta + delta],
+          ],
+          duration: 1000,
+          easing: Easing.linear,
+        })
+        .start();
+    }, 4000);
+  }
+
+  startAnimate3() {
+    const time = 3000;
+
+    setTimeout(() => {
+      this.state.shape
+        .timing({
+          coordinates: [[lon + delta, lat], [lon, lat], [lon, lat + delta]],
+          duration: time,
+          easing: Easing.linear,
+        })
+        .start();
+    }, 2000);
+
+    setTimeout(() => {
+      this.state.shape
+        .timing({
+          coordinates: [
+            [lon + delta, lat],
+            [lon, lat],
+            [lon + delta, lat + delta],
+          ],
+          duration: time,
+          easing: Easing.linear,
+        })
+        .start();
+    }, 4000);
+
+    setTimeout(() => {
+      this.state.shape
+        .timing({
+          coordinates: [[lon, lat], [lon, lat + delta]],
+          duration: time,
+          easing: Easing.linear,
+        })
+        .start();
+    }, 6000);
+  }
+
+  render() {
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView
+          ref={c => (this._map = c)}
+          onPress={this.onPress}
+          onDidFinishLoadingMap={this.onDidFinishLoadingMap}
+          style={sheet.matchParent}>
+          <MapboxGL.Camera
+            zoomLevel={16}
+            centerCoordinate={this.state.coordinates[0]}
+          />
+
+          <MapboxGL.Animated.ShapeSource id={'shape'} shape={this.state.shape}>
+            <MapboxGL.Animated.LineLayer
+              id={'line'}
+              style={{
+                lineCap: MapboxGL.LineJoin.Round,
+                lineWidth: 6,
+                lineOpacity: 0.84,
+                lineColor: '#314ccd',
+              }}
+            />
+          </MapboxGL.Animated.ShapeSource>
+        </MapboxGL.MapView>
+
+        <Bubble>
+          <Button title="Animate 2" onPress={() => this.startAnimate2()} />
+          <Button title="Animate 3" onPress={() => this.startAnimate3()} />
+        </Bubble>
+      </Page>
+    );
+  }
+}
+
+export default AnimatedLine;
diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js
@@ -28,6 +28,7 @@ import QueryWithRect from '../examples/QueryWithRect';
 import ShapeSourceIcon from '../examples/ShapeSourceIcon';
 import CustomVectorSource from '../examples/CustomVectorSource';
 import ShowPointAnnotation from '../examples/ShowPointAnnotation';
+import AnimatedLine from '../examples/AnimatedLine';
 import CreateOfflineRegion from '../examples/CreateOfflineRegion';
 import DriveTheLine from '../examples/DriveTheLine';
 import ImageOverlay from '../examples/ImageOverlay';
@@ -107,6 +108,7 @@ const Examples = [
   new ExampleItem('Shape Source From Icon', ShapeSourceIcon),
   new ExampleItem('Custom Vector Source', CustomVectorSource),
   new ExampleItem('Show Point Annotation', ShowPointAnnotation),
+  new ExampleItem('Animated Line', AnimatedLine),
   new ExampleItem('Marker View', MarkerView),
   new ExampleItem('Create Offline Region', CreateOfflineRegion),
   new ExampleItem('Animation Along a Line', DriveTheLine),

diff --git a/javascript/utils/animated/AnimatedLineString.js b/javascript/utils/animated/AnimatedLineString.js
@@ -1,39 +1,43 @@
-import { Animated } from 'react-native';
+import {Animated} from 'react-native';
+
+import AnimatedCoordinates from './AnimatedCoordinates';
 
 // Used react-native-maps as a reference
 // https://github.com/react-community/react-native-maps/blob/master/lib/components/AnimatedRegion.js
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
-
-import AnimatedCoordinates from './AnimatedCoordinates';
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+    console.error(
+      'AnimatedRegion could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
 
 const DEFAULT_COORD = [0, 0];
 
 const DEFAULT_LINE = {
   type: 'LineString',
-  coordinates: [DEFAULT_COORD, DEFAULT_COORD]
+  coordinates: [DEFAULT_COORD, DEFAULT_COORD],
 };
 
 export class AnimatedLineString extends AnimatedWithChildren {
   constructor(line = DEFAULT_LINE) {
     super();
 
-    //this._listeners = {};
-
-    this.coordinates = [];
-
-    line.coordinates.forEach((coord) => {
-      this.coordinates.push(new AnimatedCoordinates(coord));
-    });
+    this.coordinates = line.coordinates.map(
+      coord => new AnimatedCoordinates(coord),
+    );
   }
 
   flattenOffset() {
-    this.coordinates.forEach((coord) => {
+    this.coordinates.forEach(coord => {
       coord.flattenOffset();
     });
   }
 
   stopAnimation(cb) {
-    this.coordinates.forEach((coord) => {
+    this.coordinates.forEach(coord => {
       coord.stopAnimation();
     });
 
@@ -43,19 +47,19 @@ export class AnimatedLineString extends AnimatedWithChildren {
   }
 
   resetAnimation() {
-    this.coordinates.forEach((coord) => {
+    this.coordinates.forEach(coord => {
       coord.resetAnimation();
-    })
+    });
   }
 
   addListener(cb) {
-    this.coordinates.forEach((coord) => {
+    this.coordinates.forEach(coord => {
       coord.addListener(cb);
     });
   }
 
   removeListener(id) {
-    this.coordinates.forEach((coord) => {
+    this.coordinates.forEach(coord => {
       coord.removeListener(id);
     });
   }
@@ -77,23 +81,40 @@ export class AnimatedLineString extends AnimatedWithChildren {
 
   _cleanup(coordinates) {
     while (this.coordinates.length > coordinates.length) {
-      const popped = this.coordinates.pop();
+      this.coordinates.pop();
     }
     super.__callListeners(this.__getValue());
   }
 
-  animate(type, config) {
-    const { coordinates, ...rest } = config;
+  _onAnimationDone(animation, doneCB) {
+    return new Proxy(animation, {
+      get(obj, prop) {
+        if (prop === 'start') {
+          return function start(origDoneCB, ...args) {
+            return obj.start((startParams, ...startArgs) => {
+              doneCB(startParams);
+              if (origDoneCB) {
+                origDoneCB(startParams, ...startArgs);
+              }
+            }, ...args);
+          };
+        }
+        return obj[prop];
+      },
+    });
+  }
 
+  animate(type, config) {
+    const {coordinates, ...rest} = config;
     const last = this._last(coordinates);
 
     this._setup(coordinates);
 
     // Animate existing values
-    let animations = coordinates.map((coord, i) => {
+    const animations = coordinates.map((coord, i) => {
       return this.coordinates[i][type]({
         ...config,
-        coordinates: coordinates[i]
+        coordinates: coordinates[i],
       });
     });
 
@@ -103,13 +124,20 @@ export class AnimatedLineString extends AnimatedWithChildren {
       animations.push(
         this.coordinates[i][type]({
           ...config,
-          coordinates: last
-        })
+          coordinates: last,
+        }),
       );
       i++;
     }
 
-    return Animated.parallel(animations);
+    return this._onAnimationDone(
+      Animated.parallel(animations),
+      ({finished}) => {
+        if (finished) {
+          this._cleanup(coordinates);
+        }
+      },
+    );
   }
 
   runImmediate(type, coordinates) {
@@ -130,31 +158,31 @@ export class AnimatedLineString extends AnimatedWithChildren {
     this.runImmediate('setOffset', line.coordinates);
   }
 
-  spring(config = { coordinates: DEFAULT_COORD }) {
+  spring(config = {coordinates: DEFAULT_COORD}) {
     return this.animate('spring', config);
   }
 
-  timing(config = { coordinates: DEFAULT_COORD }) {
+  timing(config = {coordinates: DEFAULT_COORD}) {
     return this.animate('timing', config);
   }
 
-  decay(config = { coordinates: DEFAULT_COORD }) {
+  decay(config = {coordinates: DEFAULT_COORD}) {
     return this.animate('decay', config);
   }
 
   __getValue() {
     return {
       type: 'LineString',
-      coordinates: this.coordinates.map((coord) => coord.__getValue())
+      coordinates: this.coordinates.map(coord => coord.__getValue()),
     };
   }
 
   __attach() {
-    this.coordinates.forEach((coord) => coord.__attach(this));
+    this.coordinates.forEach(coord => coord.__attach(this));
   }
 
   __detach() {
-    this.coordinates.forEach((coord) => coord.__detach(this));
+    this.coordinates.forEach(coord => coord.__detach(this));
   }
 }