CodeZine(コードジン)

特集ページ一覧

Yahoo! UI Library3(YUI3)の動きを受け持つモジュール

Yahoo! UI Library Ver.3 を使ってみよう(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次
プロパティ一覧

 フェードイン/フェードアウトはよく出てくるものですが、他のメソッドやプロパティはどんなものがあるのでしょうか。次に、プロパティとメソッドに分けて紹介します。

 例題にあるもの以外のプロパティの一覧表を示します。

モジュールanimのプロパティ
プロパティ 概要
direction 繰り返しの時の動作
  設定値 概要
  nomal 指定動作の繰り返し
  alternate 逆の動作と交互に繰り返し
easing アニメーション効果の指定
  設定値 概要
  Y.Easing.easeOut 最初は早く終わりで減速
  Y.Easing.elasticBoth スナップを効かせた動き
elapsedTime 経過時間(ミリ秒)を取得
iterationCount 繰返回数取得
iterations 繰り返し回数を指定
paused 現在停止しているかの確認(動作中の時間帯での停止でtrue)
running 現在動いているかの確認(動作中でtrue)

 プロパティの指定と取得の書き方をリスト2に示します。

[リスト2]プロパティの指定と取得の書き方
//プロパティの指定
	var anim = new Y.Anim({
	      node: '#demo',
	      direction:'alternate',	//(1)
	      iterations:3,
	      easing:Y.Easing.easeOut,
	});

//プロパティの取得
        Y.one('#demo').set('text',anim.get('running'));	//(2)

 (1)のように「プロパティ:指定データ」で指定します。取得は(2)のように、オブジェクト.get('プロパティ')のように書きます。

メソッド一覧

 メソッドはrun以外に以下のものがあります。

モジュールanimのメソッド
メソッド 概要 書き方
pause 動作を止める anim.pause()
stop 動作を終了する anim.stop()

 以上、モジュールanimの紹介でした。アニメーション処理のみ使っての作成でも面白いサイトができあがるのではないでしょうか。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5