behavior: lottie

此行为提供 Lottie 动画的播放。 它解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，并在 Sciter 中本地渲染它们。

Elements

默认情况下，此行为应用于：

• <lottie> - Lottie Player 元素;

• <param path="keyPath" property="propName" value="propVal" /> inside <lottie> - 重新定义动画中的变量，用于参数化和主题化。有关属性的含义，请参见下文。

Attributes

此行为知道：

• src - 字符串，Lottie 文件的 URL （JSON）。

• autoplay - 如果提供，将在加载后立即开始动画。

• loop - 如果提供，将重复播放。

Properties

• lottie.playing 、只读、true |false，报告播放状态。如果此刻正在播放真正的动画。

• lottie.speed 、读写、浮点数、速度倍增器，默认为 1.0。2.0 的播放动画速度快 2 倍，0.5 的播放速度慢两倍。

• lottie.loop 、读写、真 |如果设置为 true，则为 false 将循环播放。

• lottie.frame 、读写、整数、当前帧在 [0..帧] 范围内。

• lottie.frames 、只读、整数、动画中的总帧数。

• lottie.position 、读写、浮点数、当前动画位置、数字范围 0.0 ..1.0

• lottie.duration 、只读、持续时间、动画设计器定义的完整动画循环的总持续时间。

• lottie.markers 、只读、标记定义的数组（列表）。每个定义都是一个数组（元组）：[tagName：string， startFrame： integer， endFrame： integer]。

  标记可用于在动画、部分回放等中增加与特定命名帧绑定的事件。请参阅使用标记控制 Lottie 动画。

Methods

• lottie.load( url : string ) : bool - 从URL的JSON文件加载（可能是异步的）动画。

• lottie.play( [ firstFrame : integer, lastFrame : integer ] ) : bool - 开始播放。如果提供了第一帧/最后一帧，则仅播放该范围内的帧。

• lottie.stop() : bool - 停止（暂停）动画。

• lottie.update( keyPath: string, propName : string, value : color | float | integer ) : bool - 在运行时动态更新动画属性。有关 keyPath、propName 和 value，请参见下文。

Events

除了标准事件集（鼠标、键盘、焦点）之外，behavior：lottie 还会生成以下事件：

• "animationstart" - 动画已成功加载，动画已启动。

• "animationloop" - 显示最后一帧，动画从头开始重新开始。

• "animationend" - 动画播放停止。

Value

N/A，该行为未实现价值概念。

Redefining animation variables

Understanding After Effects

要了解如何在  Lottie 中更改动画属性，您首先应该了解动画属性在 Lottie 中的存储方式。动画属性存储在模拟 After Effects  信息层次结构的数据树中。在 After Effects  中，合成是图层的集合，每个图层都有自己的时间线。图层对象具有字符串名称，其内容可以是图像、形状图层、填充、描边或几乎任何可绘制的内容。After  Effects 中的每个对象都有一个名称。Lottie 可以使用 KeyPath 按其名称查找这些对象和属性。

Usage

若要在运行时更新属性，需要 3 件事：

1. KeyPath

2.  道具名称

3.  价值

 KeyPath

KeyPath 用于定位特定内容或将要更新的一组内容。KeyPath 由与原始动画中 After Effects 内容的层次结构相对应的字符串列表指定。KeyPaths 可以包含内容或通配符的特定名称：

• 通配符 * - 通配符匹配其在键路径中位置的任何单个内容名称。

• Globstar ** - Globstars 匹配零层或多层。

PropName

PropName 是要设置的属性的名称。它们对应于 After Effects 中的可动画值，可用属性如下所示：

• FillColor - Fill 对象的 color 属性，值类型为 Color;

• FillOpacity - Fill 对象的不透明度属性，值类型为 [ 0 .. 100] 范围内的数字;

• StrokeColor - Stroke 对象的 color 属性，值类型为 Color;

• StrokeOpacity - Stroke 对象的不透明度属性，值类型为 [ 0 .. 100] 范围内的数字;

• StrokeWidth - 具有 Stroke 对象属性的 stroke，值类型为 float

• TrAnchor - 转换 Layer 和 Group 对象的 Anchor 属性，值类型为 [x，y] 数组;

• TrPosition - Layer 和 Group 对象的 Transform Position 属性，值类型为 [x，y] 数组 - 点;

• TrScale - Layer and Group 对象的变换比例属性，值类型为 [x，y] 数组，x 和 y 是 range[0 ..100];

• TrRotation - Layer and Group 对象的 Transform Scale 属性，值类型为 Angle;

• TrOpacity - 转换 Layer and Group 对象的 Opacity 属性，值类型为 [ 0 .. 100] 范围内的数字。

Setting Values

动画值可以在设计时使用元素内 <lottie> 的声明集 <param path="..." prop="..." value="..." /> 进行设置，也可以在运行时通过调用 el.lottie.update(path,prop,value) 方法进行设置。