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

lottie

Introduction to the

Lottie works on Android, iOS, iOS, Web, React Native, [React Native](github.com/airbnb/lott… And Windows

Lottie is an open source library for Android, iOS, Web and Windows that parses Adobe After Effects animations into JSON with Bodymovin and renders them natively on mobile and the Web!

A link to the

website

The document

lottie-web

vue-lottie

Begin to use

npm install --save vue-lottie
Copy the code

The first kind of

main.js

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
Copy the code

Introduce the JSON file into the project

vue

<template> <div> <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/> </div> </template> <script> /** * When I wrote this code,Only God and I understood what I was doing. * Now,God only knows !!! */ import loading from '.. /assets/lottie/load' export default { name: "lottie-demo", data() { return { defaultOptions: {animationData: loading}, anim:{}, }; }, methods: { handleAnimation: function (anim) { this.anim = anim; }, }, } </script> <style lang="scss" scoped> </style>Copy the code

The second,

Again, bring json files into the project

No longer referenced in main.js, directly referenced in vue

<template> <div> <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/> </div> </template> <script> /** * When I wrote this code,Only God and I understood what I was doing. * Now,God only knows !!! */ import Lottie from 'vue-lottie'; import loading from '.. /assets/lottie/load' export default { name: "lottie-demo", components:{Lottie}, data() { return { defaultOptions: {animationData: loading}, anim:{}, }; }, methods: { handleAnimation: function (anim) { this.anim = anim; }, }, } </script> <style lang="scss" scoped> </style>Copy the code

The effect

Use method to control animation

anim

  • anim.play()
  • anim.stop()
  • anim.pause()
  • Anim.setspeed (speed) — Playback speed, 1 is normal speed.
  • Anim. goToAndStop(value, isFrame) jumps to a certain time (or frame) and stops there. The first argument (value) is a numeric value. The second argument is a Boolean, “true” means “frame” and “false” means “time”.
  • Anim. goToAndPlay(Value, isFrame) jumps to a certain time (or frame) and plays. The first argument (value) is a numeric value. The second argument is a Boolean, “true” means “frame” and “false” means “time”.
  • Anim.setdirection (direction)** — Play direction. Positive numbers and 0 are normal and negative numbers are reversed.
  • Anim. playSegments(segments, forceFlag) — Plays a specified paragraph. The first argument is an array of the form [(a,b),(c,d),(e,f)…]. Frames A to B, c to D, e to F… , the second parameter is a Boolean value, “true” plays the clip in parameter 1 immediately, and “false” plays the clip after the current animation is played.
  • anim.destroy()

bodymovin

  • Bodymovin.play () — Plays the specified animation, 1 parameter animation name.
  • Bodymovin.stop () — Stops playing the specified animation, 1 parameter animation name.
  • Bodymovin.setspeed () — The first parameter sets the animation speed (1 is normal speed) and the second parameter animation name is optional.
  • Bodymovin.setdirection () — f playback direction, positive and 0 are normal, negative are inverted, and the second parameter animation name is optional.
  • Bodymovin. SearchAnimations () – testing class value is “bodymovin” elements.
  • Bodymovin.loadanimation () – as described earlier, returns an instance of an animation that can be controlled separately.
  • Bodymovin.destroy () — Destroys and frees resources. The DOM element will be emptied.
  • Bodymovin. RegisterAnimation (), you can directly use registerAnimation to register a custom element, it must include the “data – animation – path” attribute and point to the data, the address of json.
  • Bodymovin.setquality () – Image quality Settings to adjust animation player performance. The default is high, and the optional values are ‘high’, ‘medium’, ‘low’, or a number greater than 1. For some animations these Settings do not differ much.