feat: add options goToAndPlay and goToAndStop

Author: Grzegorz Sajnog

src/index.js

@@ -15,6 +15,8 @@ export default class Lottie extends React.Component {
       animationData,
       rendererSettings,
       segments,
+      goToAndPlay,
+      goToAndStop,
     } = options;
 
     this.options = {
@@ -23,6 +25,8 @@ export default class Lottie extends React.Component {
       loop: loop !== false,
       autoplay: autoplay !== false,
       segments: segments !== false,
+      goToAndPlay,
+      goToAndStop,
       animationData,
       rendererSettings,
     };
@@ -38,13 +42,13 @@ export default class Lottie extends React.Component {
     if (this.options.animationData !== nextProps.options.animationData) {
       this.deRegisterEvents(this.props.eventListeners);
       this.destroy();
-      this.options = {...this.options, ...nextProps.options};
+      this.options = { ...this.options, ...nextProps.options };
       this.anim = lottie.loadAnimation(this.options);
       this.registerEvents(nextProps.eventListeners);
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (this.props.isStopped) {
       this.stop();
     } else if (this.props.segments) {
@@ -53,6 +57,14 @@ export default class Lottie extends React.Component {
       this.play();
     }
 
+    if (JSON.stringify(this.props.goToAndPlay) !== JSON.stringify(prevProps.goToAndPlay)) {
+      this.goToAndPlay();
+    }
+
+    if (JSON.stringify(this.props.goToAndStop) !== JSON.stringify(prevProps.goToAndStop)) {
+      this.goToAndStop();
+    }
+
     this.pause();
     this.setSpeed();
     this.setDirection();
@@ -93,6 +105,16 @@ export default class Lottie extends React.Component {
     }
   }
 
+  goToAndPlay() {
+    const { value, isFrame } = this.props.goToAndPlay;
+    this.anim.goToAndPlay(value, isFrame);
+  }
+
+  goToAndStop() {
+    const { value, isFrame } = this.props.goToAndStop;
+    this.anim.goToAndStop(value, isFrame);
+  }
+
   destroy() {
     this.anim.destroy();
   }
@@ -177,6 +199,14 @@ Lottie.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isStopped: PropTypes.bool,
   isPaused: PropTypes.bool,
+  goToAndPlay: PropTypes.shape({
+    value: PropTypes.number,
+    isFrame: PropTypes.bool,
+  }),
+  goToAndStop: PropTypes.shape({
+    value: PropTypes.number,
+    isFrame: PropTypes.bool,
+  }),
   speed: PropTypes.number,
   segments: PropTypes.arrayOf(PropTypes.number),
   direction: PropTypes.number,
@@ -191,6 +221,14 @@ Lottie.defaultProps = {
   eventListeners: [],
   isStopped: false,
   isPaused: false,
+  goToAndPlay: {
+    value: null,
+    isFrame: false,
+  },
+  goToAndStop: {
+    value: null,
+    isFrame: false,
+  },
   speed: 1,
   ariaRole: 'button',
   ariaLabel: 'animation',

src/stories/index.js

@@ -5,10 +5,14 @@ import LottieControlSegments from './lottie-control-segments';
 import ToggleLike from './toggle-like';
 import TransitionLoop from './TransitionLoop';
 import TransitionWithOptions from './TransitionWithOptions';
+import LottieGoToAndStop from './lottie-goToAndStop';
+import LottieGoToAndPlay from './lottie-goToAndPlay';
 
 storiesOf('Lottie Animation View', module)
   .add('with control', () => <LottieControl />)
   .add('toggle like', () => <ToggleLike />)
   .add('transitions & loops', () => <TransitionLoop />)
   .add('transitions with options', () => <TransitionWithOptions />)
-  .add('with segments', () => <LottieControlSegments />);
+  .add('with segments', () => <LottieControlSegments />)
+  .add('with goToAndStop', () => <LottieGoToAndStop />)
+  .add('with goToAndPlay', () => <LottieGoToAndPlay />);

src/stories/lottie-goToAndPlay.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationData from './TwitterHeart.json';
+
+export default class LottieGoToAndPlay extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isStopped: true,
+      value: 0,
+      isFrame: false,
+      loop: false,
+    };
+  }
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { isStopped, value, isFrame, loop } = this.state;
+    const defaultOptions = { animationData, loop };
+
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        goToAndPlay={{
+          value,
+          isFrame,
+        }}
+      />
+
+      <p style={centerStyle}>Go to and play: [value: {value}, isFrame: {isFrame ? 1 : 0}]</p>
+      <div style={centerStyle}>
+        <input
+          type="text" value={value}
+          onChange={e => this.setState({ value: parseInt(e.currentTarget.value, 10) || 0 })}
+        />
+
+        <label htmlFor="isFrame">
+          <input
+            id="isFrame"
+            name="isFrame"
+            type="checkbox"
+            checked={isFrame}
+            onChange={e => this.setState({ isFrame: e.currentTarget.checked })}
+
+          />
+          Is frame
+        </label>
+      </div>
+    </div>);
+  }
+}

src/stories/lottie-goToAndStop.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationData from './TwitterHeart.json';
+
+export default class LottieGoToAndStop extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isStopped: false,
+      value: 0,
+      isFrame: false,
+      loop: true,
+    };
+  }
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { isStopped, value, isFrame, loop } = this.state;
+    const defaultOptions = { animationData, loop };
+
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        goToAndStop={{
+          value,
+          isFrame,
+        }}
+      />
+
+      <p style={centerStyle}>Go to and stop: [value: {value}, isFrame: {isFrame ? 1 : 0}]</p>
+      <div style={centerStyle}>
+        <input
+          type="text" value={value}
+          onChange={e => this.setState({ value: parseInt(e.currentTarget.value, 10) || 0 })}
+        />
+
+        <label htmlFor="isFrame">
+          <input
+            id="isFrame"
+            name="isFrame"
+            type="checkbox"
+            checked={isFrame}
+            onChange={e => this.setState({ isFrame: e.currentTarget.checked })}
+
+          />
+          Is frame
+        </label>
+      </div>
+    </div>);
+  }
+}