Fyne   Animation

ホーム   Goチュートリアル

Animation

この章では、Widgetをアニメーションする方法について説明します。

アプリケーションディレクトリの作成

ターミナルを起動して、次のようにしてアプリケーション作成の下準備をします。 ディレクトリはどこでも構いませんが、Documents などに go か fyne などのディレクトリを作って、さらに次のようにディレクトリを作るのが良いでしょう。

mkdir Animation
cd Animation
go mod init example.com/Animation

// 通常は、example.com の部分を、あなたが持っているURLにします。
// デフォルトでは、スラッシュ(/)の次の名前がアプリの名前になります。
    

コードの記述

次のファイルを記述します。main 関数を記述しているファイルは、 main.go とするのが一般的ですが、好きなファイル名にしても構いません。

animation.go

package main

import (
	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/layout"
	"fyne.io/fyne/v2/theme"
	"fyne.io/fyne/v2/widget"
	"image/color"
	"time"
)

const (
	y    float32       = 95
	dura time.Duration = time.Second * 3
)

var (
	x1   float32 = 195
	x2   float32
	rect fyne.CanvasObject = canvas.NewRectangle(color.RGBA{0xaa, 0xaa, 0xff, 0xff})
	call                   = func(p fyne.Position) {
		rect.Move(p)
		canvas.Refresh(rect)
	}
)

func moveL() {
	x1 = rect.Position().X
	x2 = 0
	oldPos := fyne.NewPos(x1, y)
	newPos := fyne.NewPos(x2, y)
	move := canvas.NewPositionAnimation(oldPos, newPos, dura, call)
	move.Start()
}

func moveR() {
	x1 = rect.Position().X
	x2 = 390
	oldPos := fyne.NewPos(x1, y)
	newPos := fyne.NewPos(x2, y)
	move := canvas.NewPositionAnimation(oldPos, newPos, dura, call)
	move.Start()
}

func keyTyped(e *fyne.KeyEvent) {
	switch e.Name {
	case fyne.KeyLeft:
		moveL()
	case fyne.KeyRight:
		moveR()
	}
}

func main() {
	app := app.New()
	win := app.NewWindow("Animation")
	win.SetPadded(false)
	win.Resize(fyne.NewSize(400, 200))
	win.SetFixedSize(true)
	rect.Resize(fyne.NewSize(10, 10))
	rect.Move(fyne.NewPos(x1, y))
	left := widget.NewButtonWithIcon("", theme.NavigateBackIcon(),
		func() { moveL() })
	right := widget.NewButtonWithIcon("", theme.NavigateNextIcon(),
		func() { moveR() })
	box := container.New(layout.NewHBoxLayout(),
		left, layout.NewSpacer(), right)
	content := container.New(layout.NewBorderLayout(nil, box, nil, nil),
		box, container.NewWithoutLayout(rect))
	win.SetContent(content)
	win.Canvas().SetOnTypedKey(keyTyped)
	win.ShowAndRun()
}
	

パッケージの読み込み

コードの記述が完了しましたら、次のようにして実行します。

go run animation.go

// 次のようにパッケージをインストールしてくださいという表示が出ます。
animation.go:4:2: no required module provides package fyne.io/fyne/v2; to add it:
	go get fyne.io/fyne/v2
animation.go:5:2: no required module provides package fyne.io/fyne/v2/app; to add it:
	go get fyne.io/fyne/v2/app
animation.go:6:2: no required module provides package fyne.io/fyne/v2/canvas; to add it:
	go get fyne.io/fyne/v2/canvas
animation.go:7:2: no required module provides package fyne.io/fyne/v2/container; to add it:
	go get fyne.io/fyne/v2/container
animation.go:8:2: no required module provides package fyne.io/fyne/v2/layout; to add it:
	go get fyne.io/fyne/v2/layout
animation.go:9:2: no required module provides package fyne.io/fyne/v2/theme; to add it:
	go get fyne.io/fyne/v2/theme
animation.go:11:2: no required module provides package fyne.io/fyne/v2/widget; to add it:
	go get fyne.io/fyne/v2/widget

// 指示のとおりインストールします。
go get fyne.io/fyne/v2
go get fyne.io/fyne/v2/app
go get fyne.io/fyne/v2/canvas
go get fyne.io/fyne/v2/container
go get fyne.io/fyne/v2/layout
go get fyne.io/fyne/v2/theme
go get fune.io/fyne/v2/widget

// もう一度実行してみます。
go run animation.go
    

実行結果

デフォルトでは、Windowsの場合は白いウィンドウ、macOSとLinuxの場合は、 黒いウィンドウになります。

← ボタンをクリックするか、キーボードの ← キーを押すと、水色の四角形が左にアニメーションします。

→ ボタンをクリックするか、キーボードの → キーを押すと、水色の四角形が右にアニメーションします。

アプリケーションのパッケージ化

アプリケーションのパッケージ化は、ダブルクリックで起動する、 アイコンのついたファイルにすることです。

アイコンを自作するか、次のサイトなどからお気に入りのアイコンをダウンロードします。 大きさは一番大きい 512px のものを、種類は png にします。Fyne では png 形式のファイルしかアイコンに変換できないみたいです

フリーアイコンSVG、PNG、ICO、ICNS

アイコンの準備ができましたら、Form ディレクトリの中に入れます。 そしてターミナルに次のようにコマンドしてパッケージ化します。

fyne package -os darwin -icon leaf.png

// -os のところは、Windows の場合は windows、macOS の場合は darwin、Linux の場合は linux にします。
// -icon のところは、あなたが png ファイルにつけた名前にします。
    

コード説明

コード説明は一旦割愛して、先へ進みます。また戻ってきてコード説明をしたいと思います。

ホーム   Goチュートリアル   目次