09 | 2017/10 |  11

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

自作 jQuery プラグイン :animatedPopup 後に別のアニメーションを連続起動する

ここのアニメーションは IE では動きません。

jquery.js を使用した Animation 連鎖にチャレンジ

animatedPopup 起動後に、続けて別の Animation を連続起動してみる。

jQuery では連続アニメーションを容易に実行させることが出来る。例えば animatedPopup による表示を終えた後に、その要素を例えば画面内で移動するとか、次第に不透明化しながら消滅させるとか。表示領域を縮小/拡大するとか、様々なアニメーションを連続起動させることが可能だ。

あるいはまた複数のアニメーションを同時に履行させることも出来る。更にアニメーション終了後に callback 関数を起動させて何らかの処理をさせることも可能だ。自作プラグイン animatedPopup の連続起動も行えるだろう。

このエントリイではそんな複数アニメーションの連続履行を試みる。

連続アニメ 1. animatedPopup 後の要素を画面内で移動する。

animatedPopup 関数起動が終了すると、ユーザーが隠蔽操作を行わない限り、その要素は画面内に表示され続ける。これを活かして当該要素を自在に画面内に移動させてみる。

表示するコンテンツは先のエントリイ同様に他サイトの写真素材を活用し、画面内を次のように移動させる。まず画面左上に animatedPopup 表示する。その後、slideUp、slideDown で遊んでから、画面内を右上 → 右下 → 左下と時計回りに連続して移動させ、最後に最初の位置に戻してから fadeOut させてみる。

移動速度は 0.5、1、1.5、2 秒と次第に遅くし、それぞれの動きを加減速する easing も微妙に変化させ、消滅には 2.5 秒を掛けてみた。

この一連の動きを実行するには、下のボタンをクリックするだけでよい。この一連の自動実行アニメーションを楽しんで(?)戴きたい。

(出典は pixta

▲ToTop

連続アニメ 2. animatedPopup 後複数のアニメーションを同時起動する。

今度は animatedPopup によるアイテム表示後に、それを画面内で横移動させながら、フェードアウトさせ、直ぐにフェードインさせ、その後上へ移動させてから消滅させる。

(出典は pixta

連続アニメ 3. 2つの animatedPopup とその後のアニメーションを活かしつつ、相互に連続起動する。

下のボタンをクリックすると上で定義した 2 つのアニメーションを連続実行する。もう一度同じボタンを押した場合には、連続実行の順番を変えて実行するようにした。

▲ToTop

ここで実現した連続アニメーションのコード解説

ここで行った連続アニメーション作成の過程において、animatedPopup プラグインは更に進化を遂げざるを得なかった。元々連続アニメーションを想定していない仕様だったからだ。

その拡張に関する詳細は別項にて述べるとして、ここではこのエントリイで実現した連続アニメーションのコードについてメモとして解説しておきたい。

連続アニメーションのコード作成過程において、jquery.js のアニメーションコードをますます深く学習せざるを得なかったし、作成途上でスクリプトに工夫を加えた箇所も多数に上ったからである。

■このエントリで実現した連続アニメーションのコード
  // animatedPopup プラグインのインクルード
 1:(function(){var s=document.createElement('script');s.src='http://blog-imgs-31.fc2.com/h/k/o/hkom/my_Utilize_jQuery2.js';s.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(s);})();
   // ボタンの色づけ
 2: $(".btn711").css("backgroundColor","burlywood")
 3:  .mousedown(function(){$(this).css("backgroundColor","plum")})
 4:  .mouseup(function(){$(this).css("backgroundColor","burlywood").blur()});
   // 表示するコンテンツの作成
 5: var contents0="次のアニメーションを起動します。";
 6: var contents1='<img src="http://image.pixta.jp/image/thumb/51/14d687c77d91104811600b9d9916948a.jpg" width=450 height=301 />';
 7: var contents2='<img src="http://image.pixta.jp/image/thumb/41/bf5a19a4278538425a476ed1e113f0a9.jpg" width=450 height=316 />';
 8: // 画像先読み
 9: $("<div></div>").css("display","none").prependTo(document.body).html(contents1+contents2);
10:
11:$(function(){
   // animatedPopup プラグイン終了後に履行する関数定義その1
12: startAfterAnima = function(){
13:  var ani1=$(window).width()-$(this).outerWidth()+"px";
14:  var ani2=$(window).height()-$(this).outerHeight()+'px';
15:  $("#dispElem").slideUp("slow").slideDown()
16:  .animate({"left":'+='+ani1},500,"linear")
17:  .animate({"top":"+="+ani2},{duration:1000,easing:"swing"})
18:  .animate({"left":"-="+ani1},{duration:1500,easing:"easeInOutExpo"})
19:  .animate({"top":"-="+ani2},{queue:true,duration:2000,easing:"easeInOutSine"})
20:  .animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
21: }
   // animatedPopup プラグイン終了後に履行する関数定義その2
22: var startAfterAnima2 = function(){
23:  var ani=$(window).scrollTop();
24:  $("#dispElem").slideUp("slow").slideDown("slow")
25:  .animate({"left":"0px"},{queue:false,duration:2000,easing:"swing"})
26:  .fadeOut("slow").fadeIn("slow").animate({"top":ani},{queue:true,duration:2000,easing:"easeInOutSine"})
27:  .animate({"opacity":0},2500,"swing",function(){$(this).empty().hide().css({"opacity":1})});
28: }
29: // 各ボタンクリック時の animatedPopup 起動
30: $("#btn711-0").animatedPopup(contents0,["c","c"],1500,null,null,true);
31: $("#btn711-1").animatedPopup(contents1,["l","t"],2000,"easeOutElastic",null,null,true,startAfterAnima);
32: $("#btn711-2").animatedPopup(contents2,["c","c"],2000,"easeInOutExpo",null,null,true,startAfterAnima2);
 // 連続してanimatedPopup メソッドを起動する処理
33: // 3 つのボタンの jQuery インスタンスを配列に登録
34: var ary = [$("#btn711-0"),$("#btn711-1"),$("#btn711-2")];
   // 次のアニメーションを起動させる関数
35: var nextFunc =function(jQelem){
36:  if (!$("#dispElem").queue("fx").length){
37:   jQelem===ary[0] ? clearInterval(ival) : clearInterval(ival2);
38:   jQelem.trigger("click");
39:  }
40: }
41: var ival,ival2;
   // 3 番目のボタンに対する toggle イベント定義
42: $("#btn711-3").toggle(function(){
43:  $(this).children(0).text("リゾートプール+清水寺");
44:  ary[1].trigger("click");
    // 2つの待機関数を定義
45:  ival = setInterval(function(){nextFunc(ary[0]);},1000);
46:  ival2 = setInterval(function(){nextFunc(ary[2]);},1500);
47: },function(){
48:  $(this).children(0).text("清水寺+リゾートプール");
49:  ary[2].trigger("click");
50:  ival = setInterval(function(){nextFunc(ary[0]);},1000);
51:  ival2 = setInterval(function(){nextFunc(ary[1])},1500);
52: });
53:});

▲ToTop

コード内に記述したコメントでかなり説明になっていると思うが、苦労した点を中心にメモしておきたい。

アニメーション同時進行

幾つかの箇所でアニメーションの同時起動を試みた。queue:false に設定している箇所が同時進行のためのコードで、具体的には移動しながら slideUp/Down を行わせた。

アニメーション終了後の別アニメーションの起動

jQuery の animate インスタンスメソッドの complete 属性を活用して、animatedPopup メソッドが終了した後に別のアニメーションを起動させた。#124-140 で定義した関数が complete プロパティ値となる関数である。

2 つの animatedPopup 連続起動に最も苦労した

animatedPopup プラグインは jQuery インスタンスとして定義した。そしてここで扱った 2 つの写真表示アニメーションは、それぞれの呼び出し元が別々のボタンであり、animatedPopup には巧みに返値を設定することが出来ていない。つまりメソッドチェーンが使えない。

そこで jquery.js の イベント処理メソッドとして定義されている trigger メソッドを使って、異なる呼び出し元から呼び出される animatedPopup メソッドを連続起動させるようにした。

さて要点はタイマー設定だ。単純に 2 つの animatedPopup を並べるだけでは最後のそれしか作動しないのだ。コード進行はアニメーション実行とは無関係に次行へ次行へと進んでしまうから、前のアニメーションを待つことなく次のアニメーションが起動されてしまい、結局最後のアニメーションだけが表示されるのだ。

このため或るアニメーションが動作している間は、次のアニメーションが起動されないようにしなければならない。

そこで、タイマーを使って次のアニメーション起動を抑制することにした。

そこで問題となるのは、アニメーションが進行中であることを Javascript インタープリタに知らせる方法だ。jQuery インスタンス毎に、メソッド queue("fx") に animation が登録されることを利用する方法が或る書籍に書いてあったのでそれを使ってみた。

2 つ以上の animatedPopup の連続起動を別の方法で行ってみる

もっと巧い方法はないのだろうか、と思いたち本家サイトを改めて眺めてみた。すると、極めて簡単な方法が実は存在していることを思い知らされた。それは jQuery インスタンスの add メソッドを利用するものだ。こんな風にaddメソッドが使えたのか!───と感心してしまった。

しかし、この方法は 1 つの絶対配置要素を使ってアニメーションを実現している animatedPopup では巧く採用することが出来ないでいる。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/711-23e463f9

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200905010758
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。