Apple Developer Connection
Advanced Search
Member Login Log In | Not a Member? Contact ADC
ADC Home > Reference Library > Guides > Apple Applications > Dashboard > Dashboard Programming Topics >

アニメーションの使用

Appleは、フェーディングする要素や連続する画像をアニメーション化する際に役立つ、アニメーションタイマーとして機能するJavaScriptクラスを提供しています。AppleAnimatorおよびAppleAnimationというクラスで、Mac OS X v10.4.3以降に含まれているApple Classのクラスです。

AppleAnimatorとAppleAnimationも含めて、すべてのApple Classの使用についての詳細は、“Apple Classの紹介”を参照してください。

In this section:

アニメーションに関する作業
HTMLにおけるAppleアニメータおよびアニメーション
JavaScriptにおけるAppleアニメータおよびアニメーション
Apple Rectangle Animationサブクラス


アニメーションに関する作業

ウィジェットにアニメーションを追加するには、AppleAnimatorクラスとAppleAnimationクラスを使います。AppleAnimatorは、所定の時間内に、指定された間隔で作動するタイマーです。AppleAnimationには一連の値と1つのハンドラが含まれています。AppleAnimationがAppleAnimatorに追加されると、アニメータが作動するたびに、アニメーションの範囲内の値がハンドラに渡されます。アニメータとアニメーションを使用するには、次のことを行う必要があります。

HTMLにおけるAppleアニメータおよびアニメーション

AppleAnimatorオブジェクトとAppleAnimationオブジェクトをJavaScriptで宣言して使うには、ウィジェットのHTMLファイルにこのクラスを含める必要があります。Mac OS X v.10.4.3以前のバージョンとの下位互換性を計画している場合は、“下位互換性のある使いかた”の指示に従い、次のパスを含めます。

<script type='text/javascript' src='AppleClasses/AppleAnimator.js' charset='utf-8'/>

ウィジェットの動作条件をMac OS X v.10.4.3以上にすることを計画している場合は、次のように、/System/Library/WidgetResources/の中の該当する場所にあるAppleAnimationクラスを含めます。

<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleAnimator.js' charset='utf-8'/>

JavaScriptにおけるAppleアニメータおよびアニメーション

ウィジェットのJavaScript内でアニメーションタイマーと関連する一連のアニメーションを設定するには、次の2つの方法があります。

完全セットアップと使用方法

AppleAnimatorクラスとAppleAnimationクラスは、実際のアニメーションを提供するわけではなく、ウィジェットのユーザインターフェイスの要素をアニメーション化する際に利用できる数値を提供します。たとえば、時間の経過に伴ってフェード、リサイズ、変化する要素がある場合、これらのクラスを使って時間の経過に合わせて関連する値を提供することができます。

AppleAnimatorクラスは、タイマーとして機能するオブジェクトを提供します。そのコンストラクタは2つのパラメータを受け取ります。すなわち、タイマーが作動する時間の長さと、タイマーが作動する間隔です（どちらもミリ秒単位）。

currentAnimator = new AppleAnimator(500, 13);

このインスタンスではタイマーは、アクティブ化されると500ミリ秒続き13ミリ秒ごとに作動します。

タイマーを作成したら、同様にアニメーション範囲も作成する必要があります。AppleAnimationクラスのコンストラクタは、開始の値、終了の値、ハンドラの3つの値を受け取ります。

currentAnimation = new AppleAnimation(0.0, 1.0, animationHandler);

このアニメーションは0.0から1.0の間の値を提供し、タイマーが作動するたびにanimationHandlerというハンドラ関数を呼び出します。このアニメーションのハンドラは、4つの引数を受け取る必要があります。すなわち、 呼び出されるアニメーション、アニメーションの現在の値、アニメーションの開始の値、および終了の値です。

function animationHandler(animation, current, start, finish)
{
... // 現在の値を使って何か処理をする
}

アニメーションを準備したら、次にこれをタイマーと関連付ける必要があります。

currentAnimator.addAnimation(currentAnimation);

アニメーションをタイマーに追加または関連付けることにより、そのタイマーは作動するたびにアニメーションのハンドラを呼び出します。タイマーが作動すると、タイマーの期間にマップされているアニメーションの範囲に基づき、その期間に渡って適切な値が提供されます。各アニメータを複数のアニメーションと関連付けることができます。それにより1つのタイマーで複数の値セットを管理できます。

これでタイマーとアニメーションを実行する準備ができました。タイマーを開始するには、次のように開始メッセージを送信します。

currentAnimator.start();

さらに、アニメータに対してstop()を呼び出すことにより任意のポイントで停止できます。

currentAnimator.stop();

クイックセットアップ

前のセクションでは、AppleAnimatorタイマーとAppleAnimationの完全セットアップを実行する方法を説明しました。その方法により、1つのアニメータに複数のアニメーションが関連付けられます。また、1つのアニメーションを1つのアニメータに関連付ける場合にも適しています。

しかし、AppleAnimatorコンストラクタを使って、通常のパラメータのほかにアニメーションの仕様を指定することができます。これにより別個のAppleAnimationオブジェクトを用意する手間を省くことができ、アニメーションを1つだけ必要とする場合に役立ちます。

AppleAnimator(duration, interval, start, finish, handler)

最初の2つの値、durationとintervalは、タイマーの期間とタイマーが作動する頻度です。その次の2つの値、startとfinishは、タイマーが実行すると計算される数値範囲の開始と終了の値です。最後に、handlerは指定する関数の名前であり、タイマーが作動するたびに呼び出されます。

function handler(animation, current, start, finish)
{
... // 現在の値を使って何か処理をする
}

前述のアニメーションハンドラの場合と同様に、このハンドラは、4つの引数を受け取る必要があります。呼び出されるアニメーション、アニメーションの現在の値、アニメーションの開始の値、および終了の値です。

アニメーションとアニメータのタイマーを開始するには、アニメータに対してstart()を呼び出します。

currentAnimator.start();

アニメータのタイマーが開始すると、アニメータの期間が終了するまで、指定された間隔ごとにhandler関数が呼び出されます。handlerに渡されるcurrentは、startからfinishの間で増加している値を反映します。アニメータのタイマーを、期限終了の前に停止するには、stop()を呼び出します。

currentAnimator.stop();

Appleアニメータおよびアニメーションのプロパティ

次のプロパティをAppleAnimatorオブジェクトで利用できます。

プロパティ

説明

animator.duration

アニメータのタイマーの期間。

animator.interval

アニメーションのハンドラが呼び出される間隔。

animator.animations

アニメータに関連付けられているApple Animationオブジェクトの配列。

animator.timer

タイマーの現在の値。

animator.oncomplete

タイマーが終了したときに呼び出されるハンドラ。

次のプロパティをAppleAnimationオブジェクトで利用できます。

プロパティ

説明

animation.from

アニメーションの開始の値。

animation.to

アニメーションの終了の値。

animation.now

アニメーションの現在の値。

animation.callback

アニメーションのハンドラ。

Apple Rectangle Animationサブクラス

AppleRectangleAnimationサブクラスは、2つの矩形間のトランジションの際に役立つ値を提供します。AppleRectangleAnimationは、AppleAnimatorタイマーを使ってそのハンドラをトリガしますが、開始の矩形と終了の矩形を、Apple RectangleとしてAppleRectクラスを使って指定する必要があります。

AppleRectは次のように定義されます。

AppleRect(left, top, right, bottom)

矩形は、左上と右下の座標によって指定されます。AppleRectオブジェクトを新規作成するには、そのコンストラクタを呼び出し、結果のオブジェクトを変数に代入します。

startingRect = new AppleRect( 0, 0, 100, 100 );

開始と終了の矩形を作成したら、その2つのAppleRectオブジェクト、および矩形のアニメーションのアニメータタイマーが作動するときに呼び出すハンドラの名前を渡してAppleRectAnimationオブジェクトを作成します。

currentRectAnimation = new AppleRectAnimation( startingRect, finishingRect, rectHandler );

この矩形アニメーションのハンドラは、4つの引数を受け取る必要があります。すなわち、 このハンドラをトリガした矩形アニメーション、現在の矩形の値を持ったAppleRectオブジェクト、開始のAppleRectオブジェクト、および終了のAppleRectオブジェクトです。

function rectHandler( rectAnimation, currentRect, startingRect, finishingRect );

AppleRectangleAnimationオブジェクトが作成されたら、新しいAppleAnimatorオブジェクトを作成し、これを自分の矩形アニメーションに関連付け、アニメータのタイマーを開始します。

currentAnimator = new AppleAnimator(500, 13);
currentAnimator.addAnimation(currentRectAnimation);
currentAnimator.start();

Apple Rectangle AnimationおよびApple Rectangleのプロパティ

次のプロパティをAppleRectangleAnimatorオブジェクトで利用できます。

プロパティ

説明

rectAnimation.from

アニメーションの開始の矩形。

rectAnimation.to

アニメーションの終了の矩形。

rectAnimation.now

アニメーションの現在の矩形。

rectAnimation.callback

アニメーションのハンドラ。

次のプロパティをAppleRectオブジェクトで利用できます。

プロパティ

説明

rectangle.left

矩形の左上角の左の値。

rectangle.top

矩形の左上角の上の値。

rectangle.right

矩形の右下角の右の値。

rectangle.bottom

矩形の右下角の下の値。




Last updated: 2006-08-07

Did this document help you?
Yes: Tell us what works for you.

It’s good, but: Report typos, inaccuracies, and so forth.

It wasn’t helpful: Tell us what would have helped.
Get information on Apple products.
Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Copyright © 2007 Apple Inc.
All rights reserved. | Terms of use | Privacy Notice