好みのエフェクトに仕上げよう
最後に、特殊ワイプ効果の細かいパラメーターを設定してみましょう。パラメーターは、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
});
設定した特殊ワイプとパラメーターによって画像が切り替わる
<!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>
◆
以上で今回のサンプルは完成です。自分で撮影した写真画像やCGなど、UIZE Frameworkの特殊ワイプを使って表示すればまったく違った雰囲気を楽しめます。ぜひ、エフェクトの種類や設定を変更して使ってみてください。
