适用于 iOS 和 macOS 的 Lottie

==公告==：从 3.0 版本开始，Lottie 已完全使用 Swift 4.2 重写！如需 Objective-C 支持，请使用 Lottie 2.5.3。迁移文档请点击此处。

Lottie 是一款适用于 Android 和 iOS 的移动端库，它可以实时原生渲染基于矢量的动画和艺术作品，代码量极少。

Lottie 加载并渲染以 bodymovin JSON 格式导出的动画和矢量图。可以使用 bodymovin（After Effects）、Lottie Sketch Export（Sketch）以及 Haiku 创建和导出 Bodymovin JSON 文件。

设计师们第一次可以创建并交付精美的动画，而无需工程师费力地手动重新创建。由于动画由 JSON 支持，因此文件尺寸极小，但复杂度却可能很高！动画可以播放、调整大小、循环播放、加速、减速、反向播放，甚至可以交互式拖动。Lottie 还可以只播放或循环播放动画的一部分，可能性无限！动画甚至可以在运行时以各种方式进行更改！更改颜色、位置或任何可关键帧的值！Lottie 还开箱即用地支持原生 UIViewController 转场！

这里只是一些 Lottie 功能的简单示例

目录

• 安装 Lottie
• 快速上手

• 动画模型

  • 加载动画

• 动画视图

  • 提供图像
  • 播放动画
  • 动画设置
  • 使用标记点
  • 动态动画属性
  • 向动画添加视图

• 图像提供程序

  • BundleImageProvider
  • FilepathImageProvider

• 动画缓存

  • LRUAnimationCache

• 值提供程序

  • 基本类型
  • 预构建提供程序
• 动画控件
• 动画开关
• 动画按钮

• 示例

  • 运行时更改动画
• 支持的 After Effects 功能
• 替代方案
• 为什么叫 Lottie？
• 贡献代码

• 问题或功能请求？

  安装 Lottie

  Lottie 支持 CocoaPods 和 Carthage（动态库和静态库均支持）。Lottie 使用 Swift 4.2 编写。

  Github 代码库

您可以拉取 Lottie Github 代码库 并包含 Lottie.xcodeproj 来构建动态库或静态库。

CocoaPods

将 pod 添加到您的 Podfile 中

pod 'lottie-ios'

然后运行

pod install

将 cocoapod 安装到您的项目后，使用以下代码导入 Lottie：

import Lottie

Carthage

将 Lottie 添加到您的 Cartfile 中

github "airbnb/lottie-ios" "master"

然后运行

carthage update

在应用程序目标的“常规”选项卡下，位于“已链接的框架和库”部分，将 lottie-ios.framework 从 `carthage update` 生成的 Carthage/Build/iOS 目录中拖放到此处。

返回目录

快速上手

Lottie 加载并渲染以 bodymovin JSON 格式导出的动画和矢量图。可以使用 bodymovin（After Effects）、Lottie Sketch Export（Sketch）以及 Haiku 创建和导出 Bodymovin JSON 文件。

Lottie-iOS 使用 `UIImageView` 作为其 API。基本的 API 分为两部分

• Animation - 从 json 文件反序列化的动画的底层模型。
• AnimationView - 负责加载和渲染 `Animation` 的 `UIView` 子类。

您可以快速加载 Lottie 动画：

let starAnimationView = AnimationView(name: "StarAnimation")

此外，您可以选择加载不包含任何动画的 `AnimationView`，然后稍后设置动画

let starAnimationView = AnimationView()
/// Some time later
let starAnimation = Animation.named("StarAnimation")
starAnimationView.animation = starAnimation

您可以从特定 bundle、文件路径甚至从 URL 异步加载动画。更多关于加载动画的信息，请点击此处

加载动画后，可以使用以下方法播放：

starAnimationView.play { (finished) in
/// Animation finished
}

更多关于播放动画的信息，请点击此处

返回目录

动画模型

`Animation` 模型是 Lottie 中的顶级模型对象。一个 `Animation` 包含支持 Lottie 动画的所有动画数据。`Animations` 从 JSON 反序列化而来。可编码；请参见 JSON 架构此处。

`Animation` 也完全是 `codable` 的。==动画可以解码并编码为 JSON==

加载动画

有多种方法可以单独加载 `Animation`。此外，您可以在分配 `AnimationView` 的同时加载动画，方法是使用 `AnimationView` 上的某个便利初始化器。

动画可以存储在 `AnimationCacheProvider` 中，以减少重复反序列化相同动画的开销。更多信息，请点击此处。

从 Bundle 加载

Animation.named(_ name: String, bundle: Bundle, subdirectory: String?, animationCache: AnimationCacheProvider?) -> Animation?

根据名称从 bundle 加载动画模型。如果找不到动画，则返回 `nil`。

参数：name：json 文件名，不含 json 扩展名。例如 "StarAnimation" bundle：动画所在的 bundle。默认为 `Bundle.main` subdirectory：动画所在的 bundle 中的子目录。可选。 animationCache：用于保存已加载动画的缓存。可选。

示例

/// Load from the main bundle.
let animation = Animation("StarAnimation")
/// Load from a specific bundle/
let animation = Animation("StarAnimation", bundle: myBundle)
/// Load from a subdirectory in a bundle.
let animation = Animation("StarAnimation", subdirectory: "Animations")
/// Load with an animation cache.
let animation = Animation("StarAnimation", animationCache: LRUAnimationCache.sharedCache)

从文件路径加载

Animation.filepath(_ filepath: String, animationCache: AnimationCacheProvider?) -> Animation?

从绝对文件路径加载动画模型。如果找不到动画，则返回 `nil`。

参数：filepath：要加载的动画的绝对文件路径。例如 "/User/Me/starAnimation.json" animationCache：用于保存已加载动画的缓存。可选。

示例

let animation = Animation(filepathURL.path, animationCache: LRUAnimationCache.sharedCache)

返回目录

动画视图

`AnimationView` 是一个显示动画内容的 UIView（macOS 上为 NSView）子类。`AnimationView` 提供了许多方法来加载、播放甚至更改动画。

创建动画视图

动画视图可以带有或不带动画数据进行分配。有一些便利初始化器可用于初始化动画。

提供图像

`AnimationView` 使用 `AnimationImageProvider` 来检索其动画的图像。可以在初始化 AnimationView 时提供图像提供程序，也可以之后通过设置其 `imageProvider` 属性来提供。要强制 AnimationView 重新加载其图像，请在 AnimationView 上调用 `reloadImages()`。

更多关于 `AnimationImageProvider` 的信息，请点击此处

播放动画

时间

有几种方法可以播放动画以及动画的各个部分。Lottie 以三种方式描述时间

• 帧时间 - 以每秒帧数的格式描述时间。`(秒 * 帧率)` *例如：当帧率为 24 时，0.5 秒为帧时间 12*。
• 进度时间 - 描述从 0（动画时间线的开始）到 1（动画时间线的结束）的进度时间。
• 时间 - 以秒为单位描述时间。

所有这三种方法都可以用于播放和设置 `AnimationView` 的时间

基本播放

AnimationView.play(completion: LottieCompletionBlock?)

从当前状态播放动画到时间线的结束。动画停止时调用完成块。

参数：completion：动画完成后调用的完成块。如果动画完成，则该块将传递 `true`，如果动画被中断，则传递 `false`。可选。

示例

starAnimationView.play { (finished) in
/// Animation stopped
}

使用进度时间播放

AnimationView.play(fromProgress: AnimationProgressTime?, toProgress: AnimationProgressTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

使用选项从 `进度时间` 播放动画到 `进度时间`。

参数：fromProgress：动画的起始进度。如果为 `nil`，则动画将从当前进度开始。（可选） toProgress：动画的结束进度。 loopMode：动画的循环行为。如果为 `nil`，则将使用视图的 `loopMode` 属性。（可选） completion：动画停止时调用的可选完成闭包。（可选）

示例

/// Play only the last half of an animation.
animationView.play(fromProgress: 0.5, toProgress: 1)

使用帧时间播放

AnimationView.play(fromFrame: AnimationProgressTime?, toFrame: AnimationFrameTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

使用选项从 `帧时间` 播放动画到 `帧时间`。

参数：fromFrame：动画的起始帧。如果为 `nil`，则动画将从当前帧开始。（可选） toFrame：动画的结束帧。 loopMode：动画的循环行为。如果为 `nil`，则将使用视图的 `loopMode` 属性。（可选） completion：动画停止时调用的可选完成闭包。（可选）

示例

/// Play from frame 24 to 48 of an animation.
animationView.play(fromFrame: 24, toFrame: 48)

使用标记点名称播放

AnimationView.play(fromMarker: String?, toMarker: String, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

从一个命名标记播放动画到另一个标记。标记是编码到动画数据中并分配名称的时间点。更多关于标记的信息，请点击此处 ==注意==：如果找不到标记，则播放命令将退出。

参数：fromMarker：动画播放的起始标记。如果为 `nil`，则动画将从当前进度开始。（可选） toMarker：动画播放的结束标记。 loopMode：动画的循环行为。如果为 `nil`，则将使用视图的 `loopMode` 属性。（可选） completion：动画停止时调用的可选完成闭包。（可选）

示例

/// Play from frame 24 to 48 of an animation.
animationView.play(fromMarker: "ftue1_begin", toMarker: "ftue1_end")

停止

AnimationView.stop()

停止当前正在播放的动画（如果有）。动画视图将重置为其起始帧。上一个动画的完成块将使用 `false` 关闭 示例

animationView.stop()

暂停

AnimationView.pause()

在当前状态暂停动画。上一个动画的完成块将使用 `false` 关闭 示例

animationView.pause()

动画设置

`AnimationView` 具有多种设置，用于控制播放和视觉状态。

内容模式

/// iOS
var AnimationView.contentMode: UIViewContentMode { get set }
/// MacOS
var AnimationView.contentMode: LottieContentMode { get set }

描述 AnimationView 如何调整其内容的大小和比例。

选项：scaleToFill：动画缩放以填充 AnimationView 的边界。如果 AnimationView 的纵横比与动画不同，则动画将被拉伸。 scaleAspectFit：动画将缩放以适应 AnimationView，同时保持其纵横比。 scaleAspectFill：动画将缩放以填充 AnimationView，同时保持其纵横比。 topLeft：动画不会缩放。

后台行为

var AnimationView.backgroundBehavior: LottieBackgroundBehavior { get set }

描述应用程序移至后台时 AnimationView 的行为。（仅限 iOS）

默认为 `pause`

选项：stop：停止动画并将其重置为当前播放时间的开头。调用完成块。 pause：暂停动画的当前状态。调用完成块。 pauseAndRestore：暂停动画并在应用程序返回前台时重新启动它。完成块将被存储并在动画完成后调用。

循环模式

var AnimationView.loopMode: LottieLoopMode { get set }

设置play调用的循环行为。默认为playOnce。选项：playOnce：动画播放一次后停止。loop：动画将循环播放，直到停止。autoReverse：动画将向前播放，然后向后播放，并循环播放，直到停止。

动画是否正在播放

var AnimationView.isAnimationPlaying: Bool { get set }

如果动画当前正在播放，则返回true；如果动画未播放，则返回false。

空闲时是否应光栅化

var AnimationView.shouldRasterizeWhenIdle: Bool { get set }

当设置为true时，动画视图在不播放动画时将对其内容进行光栅化。光栅化将提高静态动画的性能。==注意：==这在高于动画自然分辨率的分辨率下不会产生清晰的结果。

默认为false

遵循动画帧率

var AnimationView.respectAnimationFrameRate: Bool { get set }

当设置为true时，动画将以Animation模型中编码的帧率播放。当设置为false时，动画将以设备的帧率播放。

默认为false

动画速度

var AnimationView.animationSpeed: CGFloat { get set }

设置动画播放速度。速度越高，时间越快。默认为1。

当前进度

var AnimationView.currentProgress: AnimationProgressTime { get set }

使用进度时间设置当前动画时间。返回当前进度时间，如果动画正在进行，则返回最终进度时间。==注意==：设置此值将停止当前动画（如有）。

当前时间

var AnimationView.currentTime: TimeInterval { get set }

使用时间间隔设置当前动画时间。返回当前时间间隔，如果动画正在进行，则返回最终时间间隔。==注意==：设置此值将停止当前动画（如有）。

当前帧

var AnimationView.currentFrame: AnimationFrameTime { get set }

使用帧时间设置当前动画时间。返回当前帧时间，如果动画正在进行，则返回最终帧时间。==注意==：设置此值将停止当前动画（如有）。

实时帧

var AnimationView.realtimeAnimationFrame: AnimationFrameTime { get }

返回动画正在播放时AnimationView的实时帧时间。

实时进度

var AnimationView.realtimeAnimationProgress: AnimationProgressTime { get }

返回动画正在播放时AnimationView的实时进度时间。

强制显示更新

func AnimationView.forceDisplayUpdate()

强制AnimationView重绘其内容。

使用标记点

标记是通过键名称描述时间点的一种方式。标记编码到动画JSON中。通过使用标记，设计师可以标记开发人员使用的回放点，而无需担心跟踪动画帧。如果动画文件更新，开发人员无需更新回放代码。

标记可用于播放动画部分，或可直接读取以进行更高级的使用。Animation和AnimationView都有读取标记时间的方法。

读取标记时间

/// Animation View Methods
AnimationView.progressTime(forMarker named: String) -> AnimationProgressTime?
AnimationView.frameTime(forMarker named: String) -> AnimationFrameTime?
/// Animation Model Methods
Animation.progressTime(forMarker named: String) -> AnimationProgressTime?
Animation.frameTime(forMarker named: String) -> AnimationFrameTime?

每个方法都返回由名称指定的标记的时间。如果找不到标记，则返回nil。

动态动画属性

几乎所有Lottie动画的属性都可以在运行时使用动画键路径和值提供程序的组合进行更改。在键路径上设置值提供程序将导致动画更新其内容并读取新的值提供程序。此外，可以使用动画键路径读取动画属性。

设置动态属性

AnimationView.setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath)

为指定的键路径设置值提供程序。值提供程序将设置在与键路径匹配的所有属性上。

参数：valueProvider：属性的新值提供程序。keypath：用于搜索属性的键路径。

示例

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

读取动画属性

AnimationView.getValue(for keypath: AnimationKeypath, atFrame: AnimationFrameTime?) -> Any?

读取由键路径指定的属性的值。如果找不到属性，则返回nil。

参数：for：用于搜索属性的键路径。atFrame：要查询的值的帧时间。如果为nil，则使用当前帧。

示例

/// A keypath that finds the Position of `Group 1` in `Layer 1`
let fillKeypath = AnimationKeypath(keypath: "Layer 1.Group 1.Transform.Position")
let position = animationView.getValue(for: fillKeypath, atFrame: nil)
/// Returns Vector(10, 10, 0) for currentFrame.

记录键路径

AnimationView.logHierarchyKeypaths()

将动画的所有子键路径记录到控制台。

向动画添加视图

自定义视图可以添加到AnimationViews。这些视图将与动画一起动画。

添加子视图

AnimationView.addSubview(_ subview: AnimationSubview, forLayerAt keypath: AnimationKeypath)

搜索与第一个键路径最接近的子图层，并将子视图添加到该图层。子视图将随子图层移动和动画。此外，子视图将位于子图层的坐标空间中。==注意==：如果找不到键路径的图层，则不会发生任何事情。

参数：subview：要添加到找到的动画图层的子视图。keypath：用于查找动画图层的键路径。

示例

/// A keypath that finds `Layer 1`
let layerKeypath = AnimationKeypath(keypath: "Layer 1")

/// Wrap the custom view in an `AnimationSubview`
let subview = AnimationSubview()
subview.addSubview(customView)

/// Set the provider on the animationView.
animationView.addSubview(subview, forLayerAt: layerKeypath)

将CGRect和CGPoint转换为图层

/// Converts a rect
AnimationView.convert(_ rect: CGRect, toLayerAt keypath: AnimationKeypath) -> CGRect?
/// Converts a point
AnimationView.convert(_ point: CGPoint, toLayerAt keypath: AnimationKeypath) -> CGPoint?

这两个方法用于将几何图形从AnimationView的坐标空间转换为在键路径中找到的图层的坐标空间。

如果找不到图层，则返回nil。

参数：point or rect：要转换的AnimationView坐标空间中的CGPoint或CGRect。keypath：用于查找图层的键路径。

返回目录

图像提供程序

图像提供程序是一个协议，用于向AnimationView提供图像。

一些动画需要对图像的引用。图像提供程序加载并将这些图像提供给AnimationView。Lottie包含一些预构建的图像提供程序，这些提供程序从Bundle或FilePath提供图像。

此外，可以创建自定义图像提供程序来从URL加载图像或缓存图像。

BundleImageProvider

public class BundleImageProvider: AnimationImageProvider

一个AnimationImageProvider，它从特定的bundle中按名称提供图像。BundleImageProvider使用bundle和可选的searchPath进行初始化。

/// Create a bundle that loads images from the Main bundle in the subdirectory "AnimationImages"
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "AnimationImages")
/// Set the provider on an animation.
animationView.imageProvider = imageProvider

FilepathImageProvider

public class FilepathImageProvider: AnimationImageProvider

一个AnimationImageProvider，它从特定的本地文件路径中按名称提供图像。

/// Create a bundle that loads images from a local URL filepath.
let imageProvider = AnimationImageProvider(filepath: url)
/// Set the provider on an animation.
animationView.imageProvider = imageProvider

返回目录

动画缓存

AnimationCacheProvider是一个协议，它描述了一个动画缓存。加载Animation模型时使用动画缓存。使用动画缓存可以提高多次加载动画时的性能。

Lottie带有一个预构建的LRU动画缓存。

LRUAnimationCache

一个动画缓存，它将存储最多cacheSize的动画。一旦达到cacheSize，最少最近使用的动画将被弹出。缓存的默认大小为100。

LRUAnimationCache有一个全局sharedCache用于存储动画。

您也可以调用LRUAnimationCache.sharedCache.clearCache()来清除缓存。

返回目录

值提供程序

AnyValueProvider是一个协议，它在给定时间返回属性的动画数据。每一帧AnimationView都会查询其所有属性，并询问其值提供程序是否有更新。如果有，AnimationView将读取属性并更新动画的那一部分。

值提供程序可用于在运行时动态设置动画属性。

基本类型

值提供程序与一些原始数据类型一起使用。

• 颜色：一个描述RGBA颜色（0-1）的原始类型。
• Vector1D：单个浮点值。
• Vector3D：三维向量。（X，Y，Z）

预构建提供程序

Lottie为每种原始类型提供了一些预构建的提供程序。每个提供程序都可以使用单个值或逐帧调用的代码块进行初始化。

示例

/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

/// Later...
/// Changing the value provider will update the animation.
redValueProvider.color = Color(r: 0, g: 0.2, b: 1, a: 1)

返回目录

动画键路径

AnimationKeypath是一个对象，它描述了对动画JSON中节点的键路径搜索。AnimationKeypath通过名称将AnimationView中的视图和属性与其支持的Animation模型匹配。

键路径可用于在现有动画上设置属性，或可与现有Animation一起验证。AnimationKeypath可以描述特定对象，也可以使用通配符进行对象的模糊匹配。可接受的通配符是“*”（星号）或“**”（双星号）。单个星号将搜索下一对象的单个深度。双星号将搜索任何深度。

可以使用点分隔的键路径或键数组初始化AnimationKeypath。

键路径示例

/// Represents a specific color node on a specific stroke.
@"Layer.Shape Group.Stroke 1.Color"

/// Represents the color node for every Stroke named "Stroke 1" in the animation.
@"**.Stroke 1.Color"

代码示例

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath =  AnimationKeypath(keypath:  "**.Fill 1.Color")

返回目录

动画控件

Lottie预装了两个动画控件，AnimatedSwitch和AnimatedButton。这两个控件都是基于AnimatedControl构建的。

AnimatedControl是UIControl的子类，它提供了一种交互机制，用于响应用户操作来控制动画的视觉状态。

AnimatedControl将根据控件的当前UIControl.State显示和隐藏图层。

AnimationControl的用户可以为每个UIControl.State设置图层名称。当状态更改时，AnimationControl将更改其图层的可见性。

返回目录

动画开关

一个具有“打开”和“关闭”状态的交互式开关。当用户点击开关时，状态将切换，并播放相应的动画。

“打开”和“关闭”都与其状态关联的动画播放范围。

要更改每个状态的播放范围，请使用

/// Sets the play range for the given state. When the switch is toggled, the animation range is played.
public func setProgressForState(fromProgress: AnimationProgressTime,
        toProgress: AnimationProgressTime,
        forState onState: Bool)

返回目录

动画按钮

一个交互式按钮，按下时播放动画。AnimatedButton可以为不同的UIControl.Event播放各种时间范围。播放范围使用以下任一方式设置：

/// Set a play range with Progress Time.
public func setPlayRange(fromProgress: AnimationProgressTime,
        toProgress: AnimationProgressTime,
        event: UIControl.Event)
/// Set a play range with Marker Keys.
public func setPlayRange(fromMarker fromName: String,
        toMarker toName: String,
        event: UIControl.Event)

设置后，动画将在触发事件时自动播放。

示例

/// Create a button.
let twitterButton = AnimatedButton()
twitterButton.translatesAutoresizingMaskIntoConstraints = false
/// Set an animation on the button.
twitterButton.animation = Animation.named("TwitterHeartButton", subdirectory: "TestAnimations")
/// Turn off clips to bounds, as the animation goes outside of the bounds.
twitterButton.clipsToBounds = false
/// Set animation play ranges for touch states
twitterButton.setPlayRange(fromMarker: "touchDownStart", toMarker: "touchDownEnd", event: .touchDown)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpCancel", event: .touchUpOutside)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpEnd", event: .touchUpInside)
view.addSubview(twitterButton)

返回目录

示例

运行时更改动画

Lottie 不仅仅可以播放漂亮的动画。Lottie允许您在运行时**更改**动画。

假设我们要创建4个切换开关。

创建四个开关并播放它们很容易。

let animationView = AnimationView(name: "toggle");
self.view.addSubview(animationView)
animationView.play()

let animationView2 = AnimationView(name: "toggle");
self.view.addSubview(animationView2)
animationView2.play()

let animationView3 = AnimationView(name: "toggle");
self.view.addSubview(animationView3)
animationView3.play()

let animationView4 = AnimationView(name: "toggle");
self.view.addSubview(animationView4)
animationView4.play()

现在让我们更改它们的颜色。

/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// A Color Value provider that returns a reddish color.
let orangeValueProvider = ColorValueProvider(Color(r: 1, g: 1, b: 0, a: 1))
/// A Color Value provider that returns a reddish color.
let greenValueProvider = ColorValueProvider(Color(r: 0.2, g: 1, b: 0.3, a: 1))



let keypath = AnimationKeypath(keypath: "BG-On.Group 1.Fill 1.Color")
animationView2.setValueProvider(greenValueProvider, keypath: keypath)

animationView3.setValueProvider(redValueProvider, keypath: keypath)

animationView4.setValueProvider(orangeValueProvider, keypath: keypath)

keyPath 是来自 After Effects 的图层和属性名称的点分隔路径。AnimationView 提供了func logHierarchyKeypaths()，它将递归地记录动画的所有可设置键路径。

"BG-On.Group 1.Fill 1.Color"

现在让我们更改几个属性。

Lottie允许您更改After Effects中任何可动画的属性。

返回目录

支持的 After Effects 功能

形状	2.5.2	3.0
形状	👍	👍
椭圆	👍	👍
矩形	👍	👍
圆角矩形	👍	👍
多角星	👍	👍
组	👍	👍
重复器	👍	⛔️
修剪路径（单个）	⛔️	🎉
修剪路径（同时）	❗️	🎉
可渲染	2.5.2	3.0
填充	👍	👍
描边	👍	👍
径向渐变	👍	👍
线性渐变	👍	👍
渐变描边	⛔️	🎉
变换	2.5.2	3.0
位置	👍	👍
位置（分离的X/Y）	❗️	👍
缩放	👍	👍
倾斜	⛔️	🎉
旋转	👍	👍
锚点	👍	👍
不透明度	👍	👍
父子关系	👍	👍
自动定向	⛔️	⛔️
插值	2.5.2	3.0
线性插值	❗️	🎉
贝塞尔插值	👍	👍
保持插值	👍	👍
空间贝塞尔插值	❗️	🎉
跨时间移动	👍	👍
蒙版	2.5.2	3.0
蒙版路径	👍	👍
蒙版不透明度	👍	👍
添加	👍	👍
减去	❗️	🎉
相交	⛔️	🎉
变亮	⛔️	⛔️
变暗	⛔️	⛔️
差异	⛔️	⛔️
扩展	⛔️	⛔️
羽化	⛔️	⛔️
遮罩	2.5.2	3.0
Alpha遮罩	👍	👍
Alpha反向遮罩	⛔️	🎉
亮度遮罩	⛔️	⛔️
亮度反向遮罩	⛔️	⛔️
合并路径	2.5.2	3.0
合并	⛔	⛔
添加	⛔	⛔
减去	⛔	⛔
相交	⛔	⛔
排除相交	⛔	⛔
图层效果	2.5.2	3.0
填充	⛔️	⛔️
描边	⛔️	⛔️
色调	⛔️	⛔️
三色调	⛔️	⛔️
级别个体控件	⛔️	⛔️
文本	2.5.2	3.0
字形	⛔️	⛔️
字体	⛔️	🎉
变换	⛔️	🎉
填充	⛔️	🎉
描边	⛔️	🎉
跟踪	⛔️	🎉
锚点分组	⛔️	⛔️
文本路径	⛔	⛔️
逐字符3D	⛔	⛔️
范围选择器（单位）	⛔	⛔️
范围选择器（基于）	⛔	⛔️
范围选择器（数量）	⛔	⛔️
范围选择器（形状）	⛔	⛔️
范围选择器（缓动高）	⛔	⛔️
范围选择器（缓动低）	⛔	⛔️
范围选择器（随机排序）	⛔	⛔️
表达式选择器	⛔	⛔️
其他	2.5.2	3.0
表达式	⛔️	⛔️
图像	👍	👍
预合成	👍	👍
时间拉伸	⛔️	👍
时间重新映射	⛔️	👍
标记	⛔️	🎉

返回目录

替代方案

1. 手工构建动画。手工构建动画对于Android和iOS上的设计和工程来说是一项巨大的时间投入。通常很难甚至不可能证明花费如此多的时间来正确地完成动画是合理的。
2. Facebook Keyframes。Keyframes是Facebook为反应构建的一个很棒的新库。但是，Keyframes不支持Lottie的一些功能，例如蒙版、遮罩、修剪路径、虚线图案等等。
3. Gif。Gif的大小是bodymovin JSON的两倍多，并且以固定大小渲染，无法缩放以匹配大型和高密度屏幕。
4. Png序列。Png序列比gif更糟糕，因为它们的文件大小通常是bodymovin json的30-50倍，而且也无法放大。

返回目录

为什么叫 Lottie？

Lottie的名字来源于一位德国电影导演，她是剪影动画的先驱。她最著名的作品是《王子艾哈迈德历险记》(1926年)——这是现存最古老的长篇动画电影，比沃尔特·迪斯尼的长篇动画电影《白雪公主和七个小矮人》(1937年)早了十多年。Lotte Reiniger的艺术

返回目录

贡献代码

欢迎贡献代码。只需上传包含更改说明的PR。要了解Lottie-iOS的工作原理，请阅读贡献者文档

返回目录

问题或功能请求？

对于任何出现故障的问题，请在github上提交issue。在提交之前，请务必查看支持的After Effects功能列表。如果动画无法正常工作，请将After Effects文件附加到您的issue中。没有原始文件很难进行调试。Lottie由Brandon Withrow开发和维护。您可以通过电子邮件或Twitter联系他。

返回目录