SwipeとSwipeGeneratorについて
SwipeとSwipeGeneratorの説明やインストールについては以下のページを参照してください。
PhotoshopからSwipeを作成するSwipeGenerator
PhotoshopとSwipeGeneratorでアニメーションを作る １
Swipeのプロパティー
ページ、素材のレイヤー名にSwipeのプロパティーを指定できるようになりました。Swipeの素材のプロパティーを指定することにより、画像に揺れなどのアニメーションを加えたり、半透明にする、またページのプロパティーを指定することにより、ページ遷移時の効果を変えることができます。
素材のレイヤー名に、
loop:style:wiggle:count:3 opacity:0.9 repeat:false
ページのレイヤーグループ名に
transition:fadeIn play:scroll duration:0.2 repeat:true vibration:false
のように、指定すると、生成されるswipeに反映されます。それぞれの要素は:で接続し、プロパティーは半角スペースで区切っています。
素材プロパティー
loop
繰り返しのアニメーションを指定できます。
loop:style:{以下のスタイルのいずれか}:count:{number}:{options_key}:{options_value}
のような形式で指定します。
- vibrate: 左右に揺らします。deltaで揺れの大きさを指定できます。
loop:style:vibrate:count:5:delta:10
- blink: 点滅します。
loop:style:blink:count:10
- wiggle: 揺れます。deltaで揺れの角度を指定。
loop:style:blink:count:10:delta:30
- spin: 回転します。
loop:syle:spin
- shift: 一方向に動きます。directionで上下左右（東西南北、"n", "s", "e" or "w", the default is "s"）に移動します。
loop:style:shift:direction:e
bc
背景色を指定します。
bc:#33aaca
opacity
透明度を指定します。0 ~ 1。
opacity:0.3
repeat
繰り返しを指定。
repeat:true
ページプロパティー
transition
ページのtransitionを指定します。
- scroll: 新しいページがスクロールします。
- fadeIn: フェードインします。
- replace: ページが置きかわります。
play
playはアニメーションの動作タイミングを指定します。
- auto: ページの表示が終わった後にアニメーションが動作します。
- pause: アニメーションが動作しません。
- always: ページの表示が終わった後にアニメーションが動作します。昇降順と逆順の両方のページ移動の時にアニメーションが動作します。
- scroll: ページがスクロールしている間にアニメーションが動作します。
bc
背景色を指定します。
bc:#33aaca
duration
アニメーションの動作する時間の長さを指定します。標準は0.2秒です。
repeat
アニメーションがリピートするかどうかをしています。defaultはfalseです。
サンプル
実際のレイヤー名指定のサンプルです。
生成されたアニメーションです（後半部分）