小部件动画,Fyne笔记第8篇。
目录
这是我的Fyne学习笔记系列第8篇。
熟悉前端的朋友可能对css丰富的动画印象深刻,相比之下fyne的动画则显得不同。
让我们从它的定义入手
type Animation struct {
AutoReverse bool
Curve AnimationCurve // func(float32) float32
Duration time.Duration
RepeatCount int
Tick func(float32)
}
AutoReverse配置动画是否动态反转,Duration控制动画总时间,RepeatCount控制动画重复次数,默认为1
Curves是关键的字段,控制动画呈现的效果,它接收一个浮点数(当前进度值),0.0表示开始,1.0表示结束,返回调整后的当前进度值。这用来实现加速进入等效果。
一个示例
package main
import (
"fmt"
"time"
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/widget"
)
func main() {
a := app.New()
w := a.NewWindow("Button 动画")
w.Resize(fyne.NewSize(400, 200))
btn := widget.NewButton("点我缩放", nil)
baseSize := fyne.NewSize(140, 50)
btn.Resize(baseSize)
// 动画:0→1 放大,AutoReverse 会自动 1→0 缩回来
anim := fyne.NewAnimation(300*time.Millisecond, func(p float32) {
scale := 1.0 + 0.2*p // 1.0 → 1.2 然后 1.2 → 1.0
btn.Resize(fyne.NewSize(
baseSize.Width*scale,
baseSize.Height*scale,
))
})
anim.Curve = fyne.AnimationEaseOut
anim.AutoReverse = true // 关键:自动反转
btn.OnTapped = func() { anim.Start() }
w.SetContent(container.NewWithoutLayout(btn))
w.ShowAndRun()
}