古籏一浩のJavaScriptラボ ― 第19回

JS超えた!? UIZE Frameworkの特殊効果を見せます！

2009年11月13日 14時00分更新

文● 古籏一浩

好みのエフェクトに仕上げよう

　最後に、特殊ワイプ効果の細かいパラメーターを設定してみましょう。パラメーターは、2ページ目で紹介したとおり、UIZE Frameworkのデモページで確認できます。パラメーター名はプロパティ名に対応しており、set()を使って指定します。指定できるプロパティ名は以下のとおりです。

allToFull	割合（座標計算処理）
alignX	横の開始位置～終了位置や動きをまとめて設定
alignY	縦の開始位置～終了位置や動きをまとめて設定
dissolve	不透明度変化も同時に行うかどうかのフラグ
divisionX	横の分割数
divisionY	縦の分割数
duration	処理にかかる秒数（ミリ秒）
firstPaneSizeX	最初の横サイズ
firstPaneSizeY	最初の縦サイズ
paneSeedSizeX	横サイズ（シード：初期値）
paneSeedSizeY	縦サイズ（シード：初期値）
paneSeedContext	コンテキスト
paneProgressDelay	ディレイ
paneOrderScheme	表示処理方法

　すべて設定する必要はありません。たとえばワイプにかかる時間を8秒に設定したい場合はimageWipe.set({ duration : 8000 });とするだけです。複数のパラメーターを一括して指定する場合は以下のように記述します。


imageWipe.set({
                duration : 6000,
                allToFull : 20,
                divisionsX : 4,
                divisionsY : 4,
                paneSeedSizeX : 40,
                paneSeedSizeY : 20
});


設定した特殊ワイプとパラメーターによって画像が切り替わる

●サンプル3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>ImageWipeサンプル3</title>
        <link rel="stylesheet" href="css/page.content.css"/>
    </head>
    <body>
        <script type="text/javascript" src="js/Uize.js"></script>
        <div id="page_imageWipe" style="position:relative; width:600px; height:338px; border:1px solid #555;"></div>
        <script type="text/javascript"><!--
            photoNo = 0;
            photos = ['photo/1.jpg', 'photo/2.jpg', 'photo/3.jpg'];
            Uize.module ({
                required:[
                    'Uize.Widget.Page',
                    'Uize.Widget.ImageWipe.xPresets'
                ],
                builder:function () {
                        var page = window.page = new Uize.Widget.Page();
                        imageWipe = page.addChild ('imageWipe',Uize.Widget.ImageWipe,{built:false});
                        page.wireUi();
                        imageWipe.set(Uize.Widget.ImageWipe.presets.facetedFade);
                        imageWipe.set({
                                        duration : 6000,
                                        allToFull : 20,
                                        divisionsX : 4,
                                        divisionsY : 4,
                                        paneSeedSizeX : 40,
                                        paneSeedSizeY : 20
                        });
                        performWipe();
                        setInterval('performWipe()', 4000);
                }
            });
            function performWipe () {
                imageWipe.set({src : photos[photoNo]});
                photoNo = (photoNo + 1) % photos.length;
            }
        // --></script>
    </body>
</html>