前回は基本的なアニメーションということで,
今回,
なお,
移動, 拡大・ 縮小, そして回転
前回のサンプルで移動のアニメーションを使用したように,
そのため,
これらのクラスのスーパークラスであるTransitionクラスはnodeアトリビュートを持ちます。このnodeアトリビュートが回転や移動の対象となります。
リスト1
var node: Node = Group { ... };
var rotateTransition = RotateTransition {
// 回転の対象ノード
node: node
// 回転角度の設定
// 0度から720度回転させる
fromAngle: 0
byAngle: 720
// これらのアトリビュートは Timeline クラスに準ずる
duration: 5s
repeatCount:4
interpolate: Interpolator.EASEBOTH
autoReverse: true
};
// 回転の開始
rotateTransition.play();
回転の角度を設定するには,
回転の中心はノードの中心です。もしノードの中心以外の点を回転中心にしたい場合は,
durationアトリビュートやrepeatCountアトリビュートなどはTimelineクラスを使用した時と同じです。補間方法はKeyFrameクラスではtween演算子を使用しましたが,
最後にアニメーションを開始させるため,
次にノードを表示する部分を示します。
リスト2
Stage {
title: "Rotate Sample"
scene: Scene {
width: 200
height: 200
content: [
node
]
}
}
特に難しい部分は何もありません。単に変数nodeを描画しているだけです。ここでは変数nodeは6つの円としました。
リスト3
def radian = Math.PI / 180.0;
var node: Node = Group {
translateX: 100
translateY: 100
// 6個の円
content: [
for (angle in [0..300 step 60]) {
Circle {
centerX: 50.0 * Math.cos(angle * radian);
centerY: -50.0 * Math.sin(angle* radian);
radius: 35
fill: Color.PINK
stroke: Color.RED
}
},
// 重ね順を調節するための半円
Arc {
centerX: 50,
centerY: 0
radiusX: 35,
radiusY: 35
startAngle: 180,
length: 180
type: ArcType.OPEN
fill: Color.PINK
stroke: Color.RED
}
]
};
最後のArcオブジェクトがないと,
実行結果を図1に示します。いつもと同じようにこの図もアプレットページへのリンクになっています。これ以降も実行結果の図はアプレットのページへのリンクになっています。また,