feat: Allow customizing animation at runtime

package.json

@@ -50,7 +50,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "lottie-web": "^5.2.0"
+    "lottie-web": "^5.2.0",
+    "lottie-api": "https://github.com/bodymovin/lottie-api"
   },
   "main": "dist/index.js",
   "engines": {

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import lottie from 'lottie-web';
+import lottieApi from 'lottie-api/dist/lottie_api';
 
 export default class Lottie extends React.Component {
   componentDidMount() {
@@ -10,26 +11,29 @@ export default class Lottie extends React.Component {
     } = this.props;
 
     const {
-      loop,
-      autoplay,
+      loop = false,
+      autoplay = false,
       animationData,
       rendererSettings,
-      segments,
+      animationControl = false,
+      segments = false,
     } = options;
 
     this.options = {
       container: this.el,
       renderer: 'svg',
-      loop: loop !== false,
-      autoplay: autoplay !== false,
-      segments: segments !== false,
+      loop,
+      autoplay,
+      segments,
       animationData,
       rendererSettings,
+      animationControl,
     };
 
     this.options = { ...this.options, ...options };
 
     this.anim = lottie.loadAnimation(this.options);
+    this.animApi = lottieApi.createAnimationApi(this.anim);
     this.registerEvents(eventListeners);
   }
 
@@ -40,6 +44,7 @@ export default class Lottie extends React.Component {
       this.destroy();
       this.options = { ...this.options, ...nextProps.options };
       this.anim = lottie.loadAnimation(this.options);
+      this.animApi = lottieApi.createAnimationApi(this.anim);
       this.registerEvents(nextProps.eventListeners);
     }
   }
@@ -56,6 +61,7 @@ export default class Lottie extends React.Component {
 
     this.pause();
     this.setSpeed();
+    this.setAnimationControl();
     this.setDirection();
   }
 
@@ -64,6 +70,7 @@ export default class Lottie extends React.Component {
     this.destroy();
     this.options.animationData = null;
     this.anim = null;
+    this.animApi = null;
   }
 
   setSpeed() {
@@ -74,6 +81,19 @@ export default class Lottie extends React.Component {
     this.anim.setDirection(this.props.direction);
   }
 
+  setAnimationControl() {
+    const { animationControl } = this.options;
+    if (animationControl) {
+      const targetProperties = Object.keys(animationControl);
+
+      targetProperties.forEach((property) => {
+        const propertyPath = this.animationAPI.getKeyPath(property);
+        const value = animationControl[property];
+        this.animationAPI.addValueCallback(propertyPath, () => value);
+      });
+    }
+  }
+
   play() {
     this.anim.play();
   }