Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

I came across this component when I was working on a project. When the UI gave the prototype, it was emphasized that this is a moving animation, not a static image.

UI gives the graph ↑

At that time, the first reaction was that the animation using CSS directly seemed not easy to handle. At that time, I also had thick skin and said to UI, why don’t you make a dynamic effect, I will see, and then implement

But then UI did come out, and my first reaction was, oh my God, UI 🐂 🍺!

The second reaction was, what am I going to do?

Realization process thinking

Now that the UI is out there, so that means that this thing, well, it’s theoretically possible to do with front-end code, so let’s do it

Stripping cocoon reel off raw silk from cocoons

  1. At first, when I saw this animation, I didn’t know what to do with it, but the UI just gave me a folder and said, let me use it, okayNginx is deployed locallyIn a second, you can see the effect.

The contents of the folder are as follows:

  1. At first glance, this thing,She didn't write it by hand by any means, did sheUI should use hersThe software draws an animationCome out and thenExport to codeFor our front end engineers

“Images” is an entry file, “jc. HTML” is an entry file, “scripts” is a “JS” file, and “data.json” is a long string of JSON objects that are not easy to start.

Wait!!!!! Script bodymovin.js how to look should be generated out of the fixed file name, this file name, online must be able to search to

ultimately

  1. I searched bodymovin.js on the Internet, but I didn’t get the result I wanted, but IT made me know that the js function is probably to realize animation, and data.json is the data supporting animation, and images are the materials to be used for animation

  2. I developed it using Vue, so I went online and searched vue bodymovin.js, and sure enough, I found what I was looking for in no time

Vue – Lottie

For the installation of vue-Lottie, see my vUE Start Quick Build VUE project introducing third-party plug-ins

Why Lottie

All the time, our design students use design software to design animation effects, and develop students to achieve dynamic effects through code. For complex animations, development students will take a long time to achieve, and may not achieve the initial effect of the design students. Another way to animate is through giFs. However, Android doesn’t support GIFs, and giFs can take up too much space on mobile.

So, what did Lottie do for us? First, the design student designed the animation on Adobe After Effects. The bodyMovin plugin allows you to export the animation to a JSON file. Developers can then use Lottie to render the previously generated JSON file as an animation. This allows for efficient implementation of many complex animation effects.

Go straight to code

comLottie.vue

<template>
  <div>
    <lottie
      :options="defaultOptions"
      :height="170"
      :width="170"
      v-on:animCreated="handleAnimation"
    />
  </div>
</template>

<script>
/ / incoming data. The json
import * as animationData from "@/assets/lottie/effect/data.json";
animationData.assets.forEach((item) = > {
  item.u = "";
  if (item.w && item.h) {
    item.p = require(`@/assets/lottie/effect/images/${item.p}`); }});// Get static resources
export default {
  name: "robotLottie".props: [].data() {
    return {
      defaultOptions: {
        // Animation data: note.default
        animationData: animationData.default,
      },
    };
  },
  computed: {},
  methods: {
    handleAnimation(anim) {
      this.anim = anim; }},mounted(){}};</script>

<style lang="scss" scoped></style>
Copy the code

And that’s it? Yeah, that’s good, and then we’ll quote

<template>
  <div class="hello">
    <module style="display: inline-block" />
  </div>
</template>

<script>
import module from "./comLottie.vue";

export default {
  name: "HelloWorld".props: {
    msg: String,},components: {
    module,},data() {
    return {
      echartObj: {}}; },methods: {},
  mounted(){}};</script><! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  background-color: # 182634;
}
</style>
Copy the code

Since there are not many references to this animation material, there are only two in the project, so I created a new component for another animation material to display. Make a copy of comLottie. Vue and rename it comLottie2.vue

Change the address of the animation resource in the code

Let me introduce it again

<template>
  <div class="hello">
    <module style="display: inline-block" />
    <module2 style="display: inline-block" />
  </div>
</template>

<script>
import module from "./comLottie.vue";
import module2 from "./comLottie2.vue";

export default {
  name: "HelloWorld".props: {
    msg: String,},components: {
    module,
    module2,
  },
  data() {
    return {
      echartObj: {}}; },methods: {},
  mounted(){}};</script><! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  background-color: # 182634;
}
</style>
Copy the code

And here it is!

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me