JavaFX/AnimatedIcon のバックアップ(No.5)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- 現在との差分 - Visual を表示
- ソース を表示
- JavaFX/AnimatedIcon へ行く。
TITLE:JavaFX Script でアイコンのアニメーション
JavaFX Script でアイコンのアニメーション
編集者:Terai Atsuhiro
作成日:2006-05-18
更新日:2018-07-09 (月) 17:16:44
概要
JavaFX ScriptでFireFox風のAnimated Icon を作成します。
サンプルコード
import javafx.ui.*;
import javafx.ui.canvas.*;
public class Timer {
private attribute rotationValue: Number;
public attribute running: Boolean;
}
attribute Timer.rotationValue = bind if running
then [0,45..360-45] dur 1040 linear
while running continue if true else 0;
class CircleRtation extends CompositeNode {
public attribute animating: Boolean;
attribute radius: Number;
}
attribute CircleRtation.radius = 6;
operation CircleRtation.composeNode() {
var r = 2*radius;
var c = 2*r+5; //2>(sqrt(2)+0.5), margin=5+r*(1.5-sqrt(2))
var t = Timer {running: bind animating};
return Group {
transform: bind [rotate(t.rotationValue, c, c), translate(c, c)]
content: [foreach (i in [1..8]) Circle {
radius: this.radius,
fill: bind if hover then red else green,
opacity: 0.1*i,
transform: [translate(-r, -r), rotate(i*45, r, r)]
}, Circle {
fill: Color{ opacity: 0 }
radius: 2*r
onMousePressed: operation(e:CanvasMouseEvent) { t.running = false; }
onMouseReleased: operation(e:CanvasMouseEvent) { t.running = true; }
}]
};
}
var cr = CircleRtation{ animating: true };
Frame {
title : "JavaFX - Icon Animation"
width : 320
height : 120
content: Canvas { content: cr }
centerOnScreen: true
visible: true
onClose: operation() {
cr.animating = false;
}
};
解説
準備中