http://developer.yahoo.net/yui/animation/index.html
とりあえず訳せるだけ、訳していきます。自分でサンプル作るのはまた後で。
？マークが入っているところは、よく分からなかった部分です。間違っていたらごめんなさい
- 基本的なアニメーション
- イージング効果を適用するには
- 複数の属性を使ってアニメーションさせる
- イベントのリスニング
-Getting Started
To use the Animation component, download the component package and install the JavaScript file on your web site. Include the source file in your web page with the script tag:
<!-- Namespace source file -->
<script src = "ｈttp://yourwebsite.com/util/YAHOO.js" </script>
<!-- Animation source file -->
<script src = "ｈttp://yourwebsite.com/util/animation.js" ></script>
The base Animation class is defined by the YAHOO.util.Anim class.
追記：下記のクラスもインポートしてください。これを入れないとサンプルスクリプトがうまく動かないみたいです。報告が遅くなってすいません。（英訳にはインポートしろって載ってないのに･･･泣）
-はじめに
アニメーション・クラスのベースは、YAHOO.util.Anim.classで定義されます。
Basic Animation
This example demonstrates how to create a simple animation that increases the height of a HTML element:
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} });
myAnim.animate();
The first line of this code creates a new instance of the Anim base class. The constructor has two required parameters: the target element, and an object indicating the attributes of that object to animate.
The attributes object indicates the CSS attribute of the element that should be animated, and defines the range of values that make up that animation, for example, "from: 1, to: 100, by: 10, unit: 'px'". In this example, the height attribute of the element will be animated; there is no "from" variable so the animation starts from the current value; the value of "to" is 10 so the animation stops when the height is 10. The other options are by (the number to increment values by) and unit (the units to use, default pixels).
The Anim object constructor also takes two optional parameters, not used here: duration and method. By default the duration of the animation is 1 second; the method is EaseNone (no acceleration or deceleration as the animation starts or completes).
The animate method actually starts the animation in motion.
基本的なアニメーション
サンプルは、HTML要素の高さ属性を増加させるシンプルなアニメーションのやり方です。
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} });
myAnim.animate();
＊ターゲットとなる要素のスタイルシートが未定義の場合、エラーが出ます。widthやheightを明示的に定義しておく必要があるようです。
コード一行目について：
Animベースクラスの新しいインスタンスを生成します。コンストラクタは２つのパラメーターを必要とします。
-ターゲットとなる要素
-アニメーションさせるオブジェクトの属性を示すオブジェクト?
属性オブジェクト?が示すのは、アニメーションさせる要素のCSS属性でです。属性オブジェクトは、アニメーションの作り上げる値の範囲を定義します。
from: 1, to: 100, by: 10, unit: 'px'
このサンプルスクリプトでは、高さ属性がアニメーションするのでしたね。サンプルでは"from"変数がないので、アニメーションは現在の値（＝ デフォルト値orアニメーションをスタートする段階での属性値）から始まります。"to"変数が１０になっているので、アニメーションは高さが１０になったときにストップします。他のオプションは"by"オプションは徐々にインクリメントする数値で と、"unit"オプションはオプション値の単位です。デフォルトの単位はピクセルとなります。
Animオブジェクト・コンストラクタは、さらに２つのパラメーターを追加的に受け取れます。"duration"(アニメーション持続時間？) と "method" です。"duration"のデフォルトは１秒間です。メソッドのデフォルトは"EaseNone"です（加減速のないアニメーション･･･モーション変化の割合が一定のアニメーションということですか･･･)
Animaメソッドによってアニメーションを開始します。
Applying Easing
This example demonstrates how to apply easing equations to control animation behavior. The easeOut method decelerates the animation as it nears completion.
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }, 1,
YAHOO.util.Easing.easeOut);
myAnim.animate();
- element:: 'test'
- style-property:: {height: { to:10} }
- duration:: 1
- easing::YAHOO.util.Easing.easeOut
This code differs from the code in the Getting Started example only in new arguments to the constructor. The previous example did not use the two optional duration and easing arguments to the Anim construction; this one does.
The duration argument indicates how long the animation should take from start to finish in seconds or frames. In this case the duration is 1.
The final argument is the method of the animation, that is, the method to compute the values that should be applied to the attribute at each step of the animation. This method can be used to create animation effects such as easing (acceleration and deceleration based on the position of the object). The animation method is often a method from the YAHOO.util.Easing class -- in this case, easeOut.
イージング効果を適用するには
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }, 1,
YAHOO.util.Easing.easeOut);
myAnim.animate();
- element:: 'test'
- style-property:: {height: { to:10} }
- duration:: 1
- easing::YAHOO.util.Easing.easeOut
アニメーションをコントロールするために コードをどんなふうに用いるのかをデモンストレートします。"easeOut"メソッドは、アニメーション完了に近づくにつれてモーションを減速させるメソッドです。
最初のサンプルと違って、コンストラクタに新しい引数を渡しています。一つ前のサンプルでは"duration" と "easing" をAnimコンストラクタで使いませんでしたが、今回は使います。
"duration"の引数は、アニメーションが何秒間もしくは何フレーム 続くかを示します。このサンプルの場合は1秒です。
最後の引数はアニメーションのメソッドを指定します。メソッドが計算した値は、アニメーションの各段階で属性に適用されます？このメソッドは「イージング」といったアニメーション効果を作り出すことが出来ます。（オブジェクトの位置に基づいてアニメーションが加速したり、減速したり）たいていのアニメーションメソッドはYAHOO.util.Easingクラスからひっぱって来ます。この場合は"easeOut"ですね。
-Animating Multiple Attributes
In this example, both the width and height of an HTML element are animated simultaneously.
var attributes = {
width: { to: 100 },
height: { to: 100 }
};
var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();
- style-property width: { to:100} ,
- style-property height : { to:100}
In this code:
The attributes object is defined separately from the Anim constructor, for convenience's sake, and assigned to a variable called attributes. There are two attributes to be animated here: width and height. Both are animated from their current values to a value of 100.
The YAHOO.util.Anim object is instantiated. Here the HTML element to be animated is once again 'test'; the attributes object is contained in the variable attributes.
The optional duration argument to the constructor is omitted, so the animation duration defaults to 1 second.
The optional method argument to the constructor is omitted, so the animation method defaults to "easeNone"
-複数の属性を使ってアニメーションさせる
このサンプルでは、HTML要素の幅と高さを同時にアニメーションさせています。
var attributes = {
width: { to: 100 },
height: { to: 100 }
};
var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();
- style-property width: { to:100}
- style-property height : { to:100}
- 他は省略
attribute変数を作っておいて、要素名と一緒にコンストラクタに渡す
利便性を考え、この属性オブジェクトはコンストラクタから切り離して、"attribute"変数として定義されています。ここでは２つの属性がアニメーションされます。"width"と"height"です。二つの値は 現在の設定値から100に変化します。（"to"変数で指定しているから---「ＡからＢへ」の英訳は「from A to B」ですね。)
・YAHOO.util.Animオブジェクトがインスタンス化されます。ここでアニメーションするHTML要素は'test'です。属性オブジェクトは変数の属性になります。
・オプションの"duration"引数は省略されています。なのでアニメーション時間のデフォルト値は１秒になります。
・オプションのメソッド引数は省略されています。なので、アニメーションメソッドはデフォルトの"easeNone"になります。
Listening for Events
The Animation component defines three events: onStart, onTween, and onComplete. Each of these events expose a subscribe method, enabling you to bind a callback function to that event.
var removeElement = function() {
var el = this.getEl();
el.parentNode.removeChild(el);
}var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }
1, YAHOO.util.Easing.easeOut);
myAnim.onComplete.subscribe(removeElement);
myAnim.animate();
In this example, you define a callback function called removeElement. The animation increments the HTML element the height of the element 'test' by 10 pixels. The subscribe method, called on the onComplete event, connects the removeElement callback to the onComplete event. And, finally, the animate method begin the animation.
イベントのリスニング
Animationコンポーネントは三つのイベントを定義します。
①onStart
②onTween
③onComplete
どのイベントも subscribe()メソッドを吐き出します。subscribe()メソッドはコールバック関数とイベントを結びつけることを可能にします。
//コールバック関数の定義 無名関数var removeElement = function() {
var el = this.getEl();
el.parentNode.removeChild(el);
}
//コンストラクタ
var myAnim = new YAHOO.util.Anim('test', { height: {to: 10} }
1, YAHOO.util.Easing.easeOut);
//イベントとコールバック関数を結びつける
//ここではsubscribe()メソッドがonCompleteイベントとremoveElement()を結びつけている
myAnim.onComplete.subscribe(removeElement);
myAnim.animate();
サンプルでは、コールバック関数 removeElementを定義しています。アニメーションはHTML要素である'test'要素の高さを10ピクセルずつ増加させます。subscribe()メソッドが、removeElementコールバック関数とonCompleteイベントを結びつけます。最後にanimate()メソッドでアニメーションを開始させます。
- subscribe()の引数には関数の参照を渡すとよいようだ。（無名関数を変数に閉じ込めた奴とか）
- subscribe()はイベントオブジェクトから引っ張り出してくる
obj.onStart.subscribe(hoge)
obj.onTween.subscribe(hoge)
obj.onComplete.subscribe(hoge)
Animating with Motion
The YAHOO.util.Motion extends the Anim base class to move an element along a set of points. Points are defined by arrays of x,y coordinates.
var myAnim = new YAHOO.util.Motion('test', {points: { to:[10, 10] } });
myAnim.animate();
In this code you create a Motion animation instance which animates the HTML element 'test'. The animation starts from the element's current position and ends at the x,y coordinates 10,10. Neither duration nor method is specified so the animation lasts 1 second with no easing.
モーション?付きアニメーション
var myAnim = new YAHOO.util.Motion('test', {points: { to:[10, 10] } });
myAnim.animate();
YAHOO.util.MotionはAnimベースクラスを拡張して、あるポイントまで要素を動かす、なんてことが出来ます。ポイントは X Y座標の配列で定義されます
このコードでは、Motionアニメーション・インスタンス（＝HTMLエレメントの'test')を創り出しています。アニメーションは、現時点での位置からスタートして、(x,y)=(10,10)座標で終了します。'duration' も 'method' も指定していないので、アニメーションは一秒間で終わり、イージング効果はつきません。
- 要素のどのポイントが指定座標に移動するのかな？左隅かな（clientX clientY)
- 要素の位置取得にはDomクラスの getXY()メソッドを使うよさげです
