Getting Started with Lottie Animations in iOS

栏目: IT技术 · 发布时间: 4年前

内容简介: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:

  1. After Effects with  bodymovin
  2. Sketch with  Lottie Sketch Export
  3. 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.

Getting Started with Lottie Animations in iOS
Lottie animations (source: https://github.com/airbnb/lottie-ios )

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 FileSwift PackagesAdd 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”.

Getting Started with Lottie Animations in iOS
Enter Github URL

In the next dialog, select version as “Up to Next Major” so that Xcode will download the latest version of Lottie from Github.

Getting Started with Lottie Animations in iOS
Select version to install

Lastly, check “Lottie” to add the library to your application target and click “Next”. Xcode will automatically install the library for you.

Getting Started with Lottie Animations in iOS
Add Lottie to application target

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  — A  UIView  subclass responsible for loading and rendering the  Animation

The way to display a Lottie animation is actually pretty straight forward.

  1. Create an Animation object and load it into an AnimationView .
  2. Add the AnimationView into a view controller.
  3. 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.

Getting Started with Lottie Animations in iOS
The Watermelon.json 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()
Getting Started with Lottie Animations in iOS
Lottie animation basic playback

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
Getting Started with Lottie Animations in iOS
animationView.animationSpeed = 2.0

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)
}
Getting Started with Lottie Animations in iOS
animationView.loopMode = .autoReverse

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web程序设计

Web程序设计

(美)塞巴斯塔 / 王春智、刘伟梅 / 清华大学出版社 / 2011-1 / 69.00元

《Web程序设计(第6版)》浓墨重彩地描述客户端和服务器端Web开发技术,深入分析Web站点构造和维护工具,并透彻讲解主流Web编程语言。《Web程序设计(第6版)》对上一版内容做了全面细致的修改,并融入了NetBeans 6.7、Visual Studio 8和ASP.NET Web服务等最新技术。《Web程序设计(第6版)》既可以作为高校教材,也可供专业Web编程人员参考使用。一起来看看 《Web程序设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具