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
|html
Three states can be renderedloop
:true
|false
Whether to loop the animation.true
->animation-iteration-count:infinite;
.autoplay
:true
|false
Whether to play automatically.name
: Animation name.animationData
: the JSON datapath
andanimationData
One or the other.
Instance methods
play()
: startingstop()
Stop:pause()
Suspended:destory()
Destruction:setLocationHref(href:string)
:href
As alocation.href
, which is useful when you have problems with unsigned masks in SafarisetSpeed(speed:number = 1)
: Sets the animation speedgoToAndStop(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
: reversegetDuration(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)
:segments
The: argument specifies the play frame[form,to]
Will stay in the last two-dimensional arrayto
The 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) endsenterFrame
: Triggers every frame that enters, every frame that plays, and the stop methodsegmentStart
: Triggered when the specified segment is played,playSegments
,resetSegments
Emitted when the method first starts playing the specified segment, ifplaySegments
Play multiple clips, multiple clips will trigger at the beginning.data_ready
: Animation data JSON file is triggered after loadingdata_fail
: Animation data JSON file loading failedloaded_images
: Triggered when all images load successfully/failedDOMLoaded
: Animation related to the DOM has been added to the HTML after triggeringdestroy
: 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
- list
- Asset: resources
- assetConfig
- id
- W: width
- H: high
- U: path
- P: name
- e
- assetConfig
- 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:
- layerConfig