MyGo 中文文档

外观

Loading(加载指示器) ​

loading 插件带有 loading.dev 的 29 个加载指示器 ——Jakub Krehel 的 React 库 loading-dev——供原生 UI 使用:弧、环、点、条 和方块,由 MyGo 自己绘制,每个都是一个在显示时运动的元素。它们的外观和运动 与 loading.dev 的相同:同样的形状、关键帧和缓动函数,同样的节奏。它全部是 Go:没有 JavaScript 包,也没有需要 mygo.Use 的东西。有 CSS 的页面可以使 用 loading-dev 本身。

examples/loading 展示全部,连同它们的选项:

go
import "github.com/egoist/mygo/plugins/loading"

ui.Row(c).Gap(8).AlignItems(ui.Center).Children(func() {
	loading.Arc(c).Label("Saving")
	ui.Text(c, "Saving…")
})

指示器 ​

函数绘制的内容
Arc一条开口的笔画绕圈旋转。
Atom三个环在一个圆内翻滚。
Blocks九个方块在网格上沿一道扫过的轨迹收缩和放大。
BouncingDots三个错开的点上下弹跳。
Cascade三条嵌套的弧展开成螺旋,然后啪地回到一条线上。
CircularDots八个点排成一个环,最亮的一个绕圈移动。
Classic十二条渐隐的条按径向图案排列。
ClassicV2八个刻度排成一个环,依次点亮。
Clock一根指针在一个暗淡的表盘上扫过。
Comet一个完整的环淡入它的尾迹。
Compass四个刻度一次转四分之一圈。
Dual两条弧朝相反方向旋转。
Eclipse两个点交换位置,一个从另一个后面经过。
Flip一个方块绕一根轴翻转,然后绕另一根。
Gather四个方块聚拢、旋转,再散开。
Leap三个点排成一行,最后一个跳到最前。
LinearDots三个点从左到右依次点亮。
Loadingloading.dev 的标志,它最亮的一段绕环转圈。
Morph一个方块在旋转中圆化成圆形,再变回来。
Orbit一条渐隐的半环绕一个点旋转。
Pulse一个环从一个点向外荡开。
Radar一道渐隐的光束在一个暗淡的盘面上扫过。
Ring一条弧在一个暗淡的圆里旋转。
Ripple三个环从中心向外扩散。
Slide三个点滑进一个方块的空角。
Snake一条弧在绕行中伸展和收缩。
Swirl一个明亮的格子在方块内追逐自己的尾迹。
Trace一条短划描出一个圆角方块的轮廓。
Wave五条条子像波浪一样起落。

loading.All() 连同它们的名字列出它们,供一个画廊或让用户选择一个的设置 使用:

go
for _, s := range loading.All() {
	ui.Column(c).Gap(8).Center().Children(func() {
		s.New(c).Label(s.Name)
		ui.Text(c, s.Name)
	})
}

选项 ​

每个函数接受 loading.Options,它的零值是 loading.dev 的默认值:

go
loading.Ring(c, loading.Options{
	Size:     32,                 // DIPs high: 20 by default
	Color:    t.Accent,           // the theme's text color by default
	Duration: 600 * time.Millisecond, // one cycle: the indicator's own by default
	Easing:   loading.EaseInOut,
	Cap:      loading.FlatCap,
})
  • Size 是指示器的高度,也是它的宽度,除了 BouncingDots 和 LinearDots,它们是宽度为高度 1.15 和 0.9375 倍的点行。元素自身的大小 (由 Size、Fill 或父布局给出的)会把绘制居中缩放以适应。
  • Color 是它绘制的颜色,微弱的部分(环的轨道、淡出的点)以它们的透明 度使用它。零值是主题的 Text。
  • Duration 是它的运动的一个周期,每个指示器不同:Arc 是 800 毫秒, Slide 是 2.4 秒。
  • Paused 让它停在当前;设回 false 后,它从那里继续。
  • Easing 是旋转的指示器(Arc、Atom、Clock、Comet、Dual、 Orbit、Radar、Ring、Snake、Trace)如何转圈:Linear 匀速, EaseInOut 在每圈末尾减速,Stacked 两者叠加,一圈两个周期,中间快。
  • Cap 决定 Arc、Cascade、Dual、Ring、Snake 和 Trace 笔画 的端头:RoundCap 或 FlatCap。
  • Sweep 是 Blocks 的方块的顺序:Diagonal、Rows 或 Columns。
  • Direction 让 Ripple 的环从中心向外(RippleOut)或向中心 (RippleIn)扩散。
  • Origin 让 Wave 的条从中间(WaveCenter)或底部(WaveBottom) 生长。

运动与无障碍 ​

指示器每次被绘制时请求一帧,像一个旋转器那样(Painter.AnimationFrame), 并且只在它显示时:不在视野内的不绘制也不请求,它也不会重新构建视图。每个指示器 在它首次显示时开始它的周期,如同 CSS 动画。

当桌面要求更少的运动时(ui.Preferences.ReduceMotion:macOS 的"减弱动态 效果"、Windows 的动画效果或 GNOME 的动画被关闭),指示器以 loading.dev 为 减弱动效准备的姿势静止,例如变暗的点或环环相扣的环,并且不请求帧。

辅助技术看到一个长度未知的进度指示器。用 Label 为它命名,说明在加载什么: loading.Ring(c).Label("Loading messages")。