Skip to content
On this page

Animation 动画

Fyne包含一个动画框架,允许您随时间将画布属性从一个值平滑地转换到另一个值。动画可以包含任何代码,这意味着可以管理任何类型的对象属性,但也有针对大小、位置和颜色的内置动画。

通常使用画布包的内置助手(如NewSizeAnimation)创建动画,并对创建的动画调用Start()。您可以将动画设置为重复或自动反转,如下所示。

让我们先看一个逐渐改变矩形填充颜色的彩色动画。在下面的代码示例中,我们设置了一个矩形作为窗口的内容,正如我们在前面的代码示例所做的那样。最大的区别是我们在显示窗口之前开始的动画。使用NewColorRGBAAnimation创建动画,该动画将颜色通道从定义的红色状态转换为蓝色,这需要2秒(指定的持续时间)。

go
package main

import (
	"image/color"
	"time"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
)

func main() {
	a := app.New()
	w := a.NewWindow("Hello")

	obj := canvas.NewRectangle(color.Black)
	obj.Resize(fyne.NewSize(50, 50))
	w.SetContent(container.NewWithoutLayout(obj))

	red := color.NRGBA{R:0xff, A:0xff}
	blue := color.NRGBA{B:0xff, A:0xff}
	canvas.NewColorRGBAAnimation(red, blue, time.Second*2, func(c color.Color) {
		obj.FillColor = c
		canvas.Refresh(obj)
	}).Start()

	w.Resize(fyne.NewSize(250, 50))
	w.SetPadded(false)
	w.ShowAndRun()
}

也可以同时设置多个属性的动画。如果你仔细看,你会发现我们将矩形添加到一个没有布局的容器中,这意味着我们可以手动移动或调整对象的大小。让我们添加一个新的位置动画,它将在窗口中移动矩形,并自动反转。

go
move := canvas.NewPositionAnimation(fyne.NewPos(0, 0), fyne.NewPos(200, 0), time.Second, obj.Move)
move.AutoReverse = true
move.Start()

因为CanvasObject的Move()函数需要一个fyne.Position参数,Position动画回调也是如此,所以我们可以简单地传递方法名,而不是创建一个新函数。如果您将上面的代码添加到第一个动画下面,您将看到对象在改变颜色的同时在窗口中移动!