Help us understand the problem. What is going on with this article?

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

isamua
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした