今回は「反復移動」エフェクトの設定値の一覧について解説していきます。
「反復移動」は指定した値の間で移動を繰り返すエフェクトで小刻みに震わせたりする時にも使われます。
「反復移動」エフェクトアニメーション
「反復移動」エフェクトには主に「X」「Y」「間隔」「種類」「加減速」「中央寄せ」の設定項目があり、それらの値を変更することでオリジナルの「反復移動」エフェクトを作成することができます。
「反復移動」エフェクトの使い方まとめ
「反復移動」は先にも書きましたが「X」「Y」「間隔」「種類」「加減速」「中央寄せ」の項目があり、設定を変更すると移動範囲の変更、速度変更、起点の変更と様々なことができます。
今回はそんな「反復移動」のまとめをしていきます。
なお「加減速」は結構しっかりと以前解説していたのでそちらの記事から引っ張ってきています。
「反復移動」エフェクトまとめ
1-1.「反復移動」エフェクトのデフォルトは以下の通りです。
(デフォルト値:「X:0px」「Y:-100px」「間隔:1.00秒」「種類:緩急1 / Sine(弱)」「加減速:加減速 / InOut」です)
![反復移動_デフォルト](https://katojishi.com/wp-content/uploads/2022/10/1-1-4.gif)
1.「反復移動」エフェクト「X」「Y」「間隔」
1-1.「反復移動」エフェクトの「X」の値を「2000px」にすると次のように左右に大きく移動します。
(「Y」以外の値はデフォルトで、「Y」を「0」に設定しています。)
![反復移動_X_2000](https://katojishi.com/wp-content/uploads/2022/10/1-2-16.gif)
1-2.「反復移動」エフェクトの「Y」の値を「1000px」にすると次のように左右に大きく移動します。
(他の値はデフォルト値です)
![反復移動_Y_1000](https://katojishi.com/wp-content/uploads/2022/10/1-3-15.gif)
1-3.「反復移動」エフェクトの「間隔」の値を「0.1秒」にすると次のように素早く移動します。
(他の値はデフォルト値です)
![反復移動_間隔_0.1](https://katojishi.com/wp-content/uploads/2022/10/1-4-11.gif)
2.「反復移動」エフェクト種類
2-1.「反復移動」エフェクトの「種類」の値を「緩急1 / Sine」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![加減速アニメーション](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220521/20220521111256.gif)
2-2.「反復移動」エフェクトの「種類」の値を「緩急2 / Quad」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![緩急2 Quad 加減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220522/20220522100234.gif)
2-3.「反復移動」エフェクトの「種類」の値を「緩急3 / Cubic」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![加減速2](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220523/20220523090426.gif)
2-4.「反復移動」エフェクトの「種類」の値を「緩急4 /Quart」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![Quart4加減速GIF](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052126.gif)
2-5.「反復移動」エフェクトの「種類」の値を「緩急5 /Quint」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![Quint5加減速GIF](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052925.gif)
2-6.「反復移動」エフェクトの「種類」の値を「緩急6 /Expo」にすると次のように等速の様に動きます。
(「X」の値を「-500」~「500」に設定しています。)
![Expo6加減速GIF](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601053739.gif)
3.「反復移動」エフェクト「加減速」の「加減速」
3-1.直線移動の「緩急1 / Sine」の「加減速」エフェクトアニメーション
![Sine加減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220521/20220521111256.gif)
3-2.直線移動の「緩急2 / Quad」の「加減速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220522/20220522100234.gif)
3-3.直線移動の「緩急3 / Cubic」の「加減速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220523/20220523090426.gif)
3-4.直線移動の「緩急4 / Quart」の「加減速」エフェクトアニメーション
![Quart4加減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052126.gif)
3-5.直線移動の「緩急5 / Quint」の「加減速」エフェクトアニメーション
![Quint5加減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052925.gif)
3-6.直線移動の「緩急6 / Expo」の「加減速」エフェクトアニメーション
![Quint5加減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601053739.gif)
3-7.最後にそれぞれの移動速度をひとまとめにしたものです
![加減速アニメーション比較](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601055741.gif)
4.「反復移動」エフェクト「加減速」「加速」
4-1.直線移動の「緩急1 / Sine」の「加速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220521/20220521105114.gif)
4-2.直線移動の「緩急2 / Quad」の「加速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220522/20220522095558.gif)
4-3.直線移動の「緩急3 / Cubic」の「加速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220523/20220523085744.gif)
4-4.直線移動の「緩急4 / Quart」の「加速」エフェクトアニメーション
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220524/20220524124436.gif)
4-5.直線移動の「緩急5 / Quart」の「加速」エフェクトアニメーション
![Quart5加速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052537.gif)
4-6.直線移動の「緩急6 / Expo」の「加速」エフェクトアニメーション
![Expo6加速GIF](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601053345.gif)
4-7.最後にそれぞれの移動速度をひとまとめにしたものです
![加速アニメーション比較](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601054819.gif)
5.「反復移動」エフェクト「加減速」「減速」
5-1.直線移動の「緩急1 / Sine」の「減速」エフェクトアニメーション
![Sine減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220521/20220521105657.gif)
5-2.直線移動の「緩急2 / Quad」の「減速」エフェクトアニメーション
![Quad減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220522/20220522095909.gif)
5-3.直線移動の「緩急3 / Cubic」の「減速」エフェクトアニメーション
![Cubic減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220523/20220523090153.gif)
5-4.直線移動の「緩急4 / Quart」の「減速」エフェクトアニメーション
![Quart4減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601051926.gif)
5-5.直線移動の「緩急5 / Quart」の「減速」エフェクトアニメーション
![Quart5減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052651.gif)
1-6.直線移動の「緩急6 / Expo」の「減速」エフェクトアニメーション
![Expo6減速](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601052925.gif)
5-7.最後にそれぞれの移動速度をひとまとめにしたものです
![減速アニメーション比較](https://cdn-ak.f.st-hatena.com/images/fotolife/k/katojishi/20220601/20220601055221.gif)
6.「反復移動」エフェクト「中央寄せ」
6-1.「反復移動」エフェクトの「X」の値を「500px」、「中央寄せ」のチェックをOFFにするとデフォルト位置を起点に右に動きます。
(「Y」以外の値はデフォルトで、「Y」を「0」に設定しています。)
![反復移動_X_中央寄せ](https://katojishi.com/wp-content/uploads/2022/10/1-2-17.gif)
6-2.「反復移動」エフェクトの「X」の値を「-500px」、「中央寄せ」のチェックをOFFにするとデフォルト位置を起点に左に動きます。
(「Y」以外の値はデフォルトで、「Y」を「0」に設定しています。)
![反復移動_-X_中央寄せ](https://katojishi.com/wp-content/uploads/2022/10/1-3-16.gif)
6-3.「反復移動」エフェクトの「Y」の値を「500px」、「中央寄せ」のチェックをOFFにするとデフォルト位置を起点に下に動きます。
(他の値はデフォルト値です)
![反復移動_Y_中央寄せ](https://katojishi.com/wp-content/uploads/2022/10/1-4-12.gif)
6-4.「反復移動」エフェクトの「Y」の値を「-500px」、「中央寄せ」のチェックをOFFにするとデフォルト位置を起点に下に動きます。
(他の値はデフォルト値です)
![反復移動_-Y_中央寄せ](https://katojishi.com/wp-content/uploads/2022/10/1-5-9.gif)
6-5.「反復移動」エフェクトの「X」「Y」の両方の値を「500px」、「中央寄せ」のチェックをOFFにするとデフォルト位置を起点に下に動きます。
(他の値はデフォルト値です)
![反復移動_X_Y_中央寄せ](https://katojishi.com/wp-content/uploads/2022/10/1-6-5.gif)
今回はここまで
次回は「反復回転」の「X」「Y」「Z」について解説していきます。
コメント