秋来冬风的博客

小部件动画,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()
}

评论区

评论加载中

Tags:
Categories: