Interface : 5 Lottie - 17chuchu/AutomaticBicycleInterface GitHub Wiki

Lottie is an API that takes care of every animation in this project. This is one version of Lottie called react-lotttie for using with React-Web.

Table of Contents

• JSON files
• SwitchAnimation.js
  • Importing
  • About shouldCommentUpdate
  • Render

JSON files

These JSON files contain the data that are necessary to create an animation. These file are located in src/component/lottie/jsonfile.

If you are interested in these animations, you can find free animations from LottieFile

SwitchAnimation.js

This is one example of how to use Lottie.

Importing

Let's import Lottie and the selected JSON file first.

import Lottie from 'react-lottie';
import * as animationData from './jsonfile/toggle_switch.json'

About shouldCommentUpdate

After that, you need to know about react and JSON first. React will refresh and replay the animation everytime you execute setState. As a result, you need this in your code.

shouldComponentUpdate(nextProps, nextState) {
    return this.state.shouldrender   //  If this is False, this class / component will not refresh.
}

And every time you finish your animation, you need to set shouldrender to False.

Render

To render a Lottie component, out this code block in the render function.

<Lottie ref={this.animation}   // This is not important
        options={defaultOptions}   // This contain option to loop, autoplay and other.
        eventListeners={[
            {
                eventName: 'complete',
                callback: () => this.complete(),
            },
        ]}
        height={38}
        width={400}
        isStopped={this.state.isStopped}
        isPaused={this.state.isPaused}
        segments={this.state.segment}
        isClickToPauseDisabled={true}
        speed={this.state.speed}
/>