Merge pull request chenqingspring#27 from elliotcobb/master

Keep options passed with a new animation

src/index.js

@@ -34,7 +34,7 @@ export default class Lottie extends React.Component {
     if (this.options.animationData !== nextProps.options.animationData) {
       this.deRegisterEvents(this.props.eventListeners);
       this.destroy();
-      this.options.animationData = nextProps.options.animationData;
+      this.options = {...this.options, ...nextProps.options};
       this.anim = lottie.loadAnimation(this.options);
       this.registerEvents(nextProps.eventListeners);
     }

src/stories/TransitionWithOptions.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationDataA from './TwitterHeart.json';
+import * as animationDataB from './beating-heart.json';
+
+/**
+ * TransitionWithOptions: demonstrates how you can switch to a
+ * new animation with different options. For example, you can start
+ * with a looped animation and change to one that plays only once
+ * without mounting the component again
+ */
+export default class TransitionWithOptions extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showLoopedAnimation: true,
+    };
+  }
+
+  clickHandler = () => {
+    this.setState({ showLoopedAnimation: !this.state.showLoopedAnimation });
+  };
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '20px auto',
+      textAlign: 'center',
+    };
+    const { showLoopedAnimation } = this.state;
+    const animationOptionsWithLoop = {
+      animationData: animationDataA,
+      loop: true,
+    };
+    const animationOptionsWithoutLoop = {
+      animationData: animationDataB,
+      loop: false,
+    };
+
+    return (
+      <div>
+        <Lottie
+          options={showLoopedAnimation ? animationOptionsWithLoop : animationOptionsWithoutLoop}
+          height={400}
+          width={400}
+        />
+        <p style={centerStyle}>This animation is {showLoopedAnimation ? 'looped' : 'not looped'}</p>
+        <button style={centerStyle} onClick={this.clickHandler}>
+          switch
+        </button>
+      </div>
+    );
+  }
+}

src/stories/index.js

@@ -4,9 +4,11 @@ import LottieControl from './lottie-control';
 import LottieControlSegments from './lottie-control-segments';
 import ToggleLike from './toggle-like';
 import TransitionLoop from './TransitionLoop';
+import TransitionWithOptions from './TransitionWithOptions';
 
 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 />);