“Directory”

  • Principles of LottieJS animation technology
  • The characteristics of LottieJS
  • Installation and use of LottieJS animation

Principles of Lottie animation technology

Lottie animation is to export AE files to JSON files, and then use LottieJS for animation control. Currently, animation is not very interactive, so this technology is used first.

The characteristics of LottieJS

To be updated

Installation and use of LottieJS animation

  1. First of all, you need to install the AE software. Here, you have installed the CC 2017 version according to UE.

  2. Second download bodyMovin. ZXP this AE extension plug-in, for AE animation JSON file export

  3. ZXP Installer. exe can be used to install a variety of AE extensions. You can install ZXP installer.exe using aescript + aeplugins

  4. Download the Lottie. Js, making Lottie – web address or git clone https://github.com/airbnb/lottie-web.git

  5. Install bodymovin. ZXP in aescript + aeplugins ZXP Installer. exe and it will look like this

  1. Open the AEEdit > Preferences > GeneralCheck the interfaceAllows scripts to write files and access the network, click OK

  1. Click in after EffectsWindow > ExtensionYou can see the added plug-in in

  1. The next step is to prepare the animation, an AEP file plus the material file, after opening in theWindow > ExtensionIn the Bodymovin window, you can see the window below

Ps: I have encountered the export stuck situation before. Considering that it may be the reason that the plug-in and AE version do not match, if you have this reason, then you should go to a bodymovin. ZXP reinstall again, which should solve the problem.

  1. You can see that the exported file hasdata.jsonThe images in the images file all have stroke. However, our animation does not need stroke under normal circumstances, so we need to export the images separately for manual replacement of the same name.

  1. Json is a reference to data. Json cannot be used locally, so you must open it with an HTTP service. Otherwise, this error will be reported

  1. The following is the code, the following code to write the animation can play

    <! The first step is to reference lottieJS-->
<script src="./lottie.js"></script>
<! Set up the container for the second step animation -->
<div id="animation"></div>
<! Step 3 Create an animated object
<script>
  var b = lottie.loadAnimation({
        container: document.getElementById('animation'), // the dom element that will contain the animation
        renderer: 'svg'.// What format is rendered
        loop: true.// Loop
        autoplay: true.// Auto play
        path: 'data.json' // the path to the animation json
    });
</script>

Copy the code

Version1.0 — 2018.5.24 — Create Lottie animation installation and use

© burning_ rhyme groups