跳到正文

内置加载动画 ​

LoaderKit 内置了 50 个加载动画,在每个平台上名称、参数和动效都完全一致。点击任意一个即可打开面板:调整参数、颜色、速度和尺寸,然后复制对应平台的代码。

内置加载动画还是进度指示器?

  • 始终没有百分比(等待请求、下拉刷新):用本页的内置加载动画。
  • 任务有进度,哪怕一开始还不知道(下载、上传、处理文件):用进度指示器。先以不确定状态开始(value 为 null,Swift 中为 nil),知道进度后再设置 value。始终是同一个组件,其他代码都不用改。

名称与参数 ​

目前只有两个内置动画支持参数。其余动画的设计是固定的,只能通过 color、colors、尺寸和速度来调整。

加载动画参数(默认值)周期(秒)
Atom无1.5
AudioEqualizer无4.3
BallBeat无0.7
BallClipRotate无0.75
BallClipRotateMultiple无1
BallClipRotatePulse无1
BallDoubleBounce无2
BallFall无1
BallGridBeat无1
BallGridPulse无1
BallHelix无1.8
BallHoneycomb无1.4
BallMerge无1.4
BallPulsecount(3)、minScale(0.3)0.75
BallPulseRise无1
BallPulseSync无0.6
BallRotate无1
BallRotateChase无1.5
BallScale无1
BallScaleMultiple无1
BallScaleRipple无1
BallScaleRippleMultiple无1.25
BallSpinFadeLoadercount(8)、minScale(0.4)、minOpacity(0.3)1
BallSquareSpin无1
BallTrianglePath无2
BallZigZag无0.7
BallZigZagDeflect无1.5
ChasingDots无2
CircleStrokeSpin无1.7
CubeTransition无1.6
JellyBox无0.9
LineScale无1
LineScaleParty无1
LineScalePulseOut无1
LineScalePulseOutRapid无0.9
LineSlide无1.5
LineSpinFadeLoader无1.2
NewtonCradle无1.2
Orbit无1.9
Pacman无1
Radar无2
RunningDots无2
SemiCircleSpin无0.6
SquareGridFlip无1.6
SquareGridWave无1.3
SquareSpin无3
Timer无4
TriangleOrbit无2.1
TriangleSkewSpin无3
TripleArcSpin无2.4

周期指速度为 1 时播放一轮的时长。用 speed 可以调快或调慢。

参数说明 ​

参数加载动画含义
countBallPulse一行中球的个数。四舍五入取整,最小为 1。
minScaleBallPulse脉冲过程中球的最小缩放比例,取值 0 到 1。
countBallSpinFadeLoader圆环上球的个数。四舍五入取整,最小为 1。
minScaleBallSpinFadeLoader球淡出时的最小缩放比例。
minOpacityBallSpinFadeLoader球淡出时的最低不透明度。

如果传入的参数某个加载动画并没有声明,它会被直接忽略,所以切换加载动画时可以放心沿用同一组参数。代码示例见自定义。

在运行时列出所有名称 ​

ts
import { BUILTIN_INDICATOR_NAMES } from '@loader-kit/web';

console.log(BUILTIN_INDICATOR_NAMES); // ['Atom', 'AudioEqualizer', ...]
kotlin
import io.github.maitrungduc1410.loaderkit.BuiltinIndicators

BuiltinIndicators.names                 // List<String>
BuiltinIndicators["BallPulse"]          // IndicatorSpec?,名称未知时为 null
swift
import LoaderKit

IndicatorSpec.builtinNames              // [String]
IndicatorSpec.builtin(named: "BallPulse")
csharp
using LoaderKit;

foreach (var name in BuiltinIndicators.Names) Console.WriteLine(name);
var spec = BuiltinIndicators.Get("BallPulse");

未知名称 ​

传入未知的名称绝不会导致崩溃。视图什么都不画,并报告问题:

平台错误报告位置
WebLoaderKitView 的 specError、onError 选项、<loader-kit> 的 loaderkit-error 事件
Android ViewonError 回调(未设置时写入日志)
ComposeLogcat 中的一条警告
AppleLoaderKitView 的 specError
WindowsSpecError 和 SpecFailed 事件

致谢 ​

大部分内置加载动画的动效来自 NVActivityIndicatorView、loaders.css、DGActivityIndicatorView 和 SpinKit,其余的是专为 LoaderKit 设计的。详见仓库中的 THIRD_PARTY_NOTICES.md。

基于 MIT 许可证发布。