![フキダシ](https://nomad-cafe-20.com/wp-content/uploads/2021/05/入れ替えフキダシ2.gif)
はじめに
↑のような感じでフキダシが入れ替わります。
画像はGIFなので分かりづらいですが、実際はもう少し滑らかに動きます。
今回は、「課金をしようか悩む男性の脳内の葛藤」をフキダシにしたかったので
いらすと●さんでイイ感じのイラストを使わせてもらいました!
それでは作っていきましょう!
作成手順
まずは適当な大きさの四角形に黒の円形グラデーションをかけます↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.21.09.png)
グラデーションの上に男性の画像を配置します↓
※フキダシの位置を考慮しながら配置しましょう。
※ついでにグラデーションの画像と男性画像を選択し、グループ化しておきましょう。
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.40.26.png)
次にフキダシを作ります。
好きなサイズの長方形を作り↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.36.55.png)
長方形をダブルクリックして編集できるようにします↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.37.10.png)
そうすると長方形の辺にアンカーポイント(?)を追加できます↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.48.57.png)
ポイントを引っ張って好きな形を作ります↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.41.40.png)
画像を配置し、好きなテキストを打ちます↓
※画像、テキスト、フキダシの3つを選択し、グループ化しておきましょう。
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-15.58.52.png)
同様の手順でもう一つのフキダシを作ります↓
※画像、テキスト、フキダシの3つをグループ化しておきましょう。
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-16.02.32.png)
天使、悪魔、男性背景の3つのグループを重ねます↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-16.05.55.png)
こんな感じのイメージです↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-16.10.28.png)
悪魔のフキダシを不透明度20%くらいにしたら準備完了です↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-16.05.19.png)
画像に動きをつけていきます。
天使と悪魔の2つのグループを選択し、コンポーネントにします↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-10-16.21.36.png)
ステートを追加します↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-12.19.45.png)
天使のグループをダブルクリックし、編集できるようにします↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-12.25.38.png)
天使のグループを Ctrl+[ または ⌘+[ で悪魔の背面に持っていくのですが、
この時天使のグループを少し縮小し、やや右下へ位置をずらします↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-12.31.00.png)
天使のグループの不透明度を20%程に下げ、悪魔の背面へ持っていきます。
悪魔の不透明度を100%に戻し、天使とは反対に左上に向かって画像を拡大します↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-12.43.07.png)
画像の拡大・縮小、位置の調整をしておくとカッコ良くテキストが入れ替わるような気がします。
プロトタイプの画面へ移動し、動きの指示を出します↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-14.05.57.png)
まず初期設定のステートの設定を変更します。
トリガーは「タップ」、アクションは「自動アニメーション」で移動先はステート2、
イージングは「なし」、デュレーションは「0.2秒」で設定しています↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-14.08.45.png)
ステート2も移動先以外は同様の設定で、移動先は初期設定のステートにします↓
![](https://nomad-cafe-20.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-14-14.12.23.png)
最後に動作確認を行なって作業完了となります、お疲れ様でした!
さいごに
正直あんまり使いどころないかなぁと思いましたが、
みなさんのアイデアや閃きの一助となればうれしいです!
![フキダシ](https://nomad-cafe-20.com/wp-content/uploads/2021/05/入れ替えフキダシ2.gif)
![](https://nomad-cafe-20.com/wp-content/uploads/2021/03/icon_pandacar.png)
コメント