What is Lottie

Open source for iOS, Android, Web animation library, can analyze AE, LottieFile(Figma Plugins) exported animation, and can let the native APP like using static materials to use these animations, perfect animation effect.

Advantages and disadvantages of Lottie

advantages

  • You don’t need to write animations for development, you just need to load
  • Android, iOS, Web multi-terminal support
  • You can manually set progress, binding events, gestures, and more
  • Network loading, dynamic control playback progress
  • Good performance, perfect display effect
  • .

disadvantages

  • There are limited effects that can be achieved in AE
  • High requirements for AE use, animation depends on the designer
  • Using bitmaps consumes a lot of resources
  • .

Lottie versus GIF

GIF

  • Development cannot be controlled
  • Have a sawtooth
  • Difficult to maintain and low performance
  • GIF files are too large
  • .

How to use

Lottie DOC – the Web’s official website

Lottie previews JSON dynamic address

Lottie free animation

How to install

// 1. Install using NPM
npm i lottie-web
// 2. Import using CDN
<script src="https://cdnjs.com/libraries/bodymovin"></script>
Copy the code

Loading a JSON file

// json path https://uxpinchina.com/voice.json
// index.js
const animation = lottie.loadAnimation({
  container:document.querySelector('#lottie'),
  renderer:'svg/canvas/html'.path:'data.json'.loop:true.autoplay:true.name:'demo'.animationData:{}
})
Copy the code
  • container: the DOM element to render.
  • path: Path of the JSON file exported by AE or Lottie.
  • renderer:svg|canvas|htmlThree states can be rendered
  • loop:true|falseWhether to loop the animation.true->animation-iteration-count:infinite;.
  • autoplay:true|falseWhether to play automatically.
  • name: Animation name.
  • animationData: the JSON datapathandanimationDataOne or the other.

Instance methods

  • play(): starting
  • stop()Stop:
  • pause()Suspended:
  • destory()Destruction:
  • setLocationHref(href:string):hrefAs alocation.href, which is useful when you have problems with unsigned masks in Safari
  • setSpeed(speed:number = 1): Sets the animation speed
  • goToAndStop(value:number,isFrame:boolean = false): The animation jumps to some progress and stops.

Value: progress value isFrame: defines whether value is based on time true or frame false

  • goToAndPlay(value:number,isFrame:boolean = false): Animation jumps to a certain progress and plays.
  • setDirection(direction:number = 1): Sets the playback order of the animation.Positive and zero: positive sequence.A negative number: reverse
  • getDuration(inFrames:boolean = false): Gets the animation persistence event.

True -> Returns duration in frames false-> Returns duration in seconds

  • playSegments(segments:[number,number]|[number,number][],forceFlag:boolean = false):segmentsThe: argument specifies the play frame[form,to]Will stay in the last two-dimensional arraytoThe inside.forceFlag: parameter indicates whether to force the segment to play immediately.false-> waits for the current segment to complete.true-> This segment will be played immediately. Such as:Animation. PlaySegments ([15, 30], false); // Play 15-30 frames after the previous clip.Animation. PlaySegments ([[0, 5], [10]]). // Play frames 0-5 and 10-20 directly.
  • setSubframe(boolean = true):false-> Will respect the original AE FPS.true-> The intermediate values will be used to update each RequestAnimationFrame.

The event

  • complete: Play is complete (it will not trigger when playing in a loop)
  • loopComplete: Triggered when the current loop (loop/non-loop) ends
  • enterFrame: Triggers every frame that enters, every frame that plays, and the stop method
  • segmentStart: Triggered when the specified segment is played,playSegments,resetSegmentsEmitted when the method first starts playing the specified segment, ifplaySegmentsPlay multiple clips, multiple clips will trigger at the beginning.
  • data_ready: Animation data JSON file is triggered after loading
  • data_fail: Animation data JSON file loading failed
  • loaded_images: Triggered when all images load successfully/failed
  • DOMLoaded: Animation related to the DOM has been added to the HTML after triggering
  • destroy: fires when the animation is deleted
// Animation is an instance object via Lottie. LoadAnimation
animation.addEventlistener('data_ready'.res= >{
  // handle
  console.log('animation file has loaded');
})
Copy the code

Animation playback

// Listen for animation to complete
this.animationLottie.addEventListener('complete'.(res) = > {
  // 1. Set the playback sequence repeatedly
  // Get the playback order
  const dir = this.animationLottie.playDirection;
  // Set the playback order
  this.animationLottie.setDirection(dir === 1 ? -1 : 1);
  this.animationLottie.play();
  // 2. Play the specified frame in reverse order
  // Get the total animation time
  // const duraction = this.animationLottie.getDuration(true);
  // this.playSegments(this.direction === 1 ? [duraction, 0] : [0, duraction]);
});
Copy the code

Github code sample

Lottie demo

lottie.json

Lottie. Json keyword

  • IP: start frame
  • Op: End frame
  • W: width
  • H: high
  • V: version
  • Fr: Frequency/frame rate
  • ddd
  • nm
  • tiny
  • Fonts, font
    • list
      • fontConfig
  • Asset: resources
    • assetConfig
      • id
      • W: width
      • H: high
      • U: path
      • P: name
      • e
  • The layers: the layer
    • layerConfig
      • St: Start frame
      • IP: start frame
      • Op: End frame
      • Nm: name
      • Ind: layer ID
      • Ty: layer type
      • Ks: animation
      • Graphics shapes:

If you like the author, you can give me a reward