内容简介:What is Lottie? Lottie is an open source animation library developed by Airbnb that natively renders vector based animations and art in realtime.Lottie supports and renders animation exported inBy using Lottie, designers can create and ship beautiful anima
What is Lottie? Lottie is an open source animation library developed by Airbnb that natively renders vector based animations and art in realtime.
Lottie supports and renders animation exported in bodymovin JSON format . There are few ways for designers to generate a bodymovin JSON file:
- After Effects with bodymovin
- Sketch with Lottie Sketch Export
- Haiku
By using Lottie, designers can create and ship beautiful animations without the need of developers recreating it by hand. This can definitely improve the collaboration between designers and developers.
Before we get started, here are a few sample animations to get you excited.
Look exciting? Read on to find out how you can start using it in your iOS app.
Lottie for iOS Installation
Based on the Lottie Github page , you can install the library using CocoaPods, Carthage or Swift Package Manager (SPM). I will only cover installation using SPM in this article. However, feel free to use any other installation method that you preferred.
To install using SPM, go to File → Swift Packages → Add Package Dependency … to open the “Choose Package Repository” dialog.
Go ahead and paste the Lottie Github URL ( https://github.com/airbnb/lottie-ios ) into the dialog and click “Next”.
In the next dialog, select version as “Up to Next Major” so that Xcode will download the latest version of Lottie from Github.
Lastly, check “Lottie” to add the library to your application target and click “Next”. Xcode will automatically install the library for you.
To verify that the installation is successful, you can try to import the library in your application delegate.
import Lottie
If your project is able to build without any error, then you are good to go.
Displaying Lottie Animation
The Lottie library consists of 2 essential components:
-
Animation
— The backing model for an animation that is deserialized from a JSON file. -
AnimationView
— AUIView
subclass responsible for loading and rendering theAnimation
The way to display a Lottie animation is actually pretty straight forward.
- Create an
Animation
object and load it into anAnimationView
. - Add the
AnimationView
into a view controller. - Play the animation.
// Create Animation object let jsonName = "Watermelon" let animation = Animation.named(jsonName) // Load animation to AnimationView let animationView = AnimationView(animation: animation) animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200) // Add animationView as subview view.addSubview(animationView) // Play the animation animationView.play()
Note that I am using the Watermelon.json
sample animation that can be obtained from the Lottie example project on Github.
Here’s the end result animation.
Pretty awesome right?
Basic Lottie Animation Playback
Since Lottie animations are being rendered realtime within your application, therefore you can have full control over when to play , stop or pause the animations.
You can use the play()
, stop()
and pause()
method of AnimationView
to control the animation playback.
// Play the animation animationView.play() // Stop the animation animationView.stop() // Pause the animation animationView.pause()
Animation Basic Configurations
Besides controlling the animation playback, Lottie library also provides ways for developers to configure the animation based on their needs.
For example, you can change the content mode of the animation view to scale the animation to your preferred size.
// Set animation view content mode animationView.contentMode = .scaleAspectFit
Because AnimationView
is a subclass of UIView
, therefore you can expect setting content mode on the AnimationView
is just like setting content mode on the UIView
.
Next up, let’s take a look at how you can configure the animation speed . The speed of Lottie animation is represented by a CGFloat
value and it has a default value of 1.
In order to make the animation go faster, you can set the animation speed to a value larger than 1. Likewise, you can set a value smaller than 1 to slow down the animation.
// Speed up animation animationView.animationSpeed = 2.0 // Slow down animation animationView.animationSpeed = 0.5
Lastly, let’s look at how to configure the animation’s looping behavior by changing the animation view’s loop mode .
// Set animation loop mode animationView.loopMode = .loop
By default, the animation view will have loop mode of playOnce
. However, Lottie library does provide a few others loop modes for developers to choose from. Here are all the loop modes supported by Lottie.
public enum LottieLoopMode { /// Animation is played once then stops. case playOnce /// Animation will loop from beginning to end until stopped. case loop /// Animation will play forward, then backwards and loop until stopped. case autoReverse /// Animation will loop from beginning to end up to defined amount of times. case `repeat`(Float) /// Animation will play forward, then backwards a defined amount of times. case repeatBackwards(Float) }
Wrapping Up
Lottie is a very powerful library and it can definitely do more than what being covered in this article. However, the information in this article should be sufficient to help you get started.
I will be covering some other more advanced Lottie animation topics in my future articles. If you would like to get notified when a new article comes out, you can follow me on Twitter and subscribe to my monthly newsletter.
Last but not least, make sure to check out this great site where you can find tons of beautifully made Lottie animation — https://lottiefiles.com/
Thanks for reading. :computer:
References
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。