SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


プロパティ一覧

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

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

モジュール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の紹介でした。アニメーション処理のみ使っての作成でも面白いサイトができあがるのではないでしょうか。

次のページ
ドラッグ&ドロップ処理

この記事は参考になりましたか?

Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5104 2010/05/24 20:01

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー