JavaScript
jQuery
photoshop
swipe
SwipeEngine

PhotoshopとSwipeGeneratorでアニメーションを作る 2

More than 1 year has passed since last update.


SwipeとSwipeGeneratorについて

SwipeとSwipeGeneratorの説明やインストールについては以下のページを参照してください。

PhotoshopからSwipeを作成するSwipeGenerator

PhotoshopとSwipeGeneratorでアニメーションを作る 1


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です。


サンプル

実際のレイヤー名指定のサンプルです。

スクリーンショット 2018-05-27 8.55.42.png

生成されたアニメーションです(後半部分)

http://to-kyo.to/~isamu/swipe_sample_movie2/#0