Kony Visualizerでアニメーションを作成する

#目次
1. はじめに
2. アニメーションの作成方法
3. まとめ

#はじめに
今回はKony Visualizerでアニメーションを作成する方法を説明します。
アニメーションの作成方法にはアクション画面を使って作成する方法と、コーディングをして作成する方法の2通りがあります。
今回はアクション画面での設定方法を紹介します。


#作成方法
[完成図]
会員登録が完了した時など、おめでとうございますと表示されるアニメーションを作成します。
クラッカーからテープが飛び出すアニメーションをKonyで作成していきましょう！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/kD9Nz6MSAZ">pic.twitter.com/kD9Nz6MSAZ</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1260083338162757637?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

クラッカーの画像を適当に見つけてきます。
初めはテープを見せたくないので、画像を加工して2つに分割を行います。

この画像を・・・
![fire-cracker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/43235f0a-55e5-2241-aab4-ffc0e16bc343.png)
-----✂️----こうします----✂️--------
![fire-cracker (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8a414b99-6260-8f18-cbce-d133b2bd70cc.png)
![fire-cracker (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/677364ed-0b9a-3f08-580f-55ef83e1da69.png)

それぞれの画像をKonyVisualizerに取り込みます。
AssetのCommon->Import Imagesを選択し、分割した画像を選択します。
<img width="257" alt="スクリーンショット 2020-05-12 14.48.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2928f8f5-6db4-9201-0b17-419caf7f4137.png">
取り込まれました。↓
<img width="237" alt="スクリーンショット 2020-05-12 14.50.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6126059c-3456-e615-3de9-ed986c0acbf1.png">

画像を取り込んだら、クラッカーのコーン部分を設置し、
テープ部分は見えないようにコーン部分に後ろに小さく隠しておきます。（画像参照）
<img width="622" alt="スクリーンショット 2020-05-12 14.53.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/127acfe2-83dc-a5ca-9174-d070fbc38a8e.png">
この位置までテープをアニメーションさせたいので、
動かしたい位置まで画像を動かして、Width,Height,Top,Leftの位置をメモなどに記憶しておきます。
（メモしたら、最初の見えない位置に戻してください）

<img width="1294" alt="スクリーンショット 2020-05-12 14.55.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bfcf4f28-264f-5227-2298-5baabfb28f8d.png">

アニメーションを行う画像の配置が完了したので、アニメーションの設定を行っていきます。


Formをクリックし、postShowのEditをクリック
<img width="383" alt="スクリーンショット 2020-05-12 14.56.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/27c4dce3-cee7-5d29-f224-150103475831.png">
editを選択すると、アクション設定の画面に遷移するので、左側のメニューからAnimationタブを確認してください。
<img width="197" alt="スクリーンショット 2020-05-12 14.58.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6d770300-7f1c-2a79-ae95-09f2631757fd.png">


|機能|内容|
|:-----------------|:-------------|
|Flex Move| ウィジェットを元の位置から移動します|
|Flex Scale|ウィジェットのサイズを変更します|
|Flex Layout|X軸とY軸（2次元）に沿った単一のアクションでウィジェットを移動、スケーリング、回転します。  |
|Transform|X、Y、およびZ軸（3次元）に沿った単一のアクションでウィジェットを移動、スケーリング、回転します。 | 
|Rotate|X軸とY軸（2次元）に沿ってウィジェットを回転させます。  |
|Rotate 3D|X、Y、Z軸（3次元）に沿ってウィジェットを回転させます。  |
|Set Style|ウィジェットの背景色を変更します。  

今回は、テープの画像を大きく且つ位置を移動するため、`Flex Layout`を利用します。
`Flex Layout`を選択すると以下のような画面が表示され、
下部メニューでアニメーション実行後のウィジェットの位置、大きさを設定することができます。
[先ほどメモした内容](#メモ)を、`Width`,`Height`,`Top`に入力していきます。
<img width="976" alt="スクリーンショット 2020-05-12 19.54.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/868b8343-5e12-a20c-04c5-07e4212c5304.png">

完成したら、PreviewのRunを実行し、実機で確認してみましょう！
<img width="256" alt="スクリーンショット 2020-05-12 19.57.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f178f17-9ba7-45b5-b561-f7bbd5a78696.png">

実行すると動画のようにアニメーションが実行されました！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/kD9Nz6MSAZ">pic.twitter.com/kD9Nz6MSAZ</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1260083338162757637?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
[補足]
アクションのGenerate Codeをクリックすると、アクションで設定したものがコードで読むことができます。
コードで記述したい場合などは、一度アクションで作成してコードを生成することも可能です。
<img width="1060" alt="スクリーンショット 2020-05-12 19.58.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cb824dc0-a0d1-d7a6-70a7-4813e9289295.png">


#まとめ
今回はアクション画面での設定方法を紹介しましたが、
他にもコードを書いて設定する方法もあります。
自分のやりやすい方法で、アニメーションを使ってみてくださいね。

参考：
アクションでのAnimation設定
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Default.htm#ActionsAnimation.htm#Move
Animation APIを使った設定 
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/animationapi.htm