スポンサードリンク

Yahoo! User Interface Library - Animation Utility

Animation Utilityとは

Elementに動きを与えるためのユーティリティーです。YAHOO.util.Anim(アニメーションの基本クラス)をはじめYAHOO.util.ColorAnim(色に関するアニメーションクラス)，YAHOO.util.Motion(位置に関するアニメーションクラス)，YAHOO.util.Scroll(スクロールに関するアニメーションクラス)が用意されていて、基本的なことはすぐできるようになっています。

詳しくはhttp://developer.yahoo.com/yui/animation/のオリジナルを読まれるのがよいと思います。

Animation Utilityを使う前準備

必要なのは4つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/animation-min.js"></script>

YAHOO.util.Anim

コンストラクタ


Anim(<String> el, <Object> attributes, <Number> duration, <Function> method)

パラメータ:

el - Element or id <div id="foo">...</div> とあった場合、document.getElementById('foo') or 'foo' を指定

attributes - { attribute: { from: ?, to: ?, by: ?, unit: ?} }という風に指定。たとえば

{ width: {
    from: 10, to: 100, unit: 'em'
} }

とあった場合、"幅を10em から 100em まで 5em 刻み"で動かせることになる。
from, to のかわりに by を使った場合は、現在の値からbyで指定した値ずつ動く
unit はデフォルト'px'

duration - アニメーションの長さを秒で指定

method - エフェクトを指定。指定できる種類はこのページのしたの方に記載

サンプル:

var anim1 = new YAHOO.util.Anim('anim1', {width: {from: 100, to: 200}}, 1);
// クリックしたらanim1.animate();を実行
YAHOO.util.Event.addListener('anim1', 'click', anim1.animate, anim1, true);

var anim2 = new YAHOO.util.Anim('anim2', {width: {by: 100}}, 0.5;
// クリックしたらanim2.animate();を実行
YAHOO.util.Event.addListener('anim2', 'click', anim2.animate, anim2, true);
...
...
<div id="anim1" style="width: 100px; height: 100px; cursor: pointer;"></div>
<div id="anim2" style="width: 100px; height: 100px; cursor: pointer;"></div>

＊サンプル中のaddListenerについてはEvent Utility編を見てください。

デモ: from, to

クリックすると動作します

デモ: by

クリックすると動作します
'by'なので何度クリックしても大きくなります

カスタムイベント

onStart(アニメーション開始時)，onTween(アニメーションのフレーム毎に発生)，onComplete(アニメーション終了時)が用意されています。

サンプル:

var anim3 = new YAHOO.util.Anim('anim3');
anim3.attributes.fontSize = { to: 150, unit: '%' };
anim3.duration = 5;

/* イベントの登録 */
function myAlert(args) {
    alert(args);
}
anim3.onStart.subscribe(myAlert, "start");
anim3.onTween.subscribe(myAlert, "tween");
anim3.onComplete.subscribe(myAlert, "complete");

YAHOO.util.Event.addListener('anim3', 'click', anim3.animate, anim3, true);

デモ:

カスタムイベントを登録しています。クリックするとアラートがでます。

エフェクトあれこれ

下のデモは赤字の部分を動的に変えて表示をさせています。

var v1 = new YAHOO.util.Anim('id', {width: {from: 20, to: 500}}, 1, YAHOO.util.Easing.backBoth);
v1.animate();

opacityの値をかえることで、色々なフェードIN, フェードOUTも表現できます

var v2 = new YAHOO.util.Anim('id', {opacity: {from:1, to: 0}}, 1, YAHOO.util.Easing.backBoth);
v2.animate();

YAHOO.util.ColorAnim

YAHOO.util.ColorAnimはYAHOO.util.Animと機能的には同じで、fromやtoに'#FFFFFF', rgb(255,255,255)を指定できます。

YAHOO.util.ColorAnimはYAHOO.util.Animのサブクラスなので、上に記載したエフェクトなどのサンプルはそのまま使えます。

サンプル:

var anim5 = new YAHOO.util.ColorAnim('anim5', {
    backgroundColor: { from: '#ffffff', to: '#000000'},
    color: {from: '#000000', to: '#ffffff'},
    width: {by: 20}
}, 5, YAHOO.util.Easing.elasticOut);

YAHOO.util.Event.addListener('anim5', 'click', anim5.animate, anim5, true);
...
...
<div id="anim5" style="width: 100px; height: 100px; border: 3px solid black;"></div>

デモ:

クリックすると色がかわります

YAHOO.util.Scroll

YAHOO.util.ScrollはYAHOO.util.Animと機能的には同じで、scrollというスクロールをさせるためのattributeが追加されています。指定方法は以下のように座標でスクロールさせます。

{ scroll: {
    from: [x, y], to: [x, y]
} }

YAHOO.util.ScrollはYAHOO.util.ColorAnimのサブクラスなので、上に記載したエフェクトなどのサンプルはそのまま使えます。

サンプル:

var anim6 = new YAHOO.util.Scroll('anim6', {
    scroll: { to: [document.getElementById("anim6").scrollLeft, 1000] }
}, 1, YAHOO.util.Easing.bounceIn);

YAHOO.util.Event.addListener('anim6', 'click', anim6.animate, anim6, true);
...
...
<div id="anim6" style="border: 1px solid #FFDEAD; width: 400px; height: 200px; overflow: scroll;">
クリックするとスクロールします
</div>

＊scrollの座標を指定するときに、scrollHeight, scrollWidth, scrollTop, scrollLeftを使うと便利です。

＊スクロールバーを表示させたいときは、overflow: scroll;もしくはauto を指定します。

デモ:

クリックするとスクロールします

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

YAHOO.util.Motion

YAHOO.util.MotionはYAHOO.util.Animと機能的には同じで、pointsという位置移動のためのattributeが追加されています。さらに、pointsはfromやto以外にcontrolを使うことで、中継点を指定できるようになっています。指定方法は以下のとおりです。

{ points: {
    from: [0, 0], to: [100, 100],
    control: [ [0, 50], [50, 100] ]
} }

YAHOO.util.MotionはYAHOO.util.ColorAnimのサブクラスなので、上に記載したエフェクトなどのサンプルはそのまま使えます。

サンプル:

var xy = YAHOO.util.Dom.getXY('anim7'); // 現在地を取得
var anim7 = new YAHOO.util.Motion('anim7', {
    points: {
        from: xy,
        to: xy,
        control: [
            [xy[0] + 200, xy[1] + 200],
            [xy[0] + 400, xy[1]],
            [xy[0] + 200, xy[1] - 200]
        ]
    }
}, 5, YAHOO.util.Easing.easeNone);

YAHOO.util.Event.addListener('anim7', 'click', anim7.animate, anim7, true);
...
...
<div id="anim7" style="width: 20px; height: 20px; background-color: #FFDEAD;"></div>

＊サンプル中のgetXYについてはDom Collection 編を見てください。

デモ：

↑クリックすると回りだします。

メールアドレス:
コメント^*: