guide.md 2.5 KB
类型
Loading 目前支持四种类型，分别是单色、双色、四色和其他，通过 type 的第一个值来区分，如 1_0、2_0、4_0、o_0，第二个值表示此类型的编号。
更多的 Loading 将会在后续版本中逐步增加，也欢迎参与开发。
尺寸
Loading 的容器大小由 height 与 width 决定，除了少数几个需要固定尺寸，大多数 Loading 都会自动铺满给定的容器，请根据自己的需求调整大小。
主题色
当使用单色模式时，可以通过 theme 来控制是否使用主题色，颜色会自动适配亮色与暗色模式，请参考示例。
反差色
通常情况下，页面颜色是浅色系颜色，Loading 会使用深色系颜色。但在一些场景，比如 Toast 组件内背景色与页面颜色深浅恰好相反，比如默认按钮背景色偏深色等情况，在这些组件内部使用 Loading 时，可以通过 inverse 来控制颜色，使其恰好与页面的亮暗色相反，请参考示例。
自定义颜色
当需要传入自定义颜色时，可以通过 customColor 来传入颜色数组，数组长度与 type 的第一个值相同，如 1_0 需要传入一个颜色，2_0 需要传入两个颜色，4_0 需要传入四个颜色，请参考示例。
注：当使用自定义颜色时，theme 和 inverse 会失效。
四色默认颜色
当使用四色模式时，Loading 内部默认的四个颜色分别是红色（#DA1414）、绿色（#11BB8D）、紫色（#7356BF）、黄色（#FFC043），对应 STDF 颜色系统的 error、success、purple、yellow，如果需要自定义颜色请传入长度为 4 的 customColor，请参考示例。
动画速度
Loading 的动画速度可以通过 speed 来控制，基数为 1 表示正常速度，speed 的值越大，动画速度越快。请使用大于 0 的数值，但不建议使用过大的数值，否则可能会导致动画过快，徒增功耗还影响用户体验。
部分 Loading 因为动画的特殊性，当 speed 的值会影响元素之间连贯性时，会忽略 speed 的值，使用默认值。
懒动画
Loading 自带了一系列过渡动画，极端情况下，当页面同时有大量过渡效果时，考虑到设备性能与动画帧率等问题，Loading 通过 lazyAnimation 默认开启了懒动画，即 Loading 组件不在页面可视范围内时会暂停动画，当然你也可以单独设置。
感谢
部分动效灵感来自 德育处主任，特此感谢。