第11項. Webkitのプラットフォーム用のアニメーション機能

画面の遷移をアニメーション化させる機能です。
アニメーション化された遷移がiPhone, AndroidとBlackBerryのOS6以上でサポートされています。Rhodesでは、画面間の遷移を実現するJQueryMobileをカスタマイズしたものを実装しています。

 

 1. 画面の遷移をアニメーション化させる

アプリケーションでアニメーション化された遷移を有効にするには、画面のレイアウトファイルのheadタグ内で以下の記述が必要です。

 

<% if System::get_property('platform') == 'APPLE' || System::get_property('platform') == 'ANDROID' || is_bb6 || ( System::get_property('platform') == 'UNKNOWN' && System::get_property('webview_framework') =~ /^WEBKIT/) %>
    <script src="/public/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0b1.min.css">
    <% if System::get_property('platform') == 'APPLE' %>
        <link href="/public/jqmobile/jquery.mobile.iphone.css" type="text/css" rel="stylesheet"/>
    <% end %>

    <script type="text/javascript">
        $(document).bind("mobileinit", function(){
            // jQuery-Mobile init options initialization goes here. For example, you may
            // enable automatically generated 'Back' buttons on headers this way:
            //$.mobile.page.prototype.options.addBackBtn = true;
            // Look for other init options here:
            // http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/globalconfig.html
        });
    </script>
    <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0b1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>
<% end %>

 

また、アニメーション化された遷移を使用するには、/rhoconfig.txtに”jqtouch_mode=1”を追加する必要があります。このプロパティを設置すると、ツールバーにある戻るボタンのアニメーションが有効になり、進むボタンが非表示になります。

上記を有効にした場合、画面の各リンクはフルパスでなければなりません。

 2. 既存の古いアプリケーションの遷移をアニメーション化させる


既存の古いアプリケーションに対して、画面遷移をアニメーション化させる方法を説明します。アニメーション化させるには以下の作業が必要です。

 

  1.  1画面の遷移をアニメーション化させるで説明した設定を行う。
  2.  各ビューのid属性をclass属性へ変更する。
    例: <div id=”toolbar”>は<div class=”toolbar”>
  3.  アプリケーションのpublicディレクトリに最新のRhodesの/public/js/jqueryと、/public/js/jqmobileディレクトリをコピーする
  4.  最新のRhodesから、/public/css/*.cssをコピーする。

3. アニメーションを変更する。


アニメーションを変更するには、<a>タグのclass属性を以下のいずれかの値に変更する必要があります。なお、初期値は”slide”になっています。

 

  • ● slide
  • ● fade
  • ● dissolve
  • ● flip
  • ● slideup
  • ● swap
  • ● cube
  • ● pop

 

backButtonクラスを設定すると、設定した画面へ遷移したときに利用したアニメーションを反転して適用されます。

target=”_webapp”を設定すると、設定したアニメーションを無効にして、指定したリンク先に遷移します。

システム工房エムのサイトへのリンク

住所〒690-0017 島根県松江市西津田3-2-3 TEL.0852-23-8590 FAX.0852-23-8591
Copyright 2008-2010 System Maker M,All right reserved