Suck the cat with code! This paper is participating in[Cat Essay Campaign].

I think people who like kittens must be very cute and gentle

preface

Saturday, I had nothing to do, and then I thought there was a “code draw cat” event, and I put it off for 20 days, so I wanted to write on Saturday.

Looking back at the rules, it really embarrassed me as a Java developer who was down and out. At first glance, it was all Python (manual dog head).

Then I had to take out the front-end technology I just learned this month, open vscode, and find that I can’t draw 🐱. Now OPEN my Google, search baidu, search Bing, search Google. Found that have been bad to play the pull, Live2D is more by big guys to play a variety of patterns. Left look, right look, very difficult ah, is ready to give up, BRUSH B station of me, I suddenly saw a good idea.

The kitten thief in this video is cute, and the progress bar below is a kitten walking around.

Then I thought I could do something with the progress bar, and at first I thought I’d look it up, but there’s no such thing as highly customizable. alas

experience

Of course, the Internet is extremely powerful, after many hardships, or find similar, I fell in love with that at first sight.

Photo from: Silver Pig who can program

I wondered how I could replace the puppy with a kitten. Follow the steps to find today’s protagonist: Lottie – Web open source animation library

Enter the body…. But the final failure to pull (learning art is not fine, digging friends do not scold me ha, [manual dog head]🐈 registration)

Lottie animation library

The official documentation

It was also found by chance.

Introduction:

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON using Bodymovin and renders them natively on mobile devices and the Web!

GIF of the official logo

The animation above was created in After Effects and can be rendered locally on all platforms through a simple JSON file.

(It costs slightly more than a normal animation library, 🐕)

A simple case

Here are some official examples of kittens:

Example 1:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      html {
        margin: 0;
        padding: 0;
        background-color: black;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div
      id="svgContainer"
      style=" width: 400px; height: 400px; background-color: #000; display: inline-block; "
    ></div>
  </body>
</html>
<script src="https://labs.nearpod.com/bodymovin/build/player/bodymovin.js"></script>
<script src="https://labs.nearpod.com/bodymovin/demo/gatin/anim/data.js"></script>
<script>
  var svgContainer = document.getElementById("svgContainer");
  bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: "svg".loop: true.animationData: JSON.parse(animationData),
  });
</script>
Copy the code

Online code: Codepen

Effect:

Example 2:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    html{
  margin: 0;
  padding: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body{
  width: 100%;
  height: 100%;
}
  </style>
</head>
<body>
  <div id="svgContainer" style="width:100%; height:100%; background-color:#000; display:inline-block"></div>
</body>
</html>
<script src="https://labs.nearpod.com/bodymovin/demo/catrim/bodymovin.js"></script>
<script src="https://labs.nearpod.com/bodymovin/demo/catrim/data.js"></script>
<script>
  var svgContainer = document.getElementById('svgContainer');
bodymovin.loadAnimation({
  wrapper: svgContainer,
  animType: 'svg'.loop: true.// animationData here is the variable defined in the imported data.js
  animationData: JSON.parse(animationData)
});
</script>
Copy the code

Online example: Codepen

Effect:

Basic usage

There’s a basic tutorial, but it’s on YouTube, and if you can animate it a little bit, it’s great.

Video tutorial

An introduction to

Bodymovin can render Lottie JSON files on the network.

First, get the BodyMovin player javascript library. It’s statically hosted at cdnjs.com/libraries/b… The Player ‘bodymovin plugin gets javascript directly.

<script src="js/bodymovin.js" type="text/javascript"></script>
<! -- OR -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
Copy the code

Bodymovin is also available on NPM and Bower.

Then play the animation and it’s as simple as this:

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json'.// Required
  renderer: 'svg/canvas/html'.// Required
  loop: true.// Optional
  autoplay: true.// Optional
  name: "Hello World".// Name for future reference. Optional.
})
Copy the code

You can call lottie.loadAnimation() to start the animation. It takes an object as a unique argument:

  • AnimationData: an object with exported animationData. ** Note: If your animation contains a forwarder and you plan to use the same animation to call loadAnimation multiple times, do a deep clone before passing the object
  • Path: The relative path of the animation object. (animationData and PATH are mutually exclusive)
  • Loop: true/false/number
  • Autoplay: true/false It will start playing as soon as it is ready
  • Name: Animation name for future reference
  • Renderer: ‘SVG’/’canvas’/’ HTML ‘sets the renderer
  • Container: The DOM element on which the animation is rendered

It returns instances of animations that you can control by playing, pausing, setting speed, and so on.

Getting started is that easy, but the hardest part is how to get the JS and JSON file, which is called Lottie JSON file in its tutorial.

It seems that it can only be exported through AE. Other ways have not been found for the moment. XDM, I can only introduce pull here.

After the language

It feels like this animation library is really powerful, and for the first time designers can create and publish beautiful animations without engineers laboriously recreating them manually.

It’s a really easy feeling at this point.

I confess that most of what I’ve done since I’ve been in the “Code Cat” essay group is not thinking about what to write, but collecting memes. The digger cats in the group are really cute.

I also want to share the two cute cat videos I saw this morning. I love them

1. “Kittens can’t fight.”

2. “How polite he is!”